Track HTML media through Google Tag Manager using a plugin is not working

For engineers Tracking SDKs
1

I have used Snowplow to collect events for the website, such as names, IDs, and timestamps. I configured this tracking through Google Tag Manager and created a tag with Snowplow v3 configuration. Now, I need to add a plugin for HTML video tracking within that tag. I downloaded version 9 of the plugin from the Snowplow website, deployed the JavaScript on the server, and added the deployed URL to the ‘Load plugin’ section of the tag. Could you provide a proper guide on the details required for configuring the plugin?

image
image908×755 58.4 KB

image
image902×474 39.8 KB

2

Hello @Madhan and welcome to Snowplow community!
Such a guide is indeed missing from our docs, so thanks for raising this.

Generally to use a plugin with JavaScript tracker, we need to first load the plugin and then enable it. Now, to do this through the GTM Tag:

  1. Loading the plugin can be done through the Load Plugins configuration section in the Tag, as you currently do, where you need to specify the Plugin URL and the Plugin Configuration. The Plugin Configuration needs to be a string. The TypeError you are seeing probably suggests that the {{Plugin Configuration}} Variable you are using does not evaluate to a string. The value there just needs to be snowplowMediaTracking,MediaTrackingPlugin.
  2. Enabling the plugin needs to happen using a Custom Command type of Tag. In other words, at this point, even if loading the plugin have worked, the plugin will still not have been enabled. For the Custom Command the Command Name needs to be enableMediaTracking and the Command Argument needs to be an object, similar to what can be seen in the HTML5 Media Tracking docs.

So you can combine these 2 in a new Tag that could look like in the screenshot below:

gtm_media_plugin
gtm_media_plugin930×541 26.2 KB

Hope this helps!

3

Hello @Ada, thank you for providing these details. Could you please clarify which variables I need to create, as mentioned in {{cjs - enableMediaTracking argument}}? Additionally, please provide specific details about what information should be included in those variables. Just to clarify, I intend to use a single tag to track page views and the specified media-related tracking using this configuration.

image
image922×688 47.5 KB

4

Hey @Madhan , you will need to create another Tag besides the Page View one. That Tag will have the responsibility to load and enable the media plugin. It should be of Custom Command type, like in the screenshot shared above, which is to fire before the Page View Tag.

Concerning the Variable, as an example, the {{cjs - enableMediaTracking argument}} can be as simple as:

enableMediaTracking_argument

You can refer to the docs of the enableMediaTracking function to see all the properties this argument object could have.

5

Thank you, @Ada, for providing these details. Following your guidance, I’ve created a new tag for media tracking using the custom command and plugin URL. Should I set up a trigger in GTM, or is there anything else I need to do to trigger it in the website code? Additionally, could you provide an example of when this media tag will trigger?

image
image1163×192 19.9 KB

image
image821×567 44.6 KB

image
image1226×733 39.1 KB

6

This looks great @Madhan ! Only note would be that the return value of the Plugin Script should be an object and not wrapped in array. Another thing to check is that both the Snowplow - Pageview and the Video Tracking Tags use the same Snowplow v3 Settings Variable.

This Video Tracking Tag will indeed need a Trigger. One way to go about it is to make it fire before/after the Snowplow - Pageview Tag. You can either choose a pre-existing trigger or just use Tag Sequencing from the Snowplow - Pageview Tag.

Before sharing an example, it is worth noting why it is enough for the Video Tracking Tag to fire only once: This Tag just runs the code to load the Media Plugin and enable media tracking for the media elements you’ve specified in the argument. It does not track any events, but sets the necessary listeners for the media events to be tracked automatically when they are emitted (e.g. when the user hits play/pause).

With that in mind, if for example you’d like to use Tag Sequencing to force the Video Tracking Tag to fire just before the Snowplow - Pageview Tag:

  1. Go to your Snowplow Pageview Tag configuration
  2. Open the Advanced Settings section and then the Tag Sequencing subsection
  3. Set the Video Tracking Tag to fire before or after the Snowplow - Pageview Tag

One last note for completeness:

The 2 steps (loading the plugin and calling the enableMediaTracking as custom command) could be equally correctly separated in different Tags. For example, you could also load the plugin along the Snowplow - Pageview Tag and only call enableMediaTracking in the Video Tracking tag.

7

Thank you, @Ada, for providing these details. They are truly helpful for me.