vimeo.ga.js
A Google Analytics plugin for measuring Vimeo Player Events
An easy-to-use solution to track Vimeo Player API events with the Event Tracking method of Google Analytics. The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager.
Click image to load video
Video: The Mountain
Description: Timelapse movie by TSO Photography.
Usage
Include the scripts in the body section of the HTML document, just before </body> tag. You’ll need to be running on a web server instead of opening the file directly in your browser. Flash and JS security restrictions will prevent the API from working when run locally.
Basic implementation
With some options
The data-progress and data-seek attributes enable tracking of progress and skip events. With data-bounce set to true event trackers will impact bounce rate of the page which embeds the video.
The iframe embeds a Vimeo video player and allows Vimeo to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.
Event Tracking
All player events are only tracked once. Restarting the video will not reset the event trackers.
Basic event trackers
- Category: Vimeo
- Action:
- Started video: when the video starts playing.
- Paused video: when the video is paused.
- Resumed video: when the video starts playing when it was paused.
- Completed video: when the video reaches 100% completion.
- Skipped video: when the video is skipped forward or backward.
- Label: URL of embedded video on Vimeo.
Example Classic Analytics
Example Universal Analytics
Example Google Tag Manager
Progress event trackers
- Category: Vimeo
- Action:
- 25% Progress: when the video reaches 25% of the total video time.
- 50% Progress: when the video reaches 50% of the total video time.
- 75% Progress: when the video reaches 75% of the total video time.
- Label: URL of embedded video on Vimeo.
Example Classic Analytics
Example Universal Analytics
Example Google Tag Manager
Bounce rate
The event trackers do not impact bounce rate of the page which embeds the video. The value of the opt_noninteraction parameter is set to true or 1. Include the data-bounce attribute and set its value to true to override this setting.
Google Tag Manager
If you'd like to integrate with Google Tag Manager, the dataLayer variable names are below.
| Macro Name | Data Layer Variable |
|---|---|
| Event Category | {{eventCategory}} |
| Event Action | {{eventAction}} |
| Event Label | {{eventLabel}} |
| Event Value | {{eventValue}} |
| Event Non-Interaction | {{eventNonInteraction}} |
Use the GTM event Vimeo to fire the Universal or Classic Google Analytics event tag.
The GTM container tag could also be used to include the plugin inside a page containing the video. Create a custom HTML tag and trigger this tag so that this script fires on gtm.dom, {{event}} equals gtm.dom, meaning it will fire once the DOM is ready.
Requirements
- jQuery 1.4.3 or higher
- Classic Google Analytics Tracking Code (asynchronous), Universal Analytics Tracking Code or Google Tag Manager container code
- The end user must be using a browser that supports the HTML5 postMessage feature. Most modern browsers support postMessage, though Internet Explorer 7 does not support it.