Last active
August 11, 2023 08:07
-
-
Save SearchStar/393b1e9fe00348b5670f to your computer and use it in GitHub Desktop.
Vimeo video tracking with Google Tag Manager
This file contains hidden or 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 hidden or 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 !