Mobile app version of vmapp.org
Login or Join
Rambettina238

: Event tracking for Vimeo in Google Tag Manager I've been banging my head against the wall trying to get this to work to no avail so thought I might see if anyone else has faced the same

@Rambettina238

Posted in: #EventTracking #GoogleAnalytics #GoogleTagManager

I've been banging my head against the wall trying to get this to work to no avail so thought I might see if anyone else has faced the same problem.

I've been trying to setup event tracking to track plays on an embedded Vimeo video using Google Tag Manager. I've been using the vimeo.ga.js plugin created by Sander Helibron but no matter what I do I can't get the Vimeo tag to fire.

Here's my html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title></title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/styles.css?v=1.0">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vimeo.ga.min.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-6705138-42', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>

<!--start dataLayer-->
<script>
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Started video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Paused video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Resumed video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Completed video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Skipped video forward or backward', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
</script>
<!--end dataLayer-->

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N2SQQP" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({
'gtm.start': new Date().getTime(),event:'gtm.js'
});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';j.
async=true;
j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','GTM-N2SQQP');
</script>
<!-- End Google Tag Manager -->

<iframe src="//player.vimeo.com/video/22439234?api=1&player_id=vimeo-player-1" id="vimeo-player-1" width="640" height="390" frameborder="0" data-progress="true" data-seek="true" data-bounce="true" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</body>
</html>


And here's a few screenshots from GTM:






And here's a preview modal that shows the tags totally not firing:


Any ideas would be hugely appreciated.

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Rambettina238

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Heady270

I do not use that plugin because it does not work with my other plugins. But I do track everything in GA and I deploy the video player through GTM.

This is the code I use in GTM codepen.io/JaminQuimby/pen/yNaOwz
I use the built in listeners in Vimeo, Ads, VAST Client to listen in on events I wish to capture.

Example expanding to full screen mode.

player.on("fullscreenchange", function() {
if (settings.debug) {console.info('player on fullscreenschage');}
if (player.isFullscreen()) {settings.state.screen = 'Enter ';} else {settings.state.screen = 'Exit ';}
gt.push({event: 'gtm_video',video: {category: 'Vimeo',action: settings.state.screen + 'Full Screen Mode',label: data.name,value: data.link}});
});


The Event


The Listener


Google Analytics

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme