Embedded Twitch Streaming Video Tracking for Google Analytics with GTM

Twitch is arguably one of the largest, if not the largest, platforms for streaming video game content. As more companies and independent content creators make streaming content a core part of their business and engagement marketing strategies, they will need a functioning analytics solution. 

Here, we will cover how to track streaming video views from embedded Twitch players on your site by using their API to send GTM-compatible dataLayer custom events.

Here’s what you will need:

• A website with GTM installed
• A page on your site that has an embedded Twitch video player (using Interactive Frames for Live Streams and VODs, and the ability to modify the code. Note: the iframe version of the player requires additional considerations not covered in this article).
• A basic understanding of custom event triggers and dataLayer pushes
  

Why We Created This Data Solution

A client wanting to embed their own Brand's Twitch channel on their site realized there was no built-in functionality to send viewership data on-site to their Google Analytics property.

Thankfully, Twitch has their JavaScript-based API documentation here:
https://dev.twitch.tv/docs/embed/video-and-clips/

However, it is understandably difficult to parse through the instructions if you are not familiar with using Javascript or APIs. Here’s what you can do:

Modifying the Embed Code

Take the default embed script for Interactive Frames/VODs from: https://dev.twitch.tv/docs/embed/video-and-clips/

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

<div id="<player div ID>"></div>

<script type="text/javascript">
var options = {
width: <width>,
height: <height>,
channel: "<channel ID>",
video: "<video ID>",
collection: "<collection ID>",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
};
var player = new Twitch.Player("<player div ID>", options);
player.setVolume(0.5);
</script>

There are a plethora of options to potentially add to this base code, but for tracking purposes, we must add the event listener shown in the documentation.

The structure of the event listener is:

• addEventListener(event:String, callback:Function)
  event: String is of the the predefined playback events listed in the documentation
• callback:Function is the function to execute when that event happens.

So, for our use case, the event is Twitch.Player.PLAYING and the function we are wanting to call is:

dataLayer.push({'event': 'twitch-play'});

to push the event 'twitch-play' into the dataLayer.

The resulting code to add is then:

player.addEventListener(Twitch.Player.PLAYING, function(){
  	dataLayer.push({'event': 'twitch-play'});
  }
  );

Note: You can add useful dataLayer variables to this event push using the API such as the video ID.

Example finished product with the event listener code shown in lines 13 to 16:

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="SamplePlayerDivID"></div>
<script type="text/javascript">
var options = {
width: 400,
height: 240,
channel: "yourchannel",
// Only needed if this page is going to be embedded on other websites
parent: ["adswerve.com"]
};
var player = new Twitch.Player("SamplePlayerDivID", options);
player.setVolume(0.5);
player.addEventListener(Twitch.Player.PLAYING, function(){
dataLayer.push({'event': 'twitch-play'});
}
);
</script>

GTM Instructions

Now it is time to add a GTM trigger that works off of the resulting "twitch-play" event that will get pushed to the dataLayer!

1. Create a custom event trigger. The snippet pushes an event to the dataLayer called twitch-play, which will serve as the trigger for your corresponding GA event tag. You will need to:
   
   • a) Go to Triggers
   • b) New Trigger -> Custom Event
   • c) Name is Custom Event - twitch-play
   • d) Save
     
2. Create the GA event tag based on your event data model, and use the new custom event to trigger it.

You can repeat this across all events (event:String) supported by the API:

• Twitch.Player.PLAYING
  Player started video playback. Embedded streams auto play as the default unless specified in the options parameters.
• Twitch.Player.ENDED
  Video or stream ends.
• Twitch.Player.PAUSE
  Player is paused. Buffering and seeking is not considered paused.
• Twitch.Player.PLAY
  Player just unpaused, will either start video playback or start buffering.
• Twitch.Player.PLAYBACK_BLOCKED
  Player playback was blocked. Usually fired after an unmuted autoplay or unmuted programmatic call on play().
• Twitch.Player.OFFLINE
  Loaded channel goes offline.
• Twitch.Player.ONLINE
  Loaded channel goes online.
• Twitch.Player.READY
  Player is ready to accept function calls.
• Twitch.Player.CAPTIONS
  Closed captions are found in the video content being played. This event will be emitted once for each new batch of captions, in sync with the corresponding video content. The event payload is a string containing the caption content.

If you followed all the instructions, you should be ready to go!

Curious about other innovative data solutions to meet your unique needs? Contact us today!