Google Tag Manager 上對Vimeo影片做追蹤(GA4)

更新時間：2024年09月05日

這一篇介紹如何在GTM上對Vimeo影片做追蹤蹤，如要對Youtube影片做追蹤，延伸閱讀:【GA4設定】Google Analytics 4 中對Youtube影片做追蹤

假設我現在要追蹤 https://grounded.world/our-work-hidden-camera-on-hunger/上的Vimeo影片播放：

實現方式

通過GTM裡注入一段JavaScript去監聽Vimeo影片的播放，然後在通過dataLayer.push發送事件，如JavaScript如下：

<!--
Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking

Copyright 2016, Cardinal Path, Inc.

Original author: Bill Tripple <btripple@cardinalpath.com>
Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com>
Updated by: Julius Fedorovicius <julius@analyticsmania.com> and Richard Outram <Richard.Outram@simmbiotic.com>

Version 2.1
-->

<script>
var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : [];
var videoLabels=[];
var lastP=[];


//we declare variables that will hold information about the video being played
var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {}; 

try{
 init();
}
catch(err){
 dataLayer.push({
 'event': 'gtm.error',
 'errorMessage': e.message,
 'tag': 'CP - UA - Vimeo Video Listener'
 })
}
function init(){
 try{
 var player=document.getElementsByTagName("iframe");
 for (i = 0; i < player.length; ++i) {
 var url=player[i].getAttribute("src");

 if(/player\.vimeo\.com\/video/.test(url)){ // vimeo iframe found
 if(!player[i].hasAttribute("id")){ // id attribute missing
 player[i].setAttribute("id","vimeo_id_"+i); // add id attribute
 }
 var urlUpdated=false;
 if(!/api=/.test(url)){ // check to see if api parameter is in src attribute
 url=updateUrl(url,"api",1);
 urlUpdated=true;
 }

 if(!/player_id=/.test(url)){ // check if player_id is in src attribute
 url=updateUrl(url,"player_id",player[i].getAttribute("id"));
 urlUpdated=true;
 }
 if(urlUpdated){ // repopulate src attribute with added parameters
 player[i].setAttribute("src",url)
 }
 videoLabels[player[i].getAttribute("id")]=player[i].getAttribute("src"); // id to label dictionary
 }
 }

 // Listen for messages from the player
 if (window.addEventListener){
 window.addEventListener('message', onMessageReceived, false);
 }
 else {
 window.attachEvent('onmessage', onMessageReceived, false);
 }
 }
 catch(err){
 }
}

function updateUrl(url,param,value){
 try{
 return url+((/\?/.test(url)) ? "&" : "?")+param+"="+value; 
 }
 catch(err){
 }
}

// Handle messages received from the player
function onMessageReceived(e) {
 try{
 var data = e.data;
 
 if(typeof data === "string"){
 data = JSON.parse(data);
 }
 
 switch (data.event) {
 case 'ready':
 onReady(data);
 break;
 case 'play':
 onPlay(data);
 break;
 case 'pause':
 onPause(data);
 break;
 case 'timeupdate':
 onPlayProgress(data);
 break;
 }
 }
 catch(err){
 }
}

// Helper function for sending a message to the player
function post(action, value) {
 try{
 var data = {
 method: action
 };

 if (value) {
 data.value = value;
 }

 var message = JSON.stringify(data);
 var player = document.getElementsByTagName("iframe");
 var url;
 var prot;


 for (i = 0; i < player.length; ++i) {
 url=player[i].getAttribute("src");

 if(/player\.vimeo\.com\/video/.test(url)){
 // Check if protocol exists
 prot = player[i].getAttribute('src').split('?')[0].split('//')[0];

 // If protocol doesn't exist, then need to append to "url"
 if (!prot){
 url="https:" + player[i].getAttribute("src").split('?')[0];
 }
 player[i].contentWindow.postMessage(data, url);
 }
 }
 }
 catch(err){
 }
}

function getLabel(id){
 try{
 return videoLabels[id].split('?')[0].split('/').pop();
 }
 catch(err){
 }
}

//our function that will use the Vimeo oEmbed API to retrieve additional information about the video
function getVimeoInfo(url, callback) {
 
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 
 document.getElementsByTagName('body')[0].appendChild(script);
}

//the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes
function vimeoCallback(e){
 //console.log(e);
 _playerTitle[e['video_id']] = e['title'];
 _playerAuthor[e['video_id']] = e['author_name']
 _playerAuthorURL[e['video_id']] = e['author_url']
 _playerUploadDate[e['video_id']] = e['upload_date']
}

function onReady(data) {
 try{
 //execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"
 getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/"+getLabel(data.player_id)+"&callback=vimeoCallback", vimeoCallback);

 post('addEventListener', 'playProgress');
 }
 catch(err){
 }
}




// Track progress: 25%, 50%, 75%, 100%
function onPlayProgress(data) {
 try{
 var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 20) / 20).toFixed(2); if (!lastP[data.player_id] || t > lastP[data.player_id]) {
 lastP[data.player_id]=t;
 if (parseFloat(t) != 0 && (t==0.15 || t==0.5 || t===0.9)){
 dataLayer.push({
 event: "video",
 video_percentage: t*100+ "% Complete",
 video_name: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
 vimeo_playerID: getLabel(data.player_id),
 vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
 vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
 nonInteractive: true
 })
 }
 }
 }
 catch(err){
 }
}
</script>

設定過程

添加Vimeo影片監聽代碼

變數

在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「自訂 JavaScript」，命名為 “Custom Javascript – Is Vimeo Present”, 然後做如下設定：

這個變數是用於判斷Vimeo是否已經加載好。

使用到的代碼：

//this function checks for the presence of an embedded Vimeo video
//if one or more videos are present, return true, otherwise return false

function () {
  for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
    if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
      return true;
    }
  }
  return false;
}

觸發器

在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「網頁瀏覽 – 視窗已載入」，命名為“Pageview – Vimeo Player Is Present”，然後做如下設定：

代碼

在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“cHTML – Vimeo Listener”，然後做如下設定：

這裡的程式就是實現方式裡的JavaScript。

設定事件

變數

從JavaScript裡，可以知道變數是video_name、video_percentage。

在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “Video Name”, 然後做如下設定：

同理設定Video Percentage。

觸發器

從JavaScript裡，可以知道event是video。

在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Custom – Video Interaction”，然後做如下設定：

代碼

最後就是設定代碼。

在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“Event—Video Tracking”，做如下設定：

預覽

接下來就是預覽調試，你可以用以下任意方法：

• 利用Google Analytics 4中的DebugView去測試
• 新版Google Tag Manager 預覽模式指南——Tag Assistant

最後還需要將事件參數在GA4的自訂定義裡註冊。