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

//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;
}

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

Copyright 2016, Cardinal Path, Inc.

Original author: Bill Tripple <[email protected]>
Revised by: Bogdan Bistriceanu <[email protected]>
Updated by: Julius Fedorovicius <[email protected]> and Richard Outram <[email protected]>

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>