Important: please note that Google Tag Manager and Google Analytics have the potential to pull an entire page URL, including query strings. Should the URL or query string contain Personally Identifiable Information, the resulting data may not be in compliance with GDPR regulations.

So you want to use Google Tag Manager on your web page to collect information about how viewers are interacting with your videos? You've come to the right place! 

We've developed some code that will make use of our Progress Events feature, which pushes information through Google Tag Manager at viewing milestones (% of video viewed) during video playback. In this article, you will see some code and variables that will need to be copied into various sections of Google Tag Manager to make the magic happen.

Create your variables in Google Tag Manager

To get started, head to the Container menu in Google Tag Manager and click Variables.

Scroll down and hit New under User-Defined Variables to create 5 new variables, defined below.

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)

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;
   }

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

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

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

From the Container menu in Google Tag Manager, click Triggers.

Vidyard Event Trigger

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

Vidyard Present Trigger

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

Under the Container menu in Google Tag Manager, click Tags.

Vidyard Event Tag

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

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

Vidyard Listener Tag

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
  • HTML: (click here for a copy of the YouTube listener code)
• Tag firing rule:
  • Tag triggered by “Vidyard Present” trigger

...and to finish - here is the code that you need to paste into the Custom HTML Tag. The default is to push at 1%, 25%, 50%, 75% and 95%, but feel free to adjust these options on the final lines of either option. 

<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
<script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>
<script type='text/javascript'>
  VidyardProgressEvents(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>

<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>