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 {

        • Dan Wilkerson

          Oh man, didn’t even consider that. Makes total sense. I’ll update the codebase!

  • Astrid

    Thank you very much, again, for these highly valuable files!
    Is it supposed to work for videos read in lightbox? It doesn’t work for me, I’m trying to figure out if I did something wrong of if it’s just not supposed to. Thank you 🙂

    • Dan Wilkerson

      It should just work, but Ashley found a bug that causes it to not work when the doc is already loaded. Fix is up.

  • Kyle

    Seems like it’s working in preview mode (yes, I hit publish) but the events are not showing up in Google Analytics. Any guesses why this might be happening?

    • Taylor Percy

      did you figure this out yet? I’m having the same issue.

      • Kyle Eberst

        It actually started working on it’s own after 10-15 minutes. for some reason it just initially was not working.

  • Kyle Eberst

    Is “Play” the total number of times the play button was clicked, or the number of times a video was started? (i.e. if one person keeps hitting “pause” and “play” repeatedly, is that going to drastically increase my “play” count?)

    Since adding this code I have had almost as many pauses as plays, so knowing the answer to this would drastically change how we interpret the “play” count on our site. Thanks!

    • Kyle Eberst

      Just FYI, I decided to add a 1% tracker and it’s count is much, much lower than the play count. This leads me to believe the play tracking is every single time the play button is clicked, so not a good indicator of the # of views if your audience hits the pause button a lot.

      • Dan Wilkerson

        Hi Kyle,

        Yes, the Play event triggers every time the user “Plays” the video; if you want the number of times they started the video, use the Unique Events metric, which is deduplicated by Category/Action/Label intrasession, or add a blocking trigger that uses some logic to prevent additional play events from firing.

        Dan

        • Kyle Eberst

          Thanks! Unique events looks like it’s providing a pretty accurate count. Thanks again, this plug-in is really helpful!

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.