Track ads using JavaScript 2.x

IMPORTANT

The following instructions provide guidance for implementation using the 2.x SDKs. 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:

    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:

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

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

    AdObject reference:

    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:

    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:

      /* 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:

    _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:

    _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:

    _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:

    _onAdBreakComplete = function() {
        this._mediaHeartbeat.trackEvent(MediaHeartbeat.Event.AdBreakComplete);
    };
    

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now