This 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!
Steps to tracking Vimeo views in Analytics
There is no need to edit this code in any way. It works and doesn’t need any setting changed.
Once it has uploaded click edit and copy the file url from the right hand side of the screen as below:
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:
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:
Choose type “Data Layer Variable” and then click “Continue” which will bring us to the following screen:
Change the “Untitled Variable” title at the top to “eventCategory” and in section 2 “Configure Variable” enter “eventCategory” as below:
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:
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”:
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:-
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:
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”
This brings us to our “Fire On” screen below:
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:
Select “custom” for the Goal setup and click “next step”. That brings us to our Goal description section below:
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:
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!
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.