Vimeo Tracking Plugin for Google Analytics & Google Tag Manager

/

vimeo-plugin-ga-gtm
We’re rolling out a new plugin to complement our suite of Google Tag Manager recipes. The latest addition targets the popular video-sharing platform Vimeo. Just like our YouTube Tracking plugin, this library allows you to track Play, Pause, and Watch to End events, as well as track when the user has viewed past specific percentages of the video.

You can find our complete documentation (and a handy link to download a container file with the plugin) here. If you’ve never imported a container into Google Tag Manager before, check out this handy guide from my colleague Jim Gianoglio.

The default settings will track Play, Pause, and Watch to End events, as well as when the user views past the 10%, 25%, 50%, 75%, 90%, and 100% marks. Currently, it has been tested and shown to work in the following browsers:

  • IE10+
  • Edge 14
  • Chrome 57
  • Firefox 52
  • Opera 44
  • Safari 10
  • Yandex 14

To see our plugin in action, play the video below. Events will appear in the textbox beneath as they are tracked.


Here’s the HTML of the above:

For our demo, a Custom HTML tag is fired in GTM to append the event to the textarea on this page. It is triggered by vimeoTrack events.

If you’re curious about Vimeo’s Player API, check out their documentation. Vimeo’s Player API wasn’t a huge chore to work with, but be aware that video metadata is loaded asynchronously after the video itself. To run event bindings after video metadata is loaded, make use of the ‘Player.getVideoTitle()’ method. This method returns a ‘Promise’-like object, which you can then call ‘.then(callback)’ on and run the rest of your bindings with the required data in hand.

Ready to get started? Head over to our recipe page and download the plugin. If you’d like to contribute or discover a bug, submit a pull request on our GitHub repository.

Dan Wilkerson is a Software Engineer at LunaMetrics. Though really a Palmyra, PA expat, Dan insists he's a "non-native" 'Burgher. Approaching social early, then marketing, exigencies of native targeting soon entangled him in numbers. Dan is happy to have ended up living in Pittsburgh and (accidentally) as a self-taught and avid programmer.

  • Vaibhav Raut

    Awesome. This is like a GTM cheat code.

  • Sam

    Aah, yes! I’ve been waiting for this one 🙂

    One question, though… I’ve been using your YouTube plugin for a while. In that script, you save the video URL, opposed to the video name for Vimeo and Wistia.

    Is there a quick/easy way to save the video name in the YouTube script, or the URL in the Vimeo/Wistia script? That way I could standardise across the three video platforms (I have one event category ‘video’ so that interactions for all my videos are bundled under one category (since play, pause, watch to end and the percentages are all the same).

    Thanks!

    • Dan Wilkerson

      Hi Sam,

      Not really, regarding YouTube. The API does *sometimes* ship with a .getVideoData() method which returns a title, but Google has come and and said that it’s not officially supported and we found it wasn’t reliable in testing.

      You might be able to tweak it to pull off the URL, but currently it doesn’t support that behavior. It’d be great to have that added as a configuration option – we’d love a PR on our Github repository!

      Dan

  • jordan gonzales

    Very cool! I’m noticing some console errors on my site though –
    Uncaught TypeError: Cannot read property ‘playProgress’ of undefined
    at l (froogaloop2.min.js?_=1493707064858:1)

    I’m getting this error when the video finishes too. Any chance you’ve seen this before?

    • Dan Wilkerson

      Hi Jordan,

      I have not! Could you share the page in question so I could poke around?

      Dan

      • jordan gonzales

        Hey Dan,

        Thanks for the quick reply! Check out my sample page here: http://t416.wpoffsite.net/vimeo-test/.

        • Dan Wilkerson

          I’m stumped at the moment; I tried removing the vimeo.ga.js script and running the “compiled” video (after whatever else ran that adjusts the src and id) and the Vimeo script in a sandbox with no luck. I suspect it’s a conflict with something else manipulating the video, but I’m not sure. If I had more time, I’d try isolating the script and the video, then adding in other scripts until it breaks; wish I could be more help at the moment. If you do discover the fix, please chime in here!

          Dan

  • Tony

    So nice to have this plugin, I’ve been waiting for this one

    Just one question, l tried to change the Player Interaction Events according to the recipe to set ‘Play’,’Pause’ to false. But in Tag Manager preview mode, these 2 actions were still detected and send to GA. Any idea on this?

    • Dan Wilkerson

      That’s a bug – thanks for spotting this. Fix is in now, you can re-download the container.

      Dan

  • Chris

    Awesome plugin for GTM, Thanks Dan

    In the script we can get vimeo video name, but is that a way to get the video url as well? That way we could better identify the video apart from name

    • Dan Wilkerson

      Hi Chris,

      That should be possible, but you’ll have to modify it.

      Dan

  • Ashley Masen

    How does this watch for dynamically added videos? It seems that if there are no videos on page, the init function will die and the loadApi function will not be called? When we inject a lightbox on page after user interaction, we’re not seeing any video events. If we run the script after the video has been loaded in the lightbox, then everything works as anticipated.

    • Dan Wilkerson

      :thinking-face: It does try and catch those; basically I’m listening for any load events from iframes on the document, and then trying to bind to those. Short of that, it sounds like your solution does the trick.

      • Ashley Masen

        Hey Dan, This was actually quite helpful. It seemed the event listener for ‘load’ wasn’t firing because it was wrapped in the document ready else statement. In our implementation, the page was already loaded by the time this script fired. So I modified:
        if (document.readyState !== ‘loading’) {
        init();
        //added an event listener in the first ready state check.
        document.addEventListener(‘load’, init, true);
        } else {

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.