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
- Select the container to which you want to add the Vidyard tags
- From the side menu, select Variables
- Click on New
- 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
- From the side menu, select Triggers
- Click on New
- 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
Note: "Vidyard is Present" and "equals true" are case sensitive and must be written as indicated above
Create Your Tags
- From the side menu, select Tags
- Click on New
- 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”
- Non-Interaction Hit = "False"
- 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
Note: If you would like video views to not affect Bounce Rates found within Google Analytics, then you will need to set the Non-Interaction Hit field to true. If it is set to false, then an interaction with a video will suggest to Google Analytics that the viewer did not bounce, even if they only landed on the page and left the site after the video view.
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.
Preview the data in Google Analytics
It may take some time for the data to appear in Google Analytics.
- Select the correct Google Analytics account
- The GA account should correspond to the account ID that you indicated when creating the Web Property variable in GTM (UA-*****-1)
- From the side menu, select Behavior > Events > Pages
- Click on the Event Category, the Event Action, and the Event Label to see the milestone view data (25%, 50%, etc.)