Brightcove Google Tag Manager

I have worked with Brightcove in the past and really liked it as a video delivery service. Most of my experience was with their Smart Player, and I recently had the chance to work more with their new Brightcove Player that’s built off of VideoJS.

The new Brightcove player already has a Google Analytics plugin, and I wanted to transform this to be used with Google Tag Manager. I also wanted to make a couple adjustments to the progress event naming to align with the Smart Player event naming conventions. That way, Brightcove customers migrating from the Smart Player to the new Brightcove player will be able to efficiently analyze their data without adding multiple rows.

In this post, I will show you how to track Brightcove videos using the Brightcove Player with Google Tag Manager.

Note: This plugin does not currently support the iFrame implementation of the video player. I plan on adding support in the near future.

1. Add the plugin to your Brightcove Player

In order to get the plugin to work with the player, you will need to download the plugin and host it on your server. Go into your Brightcove account and click on Players. Select the player that you’re using to embed videos on your website. Scroll down and paste the URL to the plugin as shown below.

Screen Shot 2016-03-05 at 9.22.02 PM

Next, under Plugins>Name, Options (JSON), enter ga as the name and click +

Screen Shot 2016-03-05 at 9.25.18 PM

Now your video player will listen for video actions like play, pause, % milestone passed, etc and send that information to the data layer. In addition, a custom event will be sent to the data layer with that information as shown below.

Screen Shot 2016-03-05 at 9.36.37 PM

2. Add Data Layer Variables

Now that we are successfully passing the information to the data layer, we will need to create the data layer variables for the videoCategory, videoAction and videoLabel as shown below.

Screen Shot 2016-03-06 at 10.11.03 PM Screen Shot 2016-03-06 at 10.11.17 PM Screen Shot 2016-03-06 at 10.11.27 PM

3. Add Custom Event Trigger

Next we’ll want to create a custom event trigger that’ll fire whenever an event is sent to the data layer from the video player. The event name should be videoEvent.

Screen Shot 2016-03-06 at 10.15.52 PM

4. Create the Tag

The last step is to create a tag that will fire an event to Google Analytics as shown below.

Note: I suggest setting Non-interaction Event to true since the video player will fire an event on page load. That way, pages containing a video will not impact your bounce rate.

Brightcove Google Tag Manager

 

And that’s it! If you’re having trouble getting it to work, first make sure your data layer events are firing off. If you’re a developer, feel free to contribute to this plugin on GitHub.