This article describes how to track videos in a Brightcove player and send the tracking data to your SiteCatalyst analytics tool using Tealium iQ. The concepts outlined in this article can also be used to track other video players that use a JavaScript API.

This article covers the following topics:

Table of Contents Placeholder

How it Works

Tracking Brightcove player data and sending the data to SiteCatalyst is accomplished by setting up three (3) JavaScript code extensions, as follows:

  • Media Module
    This code loads the SiteCatalyst Media Module and allows you to send media tracking data to SiteCatalyst.
  • Media Module Configurations
    This code sets the configurations for the Media Module, such as which props, eVars, and events in SiteCatalyst are associated with the video events.
  • Brightcove Event Listeners
    This code uses the Brightcove API to send the video tracking data directly to SiteCatalyst.

The steps described in this article do not require mapping to data sources within Tealium iQ.

Setting Up a JavaScript Code Extension to Load the Media Module

To send tracking data from the Brightcove player to SiteCatalyst through Tealium iQ, you must use a JavaScript code extension to load the SiteCatalyst Media Module. The Media Module code used in the extension is included in the s_code file from SiteCatalyst.

Use the following steps to set up a JavaScript code extension to load the Media Module:

  1. Add a JavaScript code extension.

  2. In the Title field, enter a descriptive title, such as SiteCatalyst Media Module.

  3. Under Scope, set the scope to SiteCatalyst.

  4. Paste the Media Module code into the text box.
    Brightcove_SightCatalyst_Add JavaScript Extension.png

Setting Up a JavaScript Code Extension to Load the Media Module Configurations

Next, add an additional JavaScript Code extension to load the configurations for the SiteCatalyst Media Module. Configuration data includes all props, eVars, and events that are set aside for video tracking.

Use the following steps to set up a JavaScript code extension to load the Media Module configurations:

  1. Add another JavaScript code extension.

  2. In the Title field, enter a descriptive title, such as SiteCatalyst Media Module Configs.

  3. Under Scope, set the scope to SiteCatalyst.

  4. Paste the Media Module configuration code into the text box.
    Brightcove_SightCatalyst_Add JavaScript Extension_Media Module Configuration Settings.png

    The exact props, eVars, and events you use for the Media Module configuration depend on your SiteCatalyst implementation.
    For additional assistance, contact your Account Manager.

Setting Up a JavaScript Code Extension to Load the Brightcove Event Listeners

The final step is to add a third JavaScript code extension to set up the Brightcove event listeners that track the video events. It is this code that sends the tracking data to SiteCatalyst.

Use the following steps to add a JavaScript code extension to set up the Brightcove event listeners:

  1. Add another JavaScript code extension.

  2. In the Title field, enter a descriptive title, such as Brightcove Event Listeners.

  3. Under Scope, set the scope to DOM Ready.

  4. Paste the Brightcove event listener code into the text box.
    Brightcove_SightCatalyst_Add JavaScript Extension_Brightcove Event Listeners.png
  5. Save/Publish your profile.

Extension Order and Placement

Within the Tealium iQ Extension tab, ensure that the JavaScript code extension responsible for loading the Media Module is placed above the extension responsible for loading the Media Module configurations. 

Brightcove_SightCatalyst_JavaScript Extension_List_In Order.png

Code Sample

This section provides a code example that can be used to accomplish the tasks described in this article:

window._tealium_BC = {
    name : "Brightcove 3",
      mediaEventHandler :  function (pEvent) {
      //Create Video Name by grabbing value from pEvent.media.displayName
      var video_name = _tealium_BC.name+":"+pEvent.media.displayName;
      // Log the Video name and type of video
      utag.DB("TEALIUM MEDIA:" + video_name + " : " + pEvent.type);
      // On initial video play 
      if(pEvent.type == brightcove.api.events.MediaEvent.PLAY){
      // If position < .1 (start video)
        if(pEvent.position < 0.1){
      // s.Media functions are contained in the Media Module. Calling these functions will pass the media values into the SiteCatalyst Server call. 
      // You can test this by adding the Media Module and the config information scoping the extension to a SiteCatalyst Tag.
      //Then you can load the page and call the s.Media functions in the console. 
          s.Media.open(video_name, pEvent.duration, _tealium_BC.name);
          s.Media.play(video_name, 2);
    s.Media.track(video_name);
        }else{
          s.Media.play(video_name, pEvent.position)
        }
      // Fire Stop Event
      }else if (pEvent.type == brightcove.api.events.MediaEvent.STOP){
        s.Media.stop(video_name, pEvent.position);
s.Media.track(video_name);
      // Fire Video Completion Event
      }else if (pEvent.type == brightcove.api.events.MediaEvent.COMPLETE){
        s.Media.complete(video_name, pEvent.position);
        s.Media.stop(video_name, pEvent.position);
s.Media.track(video_name);
        //s.Media.close(pEvent.Media.id);
      }
    }
  }
  
// This function will get called when the player initializes.
// This function is defined in the param names that get injected into the page. Typically stored in the varaible : BCL.playerTemplate
// <param name="templateLoadHandler" value="BCL.onTemplateLoad" />
// http://support.brightcove.com/en/video-cloud/docs/getting-started-smart-player-api

BCL.onTemplateLoaded = function(id){
        // get a reference to the player
        BCL.player = brightcove.getExperience(id);
        // get references to the experience and video player modules
        BCL.experienceModule = BCL.player.getModule(APIModules.EXPERIENCE);
        BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER);
        
        utag.DB("TEALIUM: Connecting Tealium with Brightcove BCL object - SUCCESS");
            // Defines the BCL.video player object in _tealium_BC object
            _tealium_BC.videoPlayer = BCL.videoPlayer;
            // Call function to enable Event Listeners
            utag.DB("******** Adding Listeners *******")
            _tealium_BC.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, _tealium_BC.mediaEventHandler);
            _tealium_BC.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, _tealium_BC.mediaEventHandler);
            _tealium_BC.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.STOP, _tealium_BC.mediaEventHandler);
            _tealium_BC.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, _tealium_BC.mediaEventHandler);
            utag.DB("******** Listeners  Added *******")
    }

 

 

Tags (1)