Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Track video views with Google Tag Manager

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.

Variables option in the left side Container menu within Google Tags Manager.
 

Scroll down and hit New under User-Defined Variables to create 5 new variables, defined below.
New button is directly under the User-Defined Variables sub-heading.

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)

The variable has been named WebProperty ID, the Type is Constant, and the Configuration contains the Google Analytics 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;
   }


The above Javascript snippet is contained under Configure Variable in the Custom Javascript field.

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 Type is Data Layer Variable. Under the Configuration section the first field is eventCategory, the second field is 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

Variable Type is Data Layer Variable. Under the Configuration section the first field is eventAction, the second field is 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

Variable Type is Data Layer Variable. Under the Configuration section the first field is eventLabel, the second field is Version 2.

Create Your Triggers

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

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

Custom Event, Event name is '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

Event name is gtm.com. Fire On conditions are: when Vidyard is Present = True

Create Your Tags

Under the Container menu in Google Tag Manager, click Tags.
New button is under 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 product:
    • Google Analytics
  • Tag type:
    • Universal Analytics

  • Tag configuration:

    • Fields to Set: Field Name = “useBeacon”, Field Value = “true”

    • Label:

    • {{dataLayer Label}}
    • Action:

    • {{dataLayer Action}}
    • Category:

    • {{dataLayer Category}}
    • Track Type: Event

    • Tracking ID:

    • {{WebProperty ID}}
    • Tag type: Universal Analytics

  • Tag firing rule:
    • Tag triggered by “Vidyard Event” trigger

Vidyard Event product.

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

Here's the code that you need to paste into this Custom HTML Tag. The default is to push at 1%, 25%, 50%, 75% and 95%, but feel free to adjust these options on the last line of the 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>

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

  • Was this article helpful?