Vimeo video tracking in Google Analytics using Tag Manager

Vimeo LogoThis post is for people who have a Vimeo video on their site and would like to know how many people are watching it. Wouldn’t it be great if you could have that information show up in your Google Analytics account? Read on dear friend, read on.

I’ve written this post because, although there are already solutions out there (and we’ll be using one of them in this article), the instructions leave a lot to be desired, so a better explanation of the steps is required.

The problem with embedded videos is that they are actually hosted on another site. I’m assuming here that you are embedding your Vimeo video with an iframe which is what I recommend. But that means that the play button is not technically on your web page, but on another site completely and you are just viewing the video through a “hole” in your site with the video “behind it” on the host site (in this case Vimeo.com). The viewer doesn’t know or care. They get to see the video, but it makes life harder for us when we want to track views.

Google Tag Manager

This tutorial will show you what to do in Tag Manager v.2 which is more straightforward than it’s predecessor, but still far from foolproof! For those of you wondering what Google Tag Manager is, it allows you to place a “container” (piece of code) onto your website once and then edit the contents remotely from the Google Tag Manager interface (http://www.google.ie/tagmanager/). It can hold all manner of things, like your Google Analytics code, AdWords remarketing code, event listeners etc. It’s a lot neater than placing separate code snippets on separate pages of your site. Also, if you don’t have access to the actual code of your site, you can add the code snippets you need without having to wait for the developer to make a change for you. It’s a marketers dream come true with one drawback. It’s written by coders who assume you will be familiar with the inner workings of tags and tag firing and is not very intuitive, although version 2 is much much better than the original.

Tracking on an external site like Vimeo

The good people at Vimeo realise that you want to track the video views on your own site and have developed an API (application program interface) which is programmer talk for they allow external programs to talk to the internal code on Vimeo. In short it allows a program we write to get information about our video view directly from Vimeo.com.

Uh-oh, I hear you say, does this mean I have to learn how to write my own program to talk to their program? No. Somebody has already done that for you!

Sander Heilbron saved me a lot of work!

Sander Heilbron is a Dutch developer who has written a lovely bit of javascript to interact with Vimeo’s site and get the information we need. This tutorial uses his code and adds some explanation for those of us with less coding ability. His code also supports using Universal Analytics and even the outdated Classic Analytics, but this tutorial will concentrate on using Universal Analytics through Tag Manager. You should view his documentation along with this tutorial on it at http://www.sanderheilbron.nl/vimeo.ga.js/

Steps to tracking Vimeo views in Analytics

1. Download Sander’s javascript code and upload it to your site.

The javascript is minified to load as fast as possible and you can get it here:

https://github.com/sanderheilbron/vimeo.ga.js/releases/download/0.5.1/vimeo.ga.min.js

There is no need to edit this code in any way. It works and doesn’t need any setting changed.

This code should be uploaded to your site. If you are using WordPress you can click on “Media” from the left hand menu of your dashboard, then click “Add New” at the top beside the title “Media Library”. This will bring you to a file upload page where you can either drop Sander’s javascript file you just downloaded to your desktop / downloads folder / wherever you downloaded it to, or click the “select file” button to browse your computer for it.

Once it has uploaded click edit and copy the file url from the right hand side of the screen as below:

select file url

This is important, because we have to “call the code” (add a pointer to it) within every page we have vimeo videos on.

2. Call the code on all pages a Vimeo video is on.

In the html of your page you need to add some code now between the <body> and </body> tags. In wordpress the easiest way to do this is to go to “Appearance” on your left hand dashboard menu and then select “Editor”. This allows you to edit code in your theme. In the list of templates on the right hand side find “Footer” and click on it. Then in the code look for the </body> tag.

Immediately before the </body> tag place the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="path/to/your/uploaded/file/vimeo.ga.min.js" type="text/javascript"></script>

The file url you copied earlier should be pasted into the second line if you followed the instructions for WordPress, otherwise, the path to wherever you uploaded the file should be used.

3. Edit your Vimeo embed code.

Your embed code on your webpage will look something like this:

<iframe src="//player.vimeo.com/video/12345678" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

The 12345678 is the identifying number of your video. If you don’t change it for your video number it won’t work!

You need to edit the source (src=””) to tell Vimeo that you want information from the API. It would also be nice to get some additional information like how much of a video a user watched. To do this we end up with code that looks like this below:

<iframe src="//player.vimeo.com/video/12345678?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>

The “?api=1” tells Vimeo that we want to access their API and talk to their coding from our site. This is the most important difference between the two bits of code. Only the one with “?api=1” in it will work.

Note for users of Avia Layout Builder

When I first tried this I was using Avia Layout Builder on a client’s site using the Enfold theme. It has a video content box that you just put the source of the video (src) into. This doesn’t work because it strips out the query string (the question mark and everything after it in the source url). The workaround for this was to not use the built in video element but use a simple text element instead and put the full embed code into that.

4. Add Variables in Google Tag Manager

So far, so good. We have the video embedded on our site and the code to make our tracking possible. Now we just need to make the event tracking happen. To do this we are going to need some custom variables to show different video states, a tag firing trigger that will fire the tag when our video is viewed or changes state and the tag itself which will send our information to Google Analytics.

First let’s make the custom variables to match the code we are using on the site in Google Tag Manager.

Go to your Tag Manager, click on variables on the left hand side. Under User-Defined Variables click on “New”. That brings us to this page:

gtm add data layer variable

Choose type “Data Layer Variable” and then click “Continue” which will bring us to the following screen:

Google Tag Manager Untitled Variable

Change the “Untitled Variable” title at the top to “eventCategory” and in section 2 “Configure Variable” enter “eventCategory” as below:

eventCategory in Tag ManagerSave the variable and then repeat for “eventAction”, “eventLabel” and “eventValue” making sure that you keep the caps as is here. You should end up with a list of new variables that looks like this:

user defined variables

 

 

5. Add a trigger to fire the tag we will make in the next step

Click “Triggers” on the left menu of your Tag Manager and then “new”. That brings us to this screen:

GTM Untitled Trigger

Change the “Untitled Trigger” to Vimeo so that you know what this trigger relates to. Then click “Custom Event” and “Continue”. Then fill in the rest of the screen so that it looks like the one below and “Save Trigger”:

Vimeo TriggerWhat this does is fire our tag every time there is an event on the site with a name of Vimeo.

 

6. Add a tag to Google Tag Manager

So far, so good. We have the video embedded on our site and the code to make our tracking possible. Now we just need to make the tracking happen.

Click on tags and then on “new”, where you will see this screen:-

New tag manager tag

Change “Untitled Tag” at the top to “Vimeo” so that you know what it is.

Under “Choose Product” select Google Analytics and then click “continue”. That opens up the screen to section 3 “Configure Tag” which should end up looking like this:

Configure tag - tag manager

The tracking ID required under “Configure Tag” is your Analytics tracking ID (UA-XXXXXXXX-1) which you can find in Google Analytics => Admin => Property column => Tracking info => Tracking Code.

Change the track type to “Event”.

Clicking on the lego bricks with a plus in them to the right of each campaign tracking parameter will bring up a list where you will find the parameters we entered earlier. Select and fill out as above.

Set “Non-Interaction Hit” to “True”

Click “Continue”.

This brings us to our “Fire On” screen below:

gtm fire on

Select “More” which will open up a pop-up where you can select your trigger named Vimeo that you made earlier. Save and then save tag.

You’re all set up in Tag Manager!

Publish your changes (Top right of Tag Manager) and you’re good to go. Now click on the little down arrow beside the “publish” button and select Preview and Debug (“Preview” button).

Open the page with your video on it in a new tab / window and play the video. You will see if your tag is firing in the box that shows up at the bottom of your page. It should fire multiple times as the video plays.

If you look in the “Data Layer” tab as the video plays you will see what information is being sent to Google Analytics on each fire. If you have set it up as I’ve suggested in this tutorial, you should see, event actions of:-

  • Started video
  • Played video: 25%
  • Played video: 50%
  • Played video: 75%
  • Completed video

Viewing your Vimeo viewing data in Google Analytics

You don’t have to set up anything else to view your new data in Google Analytics. It will automatically show up in your events. (Behavior => Events => Overview). It defaults to showing category, but you can click on Event action to show start, 25%, 50%, 75% and completed videos. You can check your event label to check which videos have been viewed too. There are more ways to view the data, but that’s another lesson.

There is one more thing you might want to do in Google Analytics with your new Data….

Setting up video views as a goal in Google Analytics

Think carefully about what you want to set as a goal for this one. You could set “Started video” as a goal, but what if they only watched for a second and then left. Likewise you could set “Completed video” as a goal, but find that nearly everybody only watched 75% so your goal hardly ever triggers. This bit is up to you.

I’m going to show you how to set up “Started video” as a goal in Analytics now and you can adapt it for what you want to measure yourself from there.

Set up a new Goal

Go to admin => view => goals, and then click on new goal which will give you the screenshot below:

GA new goal

Select “custom” for the Goal setup and click “next step”. That brings us to our Goal description section below:

ga goal description

Add whatever name you want for your goal and select “Event” as the type. Then click “Next step”.

We now arrive at the Goal details section below:

GA Goal Details

You will see that we have Category, Action, Label and Value, just like those variables we set up earlier in the tutorial and saw in the data layer when we tested our tags were firing properly. I’ve filled in Vimeo as the category, which is the same for all. In this case I’ve put in “Started video” into the action category. This could be any of the items in the bullet pointed list from earlier (You’re all set up in Tag Manager section).

I have left the label blank. If I wanted to just track one specific video on the site then I would use the label relating to that video. the label is the source of the video without any query string eg. https://player.vimeo.com/video/12345678

Create the goal and you’re done!

Postscript

I hope you found this useful. I created it because I found the instructions a little confusing myself when I went to implement this. So hopefully my half day’s work on getting it up and running will be condensed for you.

If you have any additions to make or suggestions on how to make this article better then please tell me in the comments.

Published by

Ian Wortley

Ian knows a thing or two about SEO... and Adwords... and UX... and a few more things besides that. If you're feeling social add him on the following social networks: | Linkedin | Twitter

  • Chloe Nguyen

    This really really helped me. Thanks, Ian, for breaking it down in English :)

    • Ian

      It’s a pleasure Chloe. Thank you for posting. It’s nice to know when something you write is helpful to someone else. :-)

  • Viola Rudenko

    Thanks so much for a very detailed and easy to use guide, Ian! This was really needed, as other articles with the instructions are too abrupt :)

    Do you know how to implement Sander’s js code into pages with popup (lightbox) videos?

    Our website has all videos as popups with the sample code as below:

    Watch Video

    Any ideas are much appreciated!

    • Ian

      Hi Viola, I haven’t tried it with popups. I would assume that all the code has to be included within the popup itself though.

  • Sonya Guey

    Thank for this tutorial, I do have a pb though, i followed the steps but at the end in the preview If I look in the “Data Layer” tab as the video plays I don’t see the event actions of:-Started video, Played video: 25%,Played video: 50%,Played video: 75% Completed video. Instead I see : (see image attached) .

    Could please you help me figure out what is the pb ?

    Thank You
    Sonya

    • Ian

      It looks to me like it isn’t working at all Sonya. Are you getting any stats through in analytics at all? I have seen this implementation not working before where there was a js conflict. Mainly though it’s a case of not working because of a typo. Double check everything. If it’s not working it has to be because the js is not performing as it should. It is the js that sets up the events you are missing. This is either because it is not loading at the right time or is not running at all.

      • Sonya Guey

        Hi thanks for your reply, I am getting regular stats through Google analytics (page views, bounce rate…) so far. As you said I double checked the vimeo.ga.min.js code i had uploaded to my website and copied the js. script at the same place as the GA and GTM scripts. And still I don’t see the eventCategory, eventAction, etc.. variables i created earlier…

  • Joke Dekker

    Hi Ian, I tried to follow your instructions but I am using visual composer in wordpress and it did not add my ?api=1…. to my url. Do you have any idea’s to work around that?

    • Ian

      Hi Joke,
      Are you using Yoast? If so do you have “redirect ugly urls” selected? In yoast it is under advanced -> permalinks. This can strip the query string. If it’s not yoast then it is likely to be another plugin you are using.

    • Ian

      Hi Joke,
      If you are adding an element as “text block”, try changing to adding it as “raw html”. I haven’t tried it because I don’t use visual composer, but basically you’re going to have to find another way of inputting the script that doesn’t strip the query string (?api=1etc.)

  • kim@dominoresearch.com

    Super job explaining! My only question is about editing the footer directly, without a child theme, the edits will disappear each time there an update, no?

    • Ian

      You’re right Kim, This is why it’s always a good idea to set up a child theme. Otherwise you need a list of edits stored that you have to redo every time there is an update.