Track Vimeo Click Events for Google Universal Analytics in Tag Manager Using vimeo.ga.js

vickeryhill04.20153rd Party Integrations, Analytics

When you’re planning for and investing the time, energy and financial resources to create beautiful video assets for your business you should also set usage goals to help validate your return on that video investment.

In this article we’ll review and be using vimeo.ga.js which was developed by Sander Heilbron to track Vimeo Player API events in Google Analytics. From Sander’s documentation we’ll elaborate the step by step process of setting up your variables (previously called macros), rules and tags to support Sander’s great script for Google Tag Manager and Universal Analytics.

Our Example

Mount Snow, a 4 season resort in West Dover & Wilmington Vermont, wanted to know how many of their web visitors to their Family Camp page were watching their promo video.

Start by Setting a Goal or Two

It’s difficult-to-near-impossible to put a monetary value towards video views as it pertains to your bottom line, but you can set user goals to strive for. You can also track the length of videos watched to understand if it could have been shorter or if there was a point where the user was bored or unimpressed. For instance this could be a goal:

5,000 video views
25% of users to complete at least 75% the video (1,000 views).
- Why 75%? Many viewers will exit the video at your credits or just before it ends. This will allow you to track those who invested enough time watching your video to hear most of your message.

Now we’re ready for implementation.

The Code You’ll Need on Your Page

The Vimeo iFrame

A couple of important notes about the iframe code above:

For the src you’ll need to replace the XXX’s above with your Vimeo video ID.
The player_id variable in the scr query string must match the iframe id in order for the event to track. This also allows you to track multiple Vimeo videos with matching and unique IDs.
data-progress=”true” is required to track the % viewed progress events.
data-seek=”true” is required to track skipping or rewinding user events
data-bounce=”false” is set if you want the video play within the iframe to affect your bounce rates. By default the vimeo.ga.js script will set this value to false, and in most instances you will likely want to leave the default settings. If you want to set to true, update the iframe data-bounce value.
webkitAllowFullScreen, mozallowfullscreen, and allowFullScreen allow the video to be viewed full screen across multiple web browsers (Safari, Fire Fox, Chrome, Newer versions of IE, etc.).

Load jQuery and Vimeo.ga.min.js on you page.

Create Variables (Previously Macros) in Google Tag Manager to Track Events

At this point we transition into GTM and set up dataLayer variables for the event data we will be tracking.

Vimeo Tracking Variable for Google Tag Manager

The screen shot above is only the ‘Event Category’ macro/variable. You’ll need to create one for each of the items below.

Macro Name ~ Data Layer Variable

Event Category ~ {{eventCategory}}
Event Action ~ {{eventAction}}
Event Label ~ {{eventLabel}}
Event Value ~ {{eventValue}}
Event Non-Interaction ~ {{eventNonInteraction}}

Create a Trigger Rule for Vimeo Events to Fire

Google Tag Manager Trigger Rule for vimeo.ga.js Event Tracking

Note that we are requiring the Event Category, Action, and Label to have a value which is neither empty, ‘undefined’, nor ‘not set’.

Create Tags to Fire with the Rule You Have Created

Set up Pageview Tracker Tag
You’ll probably already have this set up, but is required in order for your custom Vimeo events to be tracked.

Vimeo Pageview Tag

Set up Vimeo Events Tag

Use the dataLayer Variables you defined previously for each event parameter highlighted below.

Google Tag Manager Tag for vimeo.ga.js Event Tracking

When users interact with the video, this tag will be validated based on paired dataLayer variables defined in GTM and the dataLayer.push events fired from Sander’s vimeo.ga.js script.

Now View Vimeo Event Activity in Google Analytics

Set up Goals in Google Analytics for Total Video Views and Completed Views

Sit Back Watch the Conversions in Real Time

Note that a user session that fires a goal for 75% play will also fire the initial video play goal. Make sure to annotate your analytics and consider this when analyzing your goal conversion rates.