Tags

, ,

You have some videos on your website, and that’s great. But now you want to know how they perform, and how they are used. Which videos are the most watched? Are the videos viewed to the end? And how do they contribute to reaching the conversion goals of my site?

So we have a video control, and we want that to be flexible. We want to be able to keep measuring the videos, whether the site uses Google Tag Manager (GTM) or Google Universal Analytics. So we have a HTML5 video, that fires three events:

  • Play
  • Pause
  • Ended

These are the really insightful metrics. You could choose to also measure video progress (like David Vallejo does), but that does not really contribute to insights on how the video perform with regard to the goals of your site.

So we start with an HTML5 video. We give that video a “data attribute” that contains the title of the video, and the three events: Play, Pause, Ended. Each event has the same handler, and that handler is responsible for sending the event to Google Tag Manager or directly to Google Analytics.

<video controls data-title="The Video Title" onpause="sendEvent('Pause', this)" onplay="sendEvent('Play', this)" onended="sendEvent('Ended', this)">
	<source src="somevideo.mp4" type="video/mp4">
</video>

The handler sendEvent first checks if the dataLayer is present. If so, then we assume that Google Tag Manager is used on the site, and we send the event to the dataLayer. If there is no dataLayer, then Google Analytics must be present. It is the responsibility of the website, not of the video control, to either implement GTM or GA. You can see here that the contents of the “data-title” is used as the eventLabel in Google Analytics.

function sendEvent(action, element)
{
	var videoTitle = $(element).data('title');

	if (dataLayer && videoTitle) {
		dataLayer.push({
			'event': 'video',
			'eventCategory': 'Video',
			'eventAction': action,
			'eventLabel': videoTitle
		});
	}
	else if (ga && videoTitle)
	{
		ga('send', 'event', 'Video', action, videoTitle);
	}
}

Now if you use Google Analytics directly, you’re done. But if you use Google Tag Manager, then you have to make sure that the events received in GTM are passed to GA. So we make a Google Analytics tag of the tracktype “Event”:

gtm-video-tag

This event uses three values from the dataLayer. We pass them in the function “sendEvent”. So we need three variables in GTM: eventCategory, eventAction and eventLabel. Add all these three to GTM like this:

gtm-video-variable

The keen observer would also have noticed that the tag also needs a trigger in order to be fired. For that we make a new Trigger, and add it to the GA Tag. The Trigger listens to the dataLayer, and fires when an event comes in with event:video (as in the function “sendEvent”):

gtm-video-trigger

So now we have al we need:

  • A video control that passes events to GTM
  • A tag in GTM that passes events through to Google Analytics
  • Three variables in GTM that are used to read events from the dataLayer
  • A trigger in GTM that makes sure the new tag is fired

Happy coding!

Advertisements