eROI is now Thesis      →

Tracking Video with Google Analytics Part 2 of 3: Vimeo Edition

This is the second installment of tracking video with Google Analytics.

In Part 1 we covered YouTube and this edition we will be covering Vimeo. Stay tuned for HTML5.

NOTE: Since this article was published, Google has implemented major updates to their Tag Manager platform that may alter both the nomenclature and implementation steps seen below.

Our crack team of experts is working diligently to update this post ASAP. Until then, enjoy, but be on alert!

The setup of all these solutions requires javascript and dependent on whether you are using Google Tag Manager you may require a developer to install the script directly onto your site. This article will cover how to implement Vimeo video tracking via GTM but it can be done without it.

Using any third-party party video hosting service causes issues for tracking engagement on your site. All of these services are allowing you to <i-frame> content which is essentially providing a window into their service via your site. That means that any analytics tool you are using is not even going to know that it is there. Not to mention most out of the box analytics solutions do next to nothing with regards to actions taking place on your site. Anything beyond pageviews and Time-On-Site requires custom coding.

Let’s jump right into tracking Vimeo on our site.

Vimeo has become known as the high quality video content service. This basically means that there are less videos about cats and people getting hit in the crotch. The audience is smaller and more engaged with the content and it has more of a cache for businesses seeking to publish content. It also has the ability to password protect and I think has a better UI.

I’m going to be honest and let you know that I borrowed this script from Sander Heilbron and have modified the script slightly for our purposes. Having clean reporting is really important to us and with 3 different video sources and three different scripts we wanted to have the most cohesive way of tracking events.
It’s important to note that each one of these strategies employs the solutions respective API and we are utilizing them to push events to Google Analytics.

What this means for Vimeo is that each video URL will need to have “?api=1”
appended to it. Our developers have created a backend edition to our CMS installations we do that adds this to every Vimeo video posted but you can just as easily just handcode it to each URL.

There are 8  pieces that will need to be created in Google Tag Manager to enable Vimeo tracking:

  1. Custom Javascript Variable that checks for Vimeo videos
  2. Trigger for when to fire the HMTL Tag
  3. Custom HTML Tag that loads the script that does the bulk of the work
  4. Custom dataLayer Variable to capture the “category”
  5. Custom dataLayer Variable to capture the “action”
  6. Custom dataLayer Variable to capture the “label”
  7. Trigger for when there is a Vimeo Event pushed into the dataLayer
  8. Google Analytics Event Tag

Below is the step by step directions and an explanation of what each is doing(if you care). If you just want to be able to track Vimeo videos and you have the new version Google Tag Manager Container already set up we have uploaded all 8 pieces to be downloaded to your container here:

Refer to Google Tag Manager Help to learn how to import an entire container.

If you are interested in the nuts and bolts, read on.

Custom JavaScript Variable:

This Variable will be used to trigger our Custom HTML Tag below. This Variable returns “true” when a Vimeo video is present. This is a smart way of doing things, since we always want to load only the minimal amount of information on a page as possible. Only loading the script when a Vimeo video is present (even though Google Tag Manager is a light load) will decrease page load time on pages without videos. Google has publicly said that pageload time and UX are important ranking factors for SEO.

  1. Create a new Custom JavaScript Variable and copy and paste the code into the editor. (Remember, it is NORMAL to have an unnamed function in Google Tag Manager so resist the urge to name it!)
  2. Give the Variable a name. We use “Is Vimeo Video Present” since we will be using it as a trigger for our Custom HTML Tag we will be creating next.

Vimeo Custom Javascript Variable

Trigger to fire a Custom HTML Tag:

This trigger looks at the “Is Vimeo Video Present” variable in the dataLayer and will fire our custom HTML when “Is Vimeo Video Present” is equal to “true” is pushed into it.

  1. Create a “Page View” Trigger
  2. Add a filter where “Is Vimeo Video Present”is equal to “true”
  3. Name it “Vimeo Video Loaded”

