3

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:

enter image description here enter image description here enter image description here enter image description here

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

Any ideas would be hugely appreciated.

| improve this question | |
3

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 http://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 Event

The Listener listner

Google Analytics GA

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.