Vimeo video tracking with Google Tag Manager
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<script> | |
var vimeoTag = document.getElementsByTagName('iframe'); | |
for(i=0; i<vimeoTag.length; i++){ | |
var newSrc = vimeoTag[i].src + '?api=1&player_id=player_' + i; | |
vimeoTag[i].id = 'player_' + i; | |
vimeoTag[i].src = newSrc; | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
var player = document.getElementsByTagName('iframe'); | |
// Listen for messages from the player | |
if (window.addEventListener){ | |
window.addEventListener('message', onMessageReceived, false); | |
} | |
else { | |
window.attachEvent('onmessage', onMessageReceived, false); | |
} | |
// Handle messages received from the player | |
function onMessageReceived(e) { | |
var data = JSON.parse(e.data); | |
switch (data.event) { | |
case 'ready': | |
onReady(data.player_id); | |
break; | |
case 'play': | |
onPlay(data.player_id); | |
break; | |
case 'pause': | |
onPause(data.player_id); | |
break; | |
case 'finish': | |
onFinish(data.player_id); | |
break; | |
} | |
} | |
// Helper function for sending a message to the player | |
function post(action, value, playerid) { | |
var data = { | |
method: action | |
}; | |
if (value) { | |
data.value = value; | |
} | |
var message = JSON.stringify(data); | |
var playerVaria = document.getElementById(playerid); | |
var url = playerVaria.src.split('?')[0]; | |
var videoNumber = playerid.split("_")[1]; | |
player[videoNumber].contentWindow.postMessage(data, url); | |
} | |
function onReady(player_id) { | |
// console.log(player_id + ' ready'); | |
post('addEventListener', 'pause', player_id); | |
post('addEventListener', 'finish', player_id); | |
post('addEventListener', 'play', player_id); | |
} | |
function onPause(player_id) { | |
console.log('paused '+ player_id); | |
dataLayer.push({'event': 'gtm.click', 'video_event': 'vimeo video', 'data_action':'paused', 'data_label':player_id}); | |
} | |
function onFinish(player_id) { | |
//console.log('finished '+ player_id); | |
dataLayer.push({'event': 'gtm.click', 'video_event': 'vimeo video', 'data_action':'finished', 'data_label':player_id}); | |
} | |
function onPlay(player_id) { | |
//console.log('played '+ player_id); | |
dataLayer.push({'event': 'gtm.click', 'video_event': 'vimeo video', 'data_action':'played', 'data_label':player_id}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Line 55:
bug: player[videoNumber].contentWindow.postMessage(data, url);
fix: player[videoNumber].contentWindow.postMessage(message, url);
Thanks for this code !