Vimeo Custom HTML Script Trigger

Custom HTML Tag:

This is the magic! This script is doing a LOT! Listening for changes in the state of the player(Play, Pause, and % viewed) while pushing data into the dataLayer, and allowing us to push events into Google Analytics to visualize our visitors’ engagement with our Vimeo videos.

  1. Create a Custom HTML Tag and copy and paste the entire code into the editor.
  2. Create a Pageview trigger for “some pages.” This will open a section to add a “Filter” where we will use the Custom JavaScript Variable we just created.
  3. From the left dropdown select “Is Vimeo Video Present” “equals” “true”
  4. Give your Trigger a name. We chose “Vimeo Video Loaded”
  5. Select “DOM Ready” in the dropdown for Trigger type. This ensures all elements are loaded.
  6. Save your Trigger
  7. Save your Tag

Vimeo Custom HTML Script

Custom dataLayer Variable for Vimeo Category, Action, and Label:

Creating these variables essentially makes a bucket in the dataLayer for our Custom Script we just installed to push data into. We are going to be creating a Category, Action, and a Label here since these three pieces of information will be dynamic and dependent on the video being played. We will eventually be sending this information to Google Analytics as a Custom Event so remember there are 3 strings that we can send to as an event:
Category: This will be sent as “Vimeo”  with each event
Action: This is dynamic and will include Play, Pause, and % completed
Label: This is dynamic and will include information on the title and ID of the video being played.
Directions Vimeo Category:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “Vimeo Category”
  3. Give it a Data Layer Variable Name of “eventcategory”
  4. Save the Variable

Directions Vimeo Action
Directions Vimeo Action:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “Vimeo Action”
  3. Give it a Data Layer Variable Name of “eventAction”
  4. Save the Variable

Vimeo Custom Datalayer Variable Action
Directions Vimeo Label:

  1. Create a Data Layer Variable
  2. Give it a Variable Name of “Vimeo Label”
  3. Give it a Data Layer Variable Name of “eventlabel”
  4. Save the Variable

Vimeo Custom Datalayer Variable Label

Trigger to fire a Custom Event when a Vimeo video is interacted with:

This trigger looks at the “event” variable in the dataLayer  and will fire our event when “vimeo” is pushed into it. Each Custom Event needs a way to fire so this trigger will do that.

  1. Create a “Custom Event” Trigger
  2. Add a filter where Event name to match is “Vimeo”
  3. Name it “Vimeo Action”

Vimeo Custom Datalayer Variable Trigger

New tag to fire a Custom Event:

This is the final step. We are going to combine all of our previous work into this tag which will send our Custom Event to Google Analytics each time a Vimeo video is interacted with.

  1. Create a new Tag
  2. Choose Google Analytics
  3. Choose Universal Analytics. Hopefully you have upgraded! If you haven’t, choose Classic but you really should stop this tutorial and upgrade your installation on your site.
  4. Click on “What triggers this tag to fire” and click the “More” button. Choose our “Vimeo Action” that we created previously.
  5. Give your tag a name we used “Vimeo Event”
  6. Input your Tracking ID. Hopefully you have saved your UA in a Constant Variable but if you haven’t go ahead and input it manually “UA-XXXXXXXX-XX”
  7. Check the “Enable Display Advertising Features” box. Always do this
  8. Select “Event” as your track type
  9. Select {{Vimeo Category}} for Category. Remember we created this earlier
  10. Select {{Vimeo Action}} for Action. Remember we created this earlier.
  11. Select {{Vimeo Label}} for Label. Remember we created this earlier
  12. Leave Value blank unless you know how much each video is worth to you
  13. Keep Non-Interaction Hit False unless you don’t want to have a video play counted in your bounce rate.
  14. Save your tag!

Vimeo Custom Event Tag

Congratulations! You are now tracking Vimeo videos!