Track video views with Google Tag Manager

Google Tag Manager (GTM) allows you to quickly and easily update segments of code from third-party vendors (collectively known as "tags") on your websites and mobile apps.

With GTM, you no longer need to add tags directly to your projects. Instead, once the GTM code has been added to your project, you can configure tags and how they deploy on your websites from within Google Tag Manager.

This article demonstrates how to configure GTM so that, when a Vidyard player is present on a webpage, a script will be added to the page that utilizes Vidyard's Progress Events API to push milestone data (% of video viewed) to Google Analytics.

Create your variables in Google Tag Manager

1. Select the container to which you want to add the Vidyard tags
2. From the side menu, select Variables
3. Click on New
   
4. Create the following 5 new variables, defined below

Variable #1: Web Property ID

We will send data to the Google Analytics web property contained in this variable.

• Variable name:
  • WebProperty ID
• Variable type:
  • Constant
• Variable configuration:
  • Value = UA-******-Y (use your own web property ID from Google Analytics)

Variable #2: Vidyard is Present

This variable checks the content of the page for any embedded Vidyard Players. If found, “true” is returned. Otherwise, “false” is returned.

• Variable name:
  • Vidyard is Present
• Variable type:
  • Custom JavaScript
• Variable configuration:

// Return "true" if there is at least one Vidyard video on the page
function () {
   var patt = /play.vidyard.com/g;
   for (var e = document.getElementsByTagName('img'), x = e.length; x--;)
   if (patt.test(e[x].src)){
      return true;
   }
   return false;
   }

Variable #3: Data Layer Category

Define a macro that will hold the value of the event category name pushed from the data layer.

• Variable name:
  • dataLayer Category
• Variable type:
  • Data Layer Variable
• Variable configuration:
  • Data Layer Variable Name: eventCategory
  • Data Layer Version: Version 2

Variable #4: Data Layer Action

Define a macro that will hold the value of the event action name pushed from the data layer.

• Variable name:
  • dataLayer Action
• Variable type:
  • Data Layer Variable
• Variable configuration:
  • Data Layer Variable Name: eventAction
  • Data Layer Version: Version 2

Variable #5: Data Layer Label

Define a macro that will hold the value of the event label name pushed from the data layer.

• Variable name:
  • dataLayer Label
• Variable type:
  • Data Layer Variable
• Variable configuration:
  • Data Layer Variable Name: eventLabel
  • Data Layer Version: Version 2

Create Your Triggers

1. From the side menu, select Triggers
2. Click on New
   
   
3. Create the following 2 triggers, defined below

Trigger #1: Vidyard Event

Define a trigger that is executed when the dataLayer event name is “vidyard”.

• Trigger name:
  • Vidyard event
• Trigger event type:
  • Custom Event
• Trigger fires on:
  • Event name: vidyard

Trigger #2: Vidyard Present

Define a trigger that is executed when the value returned from the variable “Vidyard is present” is true, and when the event is “gtm.dom”.

• Trigger name:
  • Vidyard present
• Trigger event type:
  • Custom Event
• Trigger fires on:
  • Event name: gtm.dom
  • “Vidyard is Present” equals true

Create Your Tags

1. From the side menu, select Tags
2. Click on New
3. Create the following 2 Tags, defined below

Tag #1: Vidyard Event

This tag sends the event data, that is pushed from the dataLayer to the GA property.

• Tag name: Vidyard Event
• Tag type: Google Analytics - Universal Analytics
• Tag configuration:
  • Track Type: Event
  • Category: {{dataLayer Category}}
  • Action: {{dataLayer Action}}
  • Label: {{dataLayer Label}}
  • Fields to Set: Value = “true”
  • Google Analytics Settings: Create a new variable. Enter Tracking ID and name it {{Vidyard Settings}}. Variable type = Google Analytics Settings. Cookie Domain = auto.
• Triggering Rule:
  • Tag triggered by “Vidyard Event” trigger

Tag #2: Vidyard Listener

This tag detects if there are any embedded Vidyard videos on the page. If there are, then it listens for various actions coming from interactions with those videos, or when the video progresses.

• Tag name:
  • Vidyard Listener
• Tag product:
  • Custom HTML Tag
• Tag configuration:
  • Tag type: Custom HTML
  • Add listener script to the HTML editor (included below)
• Tag firing rule:
  • Tag triggered by “Vidyard Present” trigger

Paste the following listener script into the Custom HTML Tag. It is currently set to push a milestone event at 1%, 25%, 50%, 75% and 95%. However, you can adjust these percentages to your own values.

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', '{{WebProperty ID}}');
</script>
<script type="text/javascript">
window['onVidyardAPI'] = function (vidyardEmbed) {
vidyardEmbed.api.progressEvents(function (result) {
if (result.event == 1) {
dataLayer.push({
event: 'vidyard',
eventCategory: 'video',
eventAction: "Play",
eventLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name
});
} else {
dataLayer.push({
event: 'vidyard',
eventCategory: 'video',
eventAction: "Watched " + result.event + "%",
eventLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name
});
}
}, [1,25,50,75,95]);
}
</script>