Track ads using JavaScript 2.x track-ads-on-javascript

The following instructions provide guidance for implementation using the 2.x SDKs.

IMPORTANT
If you are implementing a 1.x version of the SDK, you can download 1.x Developers Guides here: Download SDKs.

Ad tracking constants

Constant name
Description
AdBreakStart
Constant for tracking AdBreak Start event
AdBreakComplete
Constant for tracking AdBreak Complete event
AdStart
Constant for tracking Ad Start event
AdComplete
Constant for tracking Ad Complete event
AdSkip
Constant for tracking Ad Skip event

Implementation steps

  1. Identify when the ad break boundary begins, including pre-roll, and create an AdBreakObject by using the ad break information.

    AdBreakObject reference:

    table 0-row-3 1-row-3 2-row-3 3-row-3 3-align-center 7-align-center 11-align-center 15-align-center
    Variable Name Description Required
    name Ad break name such as pre-roll, mid-roll, and post-roll. Yes
    position The number position of the ad break starting with 1. Yes
    startTime Playhead value at the start of the ad break. Yes

    Ad break object creation:

    code language-js
    var adBreakObject =
      MediaHeartbeat.createAdBreakObject(<ADBREAK_NAME>,
                                         <POSITION>,
                                         <START_TIME>);
    
  2. Call trackEvent() with AdBreakStart in the MediaHeartbeat instance to begin tracking the ad break:

    code language-js
    mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdBreakStart, adBreakObject);
    
  3. Identify when the ad starts and create an AdObject instance using the ad information.

    AdObject reference:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 3-align-center 7-align-center 11-align-center 15-align-center 19-align-center
    Variable Name Description Required
    name Friendly name of the ad. Yes
    adId Unique identifier for the ad. Yes
    position The number position of the ad within the ad break, starting with 1. Yes
    length Ad length Yes

    Ad object creation:

    code language-js
    var adObject =
      MediaHeartbeat.createAdObject(<AD_NAME>,
                                    <AD_ID>,
                                    <POSITION>,
                                    <LENGTH>);
    
  4. Optionally attach standard and/or ad metadata to the media tracking session through context data variables.

    • Implement standard ad metadata on JavaScript

    • Custom ad metadata - For custom metadata, create a variable object for the custom data variables and populate with the data for the current ad:

      code language-js
      /* Set custom context data */
      var adCustomMetadata = {
          affiliate: "Sample affiliate",
          campaign: "Sample ad campaign",
          creative: "Sample creative"
      };
      
  5. Call trackEvent() with the AdStart event in the MediaHeartbeat instance to begin tracking the ad playback.

    Include a reference to your custom metadata variable (or an empty object) as the third parameter in the event call:

    code language-js
    _onAdStart = function() {
        this._mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdStart,
                                        adObject,
                                        adCustomMetadata);
    };
    
  6. When the ad playback reaches the end of the ad, call trackEvent() with the AdComplete event:

    code language-js
    _onAdComplete = function() {
        this._mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdComplete);
    };
    
  7. If ad playback did not complete because the user chose to skip the ad, track the AdSkip event:

    code language-js
    _onAdSkip = function() {
        this._mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdSkip);
    };
    
  8. If there are any additional ads within the same AdBreak, repeat steps 3 through 7 again.

  9. When the ad break is complete, use the AdBreakComplete event to track:

    code language-js
    _onAdBreakComplete = function() {
        this._mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdBreakComplete);
    };
    

See the tracking scenario VOD playback with pre-roll ads for more information.

recommendation-more-help
c8eee520-cef5-4f8c-a38a-d4952cfae4eb