Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vimeo video tracking with Google Tag Manager
<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>
<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>
@Laurent001

This comment has been minimized.

Copy link

@Laurent001 Laurent001 commented Sep 19, 2019

Line 55:
bug: player[videoNumber].contentWindow.postMessage(data, url);
fix: player[videoNumber].contentWindow.postMessage(message, url);

Thanks for this code !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment