What is Google Tag Manager?

Google Tag Manager (or GTM) is a tool that allows web tracking codes and tags to be controlled from a single dashboard. With Tag Manager, you may create containers than include codes or tags from many different sources, and where these code can exchange data between each other (through the tag managers data layer).

Together this can make it easier for web editors and marketers to manage which tags are used in which places—and doing so without having to involve web developers. Google Tag Manager is free to use, and can be set up from Google Tag Manager.

How can Google Tag Manager be used with TwentyThree?

TwentyThree can be connected directly to a number of different marketing tools such as Google Analytics, Adobe Analytics, Hubspot and many more.

In addition to this, TwentyThree can also be connected to Google Tag Manager. When such a connection is made, anything within a GTM container can be included automatically in players or on web sites. In addition, information about videos such as title, description, type, playback state and playthrough progress can be read through the data layer.

The two common reasons for enabling Google Tag Manager with TwentyThree are:

• Automatic inclusion of tracking codes on TwentyThree-hosted web pages.
• Customized event tracking from within the video player.

Site, player or both?

When Google Tag Manager is activated on TwentyThree, the tag container can be included either in video players; on web pages such as your video hub or landing pages; or in both places.

Include in players: When a container is included in players, all tags will be included with all player loads. This means that you can include tracking, tags or codes across the web whenever videos are embedded. The data layer will include all events and variables from the video being played.

Include on site: When a container is included in TwentyThree-hosted web pages, it will be present on your video website or video hub, which will include video pages, live pages, landing pages and more. This means that tags will be present in all of these cases. If any video players are included on tracked pages, the data layer will include all events and variables from these players.

Include in both places (not recommended): It is possible to activate Google Tag Manager for both and player and on pages. This can be powerful if controlled correctly, but such double-inclusion can very easily result in double-tracking when both the page and video embeds in the page result in tracking events. We recommend never combining the two options—but if done GTM triggers need to be set up in order to ensure correct results (refer to dataLayer.video.trackingContext below).

Activating Google Tag Manager on TwentyThree

Google Tag Manager is activated within the Connect section under Power Mode in your account.

Click the Google Tag Manager icon, and paste the ID of the correct container into the form.

The connection can be enabled for the player, or for the site. Please see the description and warning about this above. In addition, you can control certain parts how percentiles are reported to the GTM data layer.

You can download example configurations for import into Google Tag Manager. The setup should be treated as examples—before deploying, be sure to review everything including tag code.

• Download example for use with Connect

Data layer: Variables

When included, the Google Tag Manager data layer is populated with information about the video and how it's being played: 

• When included in the video player, information about the active video is reported. 
• When included in a page with one or more video players, information about all TwentyThree-hosted videos is reported.

These core variables are available:

dataLayer.video;  // The first or only video in the page
dataLayer.videos;  // An array of all videos in the page

Every video object contains specific information about the video in question:

{
  id: <id of the video>,
  title: <title of the video>,
  content: <description of the video>,
  category: <category title of the video>,
  tags: <array of tags for the video>,
  type: <type of the video, may be 'ondemand' or 'live'>,
  domain: <title of the video>,
  link: <link to a video page>,
  player_id: <id of the video player>,
  quality: <current playback quality, for example standard, hd or fullhd>,
  duration: <duration in seconds of the video>,
  currentTime: <current playhead time of the video in seconds>,
  percentile: <the percentile of the current playhead, for example 0, 25, 50, 75 or 100>,
  playing: <boolean indicating whether the video is playing or not>, 
  currentVideoEngagement:<integer indicating number of seconds spent watching the current video>,
  totalEngagement:<integer indicating number of seconds spent watching video in total>,
  trackingContext: <info about whether the video is tracked directly from the player ('player') or from a web page ('web')>
}

Data layer: Events

The dataLayer will emit a number of event during the course of interacting with the video player:

• video:change: The video being played has changed.
• video:metadatachange: Metadata for a video has changed.
• video:qualitychange: Playback quality (video.quality) has changed.
• video:timeupdate: Playhead time (video.currentTime) has been updated.
• video:percentileupdate: Playback percentile (video.percentile) has been updated.
• video:complete: Video playback has completed.
• video:play: Video started playing. This event may fire multiple times during playback of a single video, each time indicating that playback has started.
• video:pause: Video playback was paused.
• video:complete: Video playback has completed.
• video:videoengagementupdate: The engagement on the current video (video.currentVideoEngagement) was updated.
• video:totalengagementupdate: The total time spent watching video (video.totalEngagement) was updated.

All the events above are pushed to the data layer along with the corresponding video object.

In addition data submitted through a collector:

• video:collectordata: Information was submitted to a collector.

This will include the specific information submitted:

dataLayer.push({
  event:'video:collectordata', 
  name:'Steffen Christensen', 
  email:'steffen@twentythree.net', 
  phone:'+4525327058', 
  company:'TwentyThree'
});

Google Tag Manager outside of TwentyThree

TwentyThree video players can also be tracked by including a tag directly in Google Tag Manager:

<script>
  var twentythreeDomain = 'youraccount.videomarketingplatform.co';
</script>
<script src="//youraccount.videomarketingplatform.co/resources/um/integrations/google-tag-manager/datalayer.js"></script>

In this case, the GTM data layer will include video information as specified above, and you can script the use of this information with other services.

The tag can be configured in a number of ways. For example with granularity of percentiles; with a custom data layer object; and with a custom regular expression used to identify video players in the page:

<script>
  var twentythreeDomain = 'youraccount.videomarketingplatform.co';
  var twentyThreePercentileGranularity = 10;
  var twentyThreeEngagementGranularity = 10;
  var twentyThreeDataLayer = dataLayer;
  var twentyThreeLimitEvents = ['video:play', 'video:change'];
  var twentyThreeFireSpecialFirstEvents = true;
  var twentyThreeSourceMatch = /\/[^/]+\.ihtml\/player\.html/
  var twentyThreeCustomVideoFields = ['segment'];
</script>    
<script src="//youraccount.videomarketingplatform.co/resources/um/integrations/google-tag-manager/datalayer.js"></script>

If video players are loaded after the tracking script, call twentyThreeUpdateGTMPlayers() to trigger another search for players to track.

twentyThreePercentileGranularity and twentyThreeEngagementGranularity control the values for video.percentile, video.currentVideoEngagement, and video.totalEngagement—along with the corresponding frequency of video:percentileupdate/video:videoengagementupdate/video:totalengagementupdate events.

twentyThreeLimitEvents is used to limit the number of event types fed through the dataLayer. It takes an array of event names, and when set only the listed event types will be fired. If you want track custom video fields, this is done through twentyThreeCustomVideoFields.

In some cases you may want to react to the first event of a kind, but not to repeated ones. This can be simplified using the twentyThreeFireSpecialFirstEvents setting. When this is on, an additional event with the suffix :first is fired the first time any event occurs. For example, video:complete:first or video:pause:first.

You can download example configurations for import into Google Tag Manager. The setup should be treated as examples—before deploying, be sure to review everything including tag code.

• Download example for hosting outside of TwentyThree