Implementing 3rd party analytics events

Article author
Matt Hanan

STRUCTURING 3RD PARTY ANALYTICS INTEGRATION

There are 2 methods for handling integration of a 3rd party analytics system.

Screen_Shot_2021-08-25_at_10.39.45_AM.png

  1. Server side (JS implementation)
  2. Iframe (served by TVPage)

The difference between the two, is that the server side implementation will be able to leverage Javascript functions inside the page context (and not use postMessage events).

For server side, you can fire a custom event handler that you create, that is mapped to your analytics system. That event handler must be accessible within the page context to be accessible.

For Iframe, you need to provide TVPage with 2 resources: a small Javascript shim file that will loaded inside of the Iframe and be executed when events are fired from the player; and the analytics library that the shim file references. These 2 resources will be loaded from inside the Iframe, so that they can be executed. Don’t worry about loading the analytics library twice from a resource perspective, since the source of the file itself will be the same, the browser will simply load a cached version of the file and not actually make a request.

IFRAME ANALYTICS IMPLEMENTATION

The big advantage of this setup, is that the client controls the shim, and the event mapping into their analytics system.

Screen_Shot_2021-08-25_at_10.42.00_AM.png

Provide links to the following 2 resources to TVPage, these will be loaded directly from the client’s CDN.

  • analytics_mapping_shim.js

This is a small shim library that you create so that your analytics system receives the expected data objects when the player fires its events.

// State change is emitted by the player

var onStateChange = function(event_type, data){

  // When state change is fired, delegate the information to the external analytics handler

 sendToExternalAnalytics(event_type, data, staticVideo);
}

// Basic function that can be used to map TVPage data to an external analytics system

var sendToExternalAnalytics = function(event_type, data, staticVideo) {

  if (event_type === “tvp:media:videoplaying”) {

    // Map event data to external analytics system and fire event

    // Example values contained in the video data object:

    // staticVideo.title = the video’s title

   // staticVideo.id = the video’s unique ID
 }
}
  • analytics_client_lib.js

This is your standard analytics client library that is loaded on your website.

Example: https://www.google-analytics.com/analytics.js

SERVER SIDE (JS) ANALYTICS IMPLEMENTATION

The big advantage of this setup, is that the client controls the shim, and the event mapping into their analytics system.

Screen_Shot_2021-08-25_at_10.47.45_AM.png

  • analytics_mapping_shim.js

This is a small shim library that you create so that your analytics system receives the expected data objects when the player fires its events.

// State change is emitted by the player

var onStateChange = function(event_type, data){

  // When state change is fired, delegate the information to the external analytics handler

 sendToExternalAnalytics(event_type, data, staticVideo);
}

// Basic function that can be used to map TVPage data to an external analytics system

var sendToExternalAnalytics = function(event_type, data, staticVideo) {

  if (event_type === “tvp:media:videoplaying”) {

    // Map event data to external analytics system and fire event

    // Example values contained in the video data object:

    // staticVideo.title = the video’s title

   // staticVideo.id = the video’s unique ID
 }
}
  • analytics_client_lib.js

This should be already loaded in the page by default.

Example: https://www.google-analytics.com/analytics.js