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('script'), 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.
Please choose the appropriate option from the two below. These relate to the type of embed code being used on your website.
If using the Vidyard v3 player embed code:
<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>
If using the v4 responsive embed code:
<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>
That's a wrap! Don’t forget to thoroughly test your implementation in Preview mode before you go live with it.
If you have any suggestions to improve this tracking, please don’t hesitate to let us know: support@vidyard.com
A big thank you to our friends at Cardinal Path for the majority of this solution, which we adapted for use with our player.