Tag Management

Vimeo Tracking with Google Tag Manager

Tracking how users are interacting with your embedded Vimeo videos is now easier than ever thanks to Google Tag Manager (GTM). After reading my colleague Nicky Yuen’s post about tracking user interaction with embedded YouTube videos, I felt inspired to write a similar post about Vimeo videos. So without further ado, here is the step by step guide to setting up Vimeo tracking using Google Tag Manager (GTM).

For a live Google Tag Manger experience online, sign up for our Virtual Analytics Summit, Analytics Rising.

Step 1 – Create your variables

Google Analytics Tracking ID

This variable will hold the Google Analytics tracking ID. This is how Google
Tag Manager will know which property it should to send information to.

  • Variable Name
    • UA – Property ID
  • Variable Type
    • Constant
  • Variable Config
    • Value: UA-XXXXXX-X (replace with your property tracking ID)

Vimeo Video Present

This variable will track whether or not a Vimeo video is embedded on the page. It will return TRUE if a video is embedded on the page, and FALSE if there is no video embedded. This is important because we do not want to to execute our script library and potentially delay the page load time unless we are sure that it is needed.

  • Variable Name
    • cj – Vimeo Video Present
  • Variable Type
    • Custom Javascript
  • Variable Config
    • Custom Javascript:
//this function checks for the presence of an embedded Vimeo video
//if one or more videos are present, return true, otherwise return false

function () {
  for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
    if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
      return true;
    }
  }
  return false;
}

Data Layer Category

We need to define a variable which will hold the event category that our tracking script will push into the dataLayer.

Data Layer Action

We need to define a variable which will hold the event action that our tracking script will push into the dataLayer.

Data Layer Label

Now, we need to define a variable which will hold the eventthat our tracking script will push into the dataLayer.

Step 2 – Create Your Triggers

Vimeo Event Trigger

Vimeo Present Trigger

This trigger will fire when the page is fully loaded (gtm.dom) and when our previously created variable detects an embedded Vimeo video and returns a value of “true”.

Step 3 – Configure Tag

Google Analytics Event Tag

This will be the tag that sends all of the wonderful information we are capturing with our listener script into our Google Analytics account.

Vimeo Listener Tag

This tag does all of the behind-the-scenes work to push valuable information about the video to the dataLayer. We will only want to fire this tag when there is a Vimeo video actually embedded on the page, which is why we created a special trigger for it in the previous step.

Step 4 (optional): Bonus Information About the Video

The Vimeo tracking code not only lets us listen in to play/pause/etc events, it also exposes some additional data points about the video which can be passed through to Google Analytics as custom dimensions enabling some more advanced reporting. The additional data points are as follows:

To capture these data points, we’ll need to create some variables to pull the information from the data layer, and also modify our Google Analytics event tag to pass these data points through as custom dimensions.

The variables

Since the above extra data points are stored in the data layer, we will need to create some “Data Layer Variables”. Here are the “keys” that can be used to capture this information:

The Setup (you’ll need to create one for each “key” listed
above)

The Modified Google Analytics Tag

We will take the existing Google Analytics tag that we configured in Step 3, and simply pass through some additional information as custom dimensions. For this example, I will pass through all of the additional data points in order to show how that would be achieved.

Make sure that these custom dimensions are created within your Google Analytics Administrator settings before you start sending data into them, otherwise the data will not be captured. Google Analytics does not automatically create custom dimensions.

The Code Snippet – Google Docs

Click here to get the custom Javascript markup required for Vimeo video tracking!

The Code Snippet – Pastebin

Click here to get the custom Javascript markup required for Vimeo video tracking!

CP Marketing

Share
Published by
CP Marketing

Recent Posts

Optimizing user experiences with Digital Experience Analytics (DXA) platforms

As consumers become increasingly digitally savvy, and more and more brand touchpoints take place online,…

2 weeks ago

Enabling Value-Based Bidding with Google Tightlock

Marketers are on a constant journey to optimize the efficiency of paid search advertising. In…

4 weeks ago

Resolving “Unassigned” Traffic in GA4

Unassigned traffic in Google Analytics 4 (GA4) can be frustrating for data analysts to deal…

1 month ago

This website uses cookies.