如何用 GTM 追蹤網站的「Youtube 影片」表現?

在 GTM 推出「Youtube 影片」觸發條件之前,如果想要追蹤網站上的 Youtube 影片播放行為,我們只能使用網路大神撰寫的 JavaScript 並透過 GTM 的「自訂 HTML」代碼來設置監聽器進行追蹤,直到 GTM 推出了「Youtube 影片」觸發條件,只需要點擊幾個按鈕,數位行銷人員就可以方便快速地追蹤網站上的 Youtube 影片。

而在 GA4 推出之後,其「加強型評估事件」也提供了「影片參與」的追蹤功能,讓你不用透過 GTM 設定也可以追蹤網站上的 Youtube 影片表現,不過呢,它就跟 GA4「加強型評估事件」中的「表單互動」一樣,也會有失誤的時候,有時只追蹤到播放播放完成這兩個動作,而遺失了播放進度事件。

因此,如果可以的話,建議都使用 GTM 內建的「Youtube 影片」觸發條件來進行追蹤事件代碼的設定,而且透過 GTM 設定還可以追蹤影片的暫停以及跳轉等動作,至於該怎麼做呢?

讓我們繼續看下去。



關閉 GA4 的「影片參與」事件

GA4 介面點擊左下角「齒輪」 > 點擊「資料串流」 > 選擇屬於該網站的「資料串流

於網頁串流詳情頁面點選「加強型評估」區塊中的設定齒輪 > 關閉「影片參與

到這個步驟,我們成功地關閉了 GA4 對 Youtube 影片事件的追蹤。這樣做的目的是為了確保未來從 GTM 中建立的影片追蹤事件不會與現有設定產生衝突,進而保障報表數據的準確性。

(如果你沒先關閉,在設定完 GTM 之後,如果使用者點擊一次播放,屆時 GA4 會收到兩次的播放事件。)


啟用 GTM 影片相關變數

GTM 已經為我們內建了影片相關的變數,只要將其勾選開啟之後,便可以在代碼設定中使用,並將影片的相關資料參數傳送到 GA4 中。

GTM 左側介面選擇「變數」 > 於「內建變數」區塊右上角選擇「設定」> 將所有影片相關變數打勾

GTM 提供了相當豐富的內建變數,各變數解釋如下:

  • Video Provider (影片提供者):紀錄影片來源,例如 Youtube
  • Video Status(影片狀態):這個事件紀錄使用者是按下了播放還是暫停
  • Video URL(影片網址)
  • Video Title(影片標題)
  • Video Duration(影片播放時間):代表的是整隻影片的總時間長度
  • Video Current Time(影片目前時間):代表該事件發生時的影片當前時間,例如使用者按了暫停,會紀錄下按下暫停的時間點。
  • Video Percent(影片百分比):紀錄事件發生時,該時間點為全影片總時間長度多少百分比的位置。
  • Video Visible(影片可見度):影片是否出現在網頁上使用者看得到的地方。

設定「Youtube 影片」觸發條件

GTM 左側介面選擇「變數」 > 右上角點擊「新增」> 選擇觸發條件類型「Youtube 影片

在「YouTube 影片」觸發條件設定頁面中,我們能夠自訂想要追蹤的使用者行為,以滿足你的網站追蹤需求。

在「進度」設定的部分,可以自訂百分比數字,例如:你希望當影片播放到 25%、50%、75% 以及 90% 的時候,符合觸發條件,都可以在這邊自訂。而在 GA4 的加強型評估事件中也提供類似的功能,不過預設的百分比是 10%、25%、50% 和 75%,無法更改預設的百分比值。

完成設定後,請將這個觸發條件命名並儲存。接下來,我們可以進入觸發條件測試階段。

確認觸發條件是否正常運作

當你完成觸發條件的設定之後,建議先來到「預覽模式」確認是否有正常運作,如果設定成功,當你播放或暫停網頁上的 YouTube 影片後,你應該可以在「預覽模式」的左側面板中看到以下畫面。

搞定!這樣就代表我們設定的「Youtube 影片」觸發條件有正常運作,現在你可以開始設定 GA4 事件追蹤代碼了。

補充一下

進階設定中的 JS API?

在上圖中,可以看到我們有在進階設定的區塊中勾選了「在所有 YouTube 影片中加入 JavaScript API 支援功能」的選項,這可能讓你感到疑惑:這是什麼?為什麼要勾選這個選項呢?

當你將滑鼠移到問號圖示旁邊時,你會看到以下解釋:

這是因為如果要讓「Youtube 影片」觸發條件正常運作,嵌入網站的影片網址中必須包含 enablejsapi=1 的參數。然而,一般我們嵌入到網頁中的 Youtube 影片,其代碼中的網址會如下圖,是沒有 enablejsapi=1 這個參數的,如果沒有啟用 JavaScript API,觸發條件就無法正常運作(包含 GA4 的加強型評估事件也是)

Youtube 嵌入影片代碼介面

因此我們將剛剛代碼進階設定中「在所有 YouTube 影片中加入 JavaScript API 支援功能」這句話翻譯成白話文就是:

如果你嵌入網站的影片沒有 enablejsapi=1 這個參數,當你在觸發條件設定中勾選了「在所有 YouTube 影片中加入 JavaScript API 支援功能」, GTM 就會自動為你的影片連結加上 enablejsapi=1 這個參數(如下圖),讓「Youtube 影片」觸發條件可以正常運作。

只是這個功能有一個缺點,假設使用者已經開始在觀看 Youtube 影片,當 GTM 啟動「在所有 YouTube 影片中加入 JavaScript API 支援功能」時,已經在播放的影片會重新載入,這就會導致畫面跳閃一下,影響到使用者的體驗。

啟用觸發條件的時機?

