教程:用GA和GTM跟踪網站上的影片播放事件

Photo of author
Written By CMO

影片作為重要的多媒體元素在許多網站上被部署,它對提升轉化率有著非常積極的作用。由於很多情況下我們會使用第三方影片託管,如何跟踪用戶對這些影片元素的反應是用戶是否接受你的產品的指標之一。在國外常用的是Youtube,Vimeo和Wistia,國內最多見的是Youku。為了方便教程本編文章我們只用Wistia和Youku作代表。

跟踪用戶的影片播放行為
跟踪用戶的影片播放行為

 

跟踪Wistia影片播放

我們先講Wistia,因為它的API比Youku豐富得多。為什麼要用GTM呢? GTM對於動態地插入跟踪代碼有很好的靈活性。假設你運營一個論壇,你可以只在用戶上傳影片的頁面插入跟踪代碼。在此之前我們已經介紹過利用Universal Analyitics和GTM進行用戶級別的跟踪了,想必一定得心應手了。現在介紹一下整體思路。

首先你要判斷是否頁面上有影片,你可以判斷一個DOM元素是否具有某個屬性來識別。這裡需要一個在每個頁面都觸發的宏(macro)。

具體做法是添加一個“Wistia Video Exist”的宏,類型是Custom Javascript。如下圖:

該宏會每個頁面都運行如果發現影片則返回true
該宏會每個頁面都運行如果發現影片則返回true

其次如果上述標籤返回“true”,你將會看到某一個宏(macro)的值為“true”。接著觸發下一個標籤(tag)即我們的跟踪代碼。

下圖是一個rule,查看上述宏的值,如果為true則觸發跟踪代碼:

跟踪代碼標籤為Wistia Analytics Tracking
跟踪代碼標籤為Wistia Analytics Tracking

這個跟踪代碼標籤會監聽播放器事件,把“播放”,“停止”,“15秒”,“25%”,“50%”,“75%”,“100%”這些事件推送到數據層(data layer)。

跟踪代碼通過監聽Wistia的JS API事件推送給數據層:

Wistia Analytics Tracking是一個Custom HTML標籤
Wistia Analytics Tracking是一個Custom HTML標籤

當數據層被推送時,推送了4個數據:

event,是GTM默認的宏,同時也是數據層默認的變量。你可以直接推入。下圖中就是event變動時觸發最終UA標籤的rule:

如果宏為GAevent,便開始向UA推送事件
如果宏為GAevent,便開始向UA推送事件

event category,這是GA的必選參數,你要再建一個宏來獲取數據層的變量。

將數據層變量映射到宏
將數據層變量映射到宏

event action,同上。

event label,同上。

當event為“GAevent”時(rule),觸發一個GA標籤(tag)。把上述3個宏推入。

這裡就是一個標準的UA標籤了,觸發的條件為Video Event Firing rule:

將數據層來的宏的數據傳給UA
將數據層來的宏的數據傳給UA

上述就是在Wistia中實現跟踪用戶播放行為的方法。當插入影片時,會調用Wistia的API,代碼如下:

<div id=”wistia_ryantprymg” class=”wistia_embed” style=”width: 640px; height: 360px;”>影片加載中</div>
<script src=”//fast.wistia.com/assets/external/E-v1.js” charset=”ISO-8859-1″></script>

<script>// <![CDATA[wistiaEmbed = Wistia.embed(“ryantprymg”);// ]]></script>

頁面加載時class的值wistia_embed會被檢索到。

跟踪優酷影片播放

優酷影片的做法和前者非常相似,但又有很大不同。簡單介紹一下。由於優酷至今還只能嵌入Flash播放器,JS API的播放事件也不是很全,我們只能拿到一些基本的事件:加載,播放,結束。如果你未用GTM,你只要在3個回調函數里調用GA的Event推入即可。而如果你使用了GTM,那你要做的僅僅是將數據推入到數據層,並將宏event賦值為GAevent,剩下的和上文講的Wistia用法完全一樣,還免去了查找影片的麻煩。不過每次嵌入影片都要插入回調函數代碼。

值得注意的是,雖然我們可以在一個頁面插入多個影片,但是加載後回調時vid卻只能有一個。也就是說目前僅能夠跟踪最後一個載入的影片。如果你有更好的方法,請回復告知。謝謝。另外吐槽一下,YK真的很貴!

其他第三方影片的跟踪

其他影片的跟踪的總體思路一樣,關鍵是在播放事件的回調函數中將Event各參數推入數據層,同時利用宏event觸發UA或者GA推送。如果你對跟踪YouTube感興趣,請參考這篇文章。