在「啟用觸發條件的時機」下拉選單中,可以看到有三個選項,分別是「容器載入(gtm.js)」、「DOM 就緒(gtm.dom)」以及「視窗載入(gtm.load)」,如果不做任何改變,預設都會是「DOM 就緒(gtm.dom)」。

所以,我應該要選擇哪一個?

答案是:視情況而定。

有些網站工程師為了優化網站的速度,因此在設計上會將外部載入的影片延後載入到網頁中,此時如果你提早讓「Youtube 影片」觸發條件比影片還早載入網頁中「監聽」是否有 Youtube 影片的存在,那麼觸發條件可能會找不到任何影片,因此無法作用。

因此,一般建議選擇「視窗載入(gtm.load)」的選項,這樣當整個網頁(包括 Youtube 影片)都載入完畢後,觸發條件才開始監聽,確保網頁上已經存在 Youtube 影片,從而保證觸發條件能夠正常運作。

不過呢,最終的選擇還是取決於你的網站是如何載入 Youtube 影片的,如果使用「DOM 就緒(gtm.dom)」,相關追蹤事件代碼運作都正常,那就使用「DOM 就緒(gtm.dom)」即可。

關於這三個觸發條件的解釋,可以參考文章:認識 GTM 網頁觸發條件:網頁瀏覽、同意聲明初始化、初始化、DOM 就緒和視窗已載入。


設定追蹤事件代碼

在設定代碼之前,我們可以先確認一件事情。在 GA4 中,事件被分成四種類型,分別是:「自動收集的事件」、「加強型評估事件」、「建議事件」以及「自訂事件」,官方建議如果前三個事件都不符合所需時,再考慮建立「自訂事件」。

由於我們已經關閉了原本的「加強型評估事件」中的「影片參與」事件,並使用 GTM 來替代其原本的追蹤行為,因此接下來的設定將會參照原「影片參與」事件的事件名稱以及事件參數命名,之後也不需要另外在 GA4 中自訂維度,可以讓設定相對簡單很多。

加強型評估事件中的「影片參與」事件

在確認完要如何為事件以及參數的名稱命名之後,我們就可以開始進入設定流程。

GTM 左側介面選擇「代碼」> 右上角點擊「新增」 > 選擇「Google Analytics(分析)」 > 選擇「Google Analytics(分析):GA4 事件

代碼設定介面「事件名稱」欄位填入 video_start (原加強型評估「影片參與」事件名稱)> 「事件參數」則如下圖依序填入(也是沿用原參數名稱)。

事件以及參數名稱可以參考 Google 官方文件,最右邊的值則是文章一開始勾選的影片內建變數

事件名稱設定小技巧

依照我們觸發條件的設定,我們總共會有 video_start(播放)video_progress(影片進度)video_pause(影片暫停)video_complete(影片播放完成)以及 video_seek(影片快轉)總共五個事件要設定,如此一來就要一樣的動作做五次,去重複設定五個唯獨「事件名稱」不同的代碼,非常的麻煩且沒有效率。

別擔心,其實可以不用這麼累,只要善用內建的影片變數 Video Status 就可以。

預覽模式中左側面板選擇 Youtube Video 事件 > 右側面板選擇「變數(Variables)」頁籤 > 可以看到內建變數 Video Status 的值

我們可以將這個變數值,放入代碼設定中的事件名稱欄位,如下圖:

最後將代碼與文章前段設定的「Youtube 影片」觸發條件綁定,畫面如下:

搞定!預覽模式測試

透過預覽模式我們可以看到,當影片開始播放的時候,我們設定的 GA4 追蹤事件代碼也一起啟動。

(對於如何進入預覽模式還不熟悉的朋友,可以參考這篇文章:如何用 GTM 「預覽模式」檢查代碼有無設定成功?

如果點開圖片下方的事件卡片,可以進一步看到設定的事件名稱以及參數。

最後,還要用 GA4 的 Debug View 確認 GA4 是否有接收到 GTM 代碼發出的事件名稱以及參數,如果正確的話,我們應該可以看到以下畫面。

(對於 GA4 後台尚不熟悉的朋友,也可以參考這篇文章,有基本的後台項目介紹:認識 Google Analytic 4 後台介面

GA4 介面點擊左下角「齒輪」進入後台 > 「資料顯示」區塊 > 選擇「Debug View

搞定!


總結一下

到目前為止,整個影片追蹤設定流程大概是這樣:

  1. 關閉 GA4 加強型評估事件的「影片參與」
  2. GTM 中啟用影片相關的內建變數
  3. 設定「Youtube 影片」觸發條件
  4. 設定「GA4 事件」代碼
  5. 確認運作正常

不過這邊還是要提醒一下,這樣的追蹤設定是針對嵌入在自家網站的 Youtube 進行追蹤,無法追蹤 Youtube 網站上面的影片行為,儘管那是你的頻道(仔細想一下就知道,Youtube 頻道有地方讓你放 GTM 嗎?)

有了這個觸發條件之後,追蹤嵌入在自家網站上的 Youtube 影片就簡單多了,行銷人員不再需要透過「自訂 HTML」代碼安裝 JS 代碼,這樣也讓追蹤工作變得更親民了許多。

然而,雖然安裝追蹤功能變得更加便利,但身為行銷人員,也必須要思考一個重要的問題:

「我真的需要追蹤這麼多事件嗎?或許只要知道播放跟進度就可以了?」

或是

「我能否透過追蹤點擊播放,了解影片放在文章哪個段落中比較有人會看?使用者快轉的秒數位置在哪裡?是否有特定章節是使用者優先快轉過去的?」

你需要思考透過這些追蹤事件驗證什麼假設,然後進行相應的設定,切記,不要為了追蹤而追蹤,這也是我們之前在許多文章中所提到的核心觀念。


延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)