Media

Collecting media data is critical for tracking user behavior when your customers consume video or audio content through Android and iOS mobile applications or on the web. The mParticle Media SDK (Media SDK) is a toolset for integrating media analytics into your customer experience.

• Provides a dedicated API for tracking common media events including session start, play, pause, milestones, and end, as well as logging recurring advertising impressions and chapters for segmented content.
• Works hand in hand with the mParticle platform. Data logged from the Media SDK is forwarded to the Web SDK and then forwarded to any included integrations.
• Compatible with Adobe Analytics for Media, supporting the full range of media-related events including heartbeat events. This simplifies an otherwise complicated and error-prone process of setting up media session event tracking and Adobe Heartbeat yourself.

Get Started

Set up the appropriate client SDK, and then the Media SDK.

Set Up a Client SDK

To use the Media SDK, you need a working instance of an mParticle client SDK in a self-hosting environment. For more information, see the self-hosting documentation.

Set Up the Media SDK

1. Install the relevant npm packages for your project. The following example uses our Adobe Client web integration. When adding Adobe as an output for JavaScript in the mParticle web app, there is a setting for Media Tracking Server. When you fill this out, mParticle will load the Heartbeat SDK and send media events to it.

// command line
npm i @mparticle/web-sdk @mparticle/web-media-sdk @mparticle/web-adobe-client-kit

2. In your main JavaScript file, import the mParticle, MediaSession, and Adobe modules, and then add an mParticle configuration:

// Import each library
import mParticle from '@mparticle/web-sdk';
import MediaSession from '@mparticle/web-media-sdk';
import Adobe from '@mparticle/web-adobe-client-kit';

// Configure mParticle as needed for your project
const mParticleConfig = {
  // configuration items
};

// Register each kit to the configuration
Adobe.register(mParticleConfig);

// Initialize mParticle
mParticle.init('your-api-key', mParticleConfig);

Create an Instance of a Media Session

The Web Media SDK provides a MediaSession object. Each MediaSession object represents a single media experience and relates one-to-one to a piece of content. For example, if a customer is watching a video, pausing, seeking and scrubbing, that is considered a single session. If a customer stops the video, and plays another piece of content, that is a new session.

When creating a new MediaSession object, the pageEventToggle and mediaEventToggle fields are optional. Both fields default to false if no value is provided.

• If pageEventToggle is set as true, a PageEvent is logged when the session starts.
• If mediaEventToggle is set as true, a Media event is logged when the session starts.
• If both fields are set as true, both event types are logged.

const mediaSession = new MediaSession(
    mParticle,                    // mParticle SDK Instance
    '1234567',                    // Custom media ID
    'Funny Internet cat video',   // Custom media Title
    120000,                       // Duration in milliseconds
    'Video',                      // Content Type (Video or Audio)
    'OnDemand',                   // Stream Type (OnDemand, Live, etc.)
    true,                         // Log Page Event Toggle (true/false)
    true,                         // Log Media Event Toggle (true/false)
    {
        "my_session_attribute": "My Session Attribute"
    } // (optional) Custom Session Attributes object used for each media event within the Media Session
);

Media Session Properties

Now that you have an instance of a media session, you can process the session summary events: segment summary events, and ad events. Summary events are automated events that contain an accumulated record of what occured during a session, individual segments, and individual ads.

Session Summary Events

A Session Summary event tracks from when a MediaSession is initialized to when it’s de-initialized or when logMediaSessionEnd is called. The more accurate and detailed you are with logPlay, logPause, logAdStart, and other media events, the more accurate the summary data will be.

The following table explains the different parts of the Session Summary event.

Segment Summary Events

A Segment Summary event tracks from when logSegmentStart is called to when either logSegmentSkip or logSegmentEnd is called. Segments could be the chapters of an audiobook or scenes in a movie.

The following table explains the different parts of the Segment Summary event.

Ad Summary Events

An Ad Summary event tracks from when logAdStart is called to when either logAdSkip or logAdEnd is called.

The following table explains the different parts of the Ad Summary event.

Log Media Events

Once your session is instantiated, you will need to trigger a SessionStart. This should be done at the moment the user interacts with your content. For example, if the media is set to trigger on a user click, and your player fires a play event when the content starts, the session must begin before the play event.

1. Start a session

const options = {
    customAttributes: {
    },
    currentPlayheadPosition: 0,
};
mediaSession.logMediaSessionStart(options);

2. Log a play event

const options = {
    customAttributes: {
        content_rating: 'epic',
        additional: {
            attribute: 'foo',
        },
    },
    currentPlayheadPosition: 0,
};
mediaSession.logPlay(options);

3. (optional) Fire other events for user interaction, i.e. pause

const options = {
    customAttributes: {
        content_rating: 'epic',
        additional: {
            attribute: 'foo',
        },
    },
    currentPlayheadPosition: 32,
};
mediaSession.logPause(options);

4. End the Media Content once the content is complete

const options = {
    customAttributes: {
        content_rating: 'epic',
        additional: {
            attribute: 'foo',
        },
    },
    currentPlayheadPosition: 30000,
};
mediaSession.logMediaContentEnd(options);

5. End the Media Session once the user interaction is over (such as after a post-roll or if the app is terminated)

const options = {
    customAttributes: {
        content_rating: 'epic',
        additional: {
            attribute: 'foo',
        },
    },
    currentPlayheadPosition: 30000,
};
mediaSession.logMediaSessionEnd(options);

Log Advertising

In most cases, advertising comes in as a series of Ad Breaks each containing numerous Ads. The Media SDK provides both sets of functionality so that you can track this behavior.

1. Fire an AdBreakStart event

mediaSession.logAdBreakStart({
  id: '123456',             // ad_break_id for Ad Break Start/End and Summary events
  title: 'pre-roll',        // ad_break_title
  duration: 6000            // ad_break_duration
});

2. Trigger an AdStart event

mediaSession.logAdStart({
  id: '4423210',                                        // ad_content_id for Ad Start/End and Summary events
  advertiser: "Mom's Friendly Robot Company",           // ad_content_advertiser
  title: 'What?! Nobody rips off my kids but me!',      // ad_content_title
  campaign: 'MomCorp Galactic Domination Plot 3201',    // ad_content_campaign
  duration: 60000,                                      // ad_content_duration
  creative: 'A Fishful of Dollars',                     // ad_content_creative
  siteid: 'moms',                                       // ad_content_site_id
  placement: 'first',                                   // ad_content_placement
  position: 0                                           // ad_content_position
});

3. Fire AdEnd or AdSkip when appropriate

mediaSession.logAdEnd();

4. Trigger an AdBreakEnd event when all ads have completed

mediaSession.logAdBreakEnd();

Custom media session attributes

You can create custom media session attributes when initializing a new media session directly in the MediaSession() builder. These custom session attributes are helpful when you need to track data like the specific page a piece of content was viewed on.

Custom media session attributes are automatically propagated to all subsequent media events logged during the session in addition to the media session summary event. Since custom session attributes are propagated to any event (a media event, advertising event, or a custom events) that is logged during the session, you don’t need to set these attributes again when you trigger the start of a media session.

How are these unique from custom event attributes?

There are several differences between event-level custom attributes and custom media session attributes:

• Custom media session attributes are propagated to all media events, ad events, or other custom events that are logged during the current media session.
• If there are any conflicts or collisions between custom media session attributes and event-level attributes, the event-level attributes override the session attributes.
• Custom session attributes are also propagated to segment summary events and ad summary events, while custom event-level attributes are not.
• Custom event attributes in the Media SDK are not included in the media session summary event.

Custom media session attribute limitations

• 100 key/value pairs per media session
• Keys must be strings and cannot exceed 255 characters
• Values may be strings, numbers, booleans, or dates, and cannot exceed 4096 characters

Example

const mediaSession = new MediaSession(
    mParticle,                    // mParticle SDK Instance
    '1234567',                    // Custom media ID
    'Funny Internet cat video',   // Custom media Title
    120000,                       // Duration in milliseconds
    'Video',                      // Content Type (Video or Audio)
    'OnDemand',                   // Stream Type (OnDemand, Live, etc.)
    true,                         // Log Page Event Toggle (true/false)
    true,                         // Log Media Event Toggle (true/false)
    {   
        "my_session_attribute": "My Session Attribute"
    } // (optional) Custom Session Attributes object used for each media event within the Media Session
);

Generate Custom Events

The Media SDK generates a MediaEvent for client-side kits such as Adobe Media Analytics, however the event can be converted to look just like a typical mParticle custom event that may be used to create audiences, used in calculated attributes, and sent to most mParticle integrations for analysis and activation.

To enable Custom event generation, pass a boolean to the initialization of your MediaSession to enable the Log Page Event (aka Custom Event) feature:

// Later in your code, when a user begins to engage with your content
const mediaSession = new MediaSession(
    mParticle,                    // mParticle SDK Instance
    '1234567',                    // Custom Media ID
    'Funny Internet cat video',   // Custom Media Title
    120000,                       // Duration in milliseconds
    'Video',                      // Content Type (Video or Audio)
    'OnDemand'                    // Stream Type (OnDemand or LiveStream)
    true                          // Log Page Event Toggle (true/false)
)

Custom Event Schema

The Media SDK will generate Custom events per the specification below.

Event Names

The Media SDK exposes methods that will trigger Media Events based on the most common player functions. The Media SDK maps every MediaSession API to a predefined Custom event name. The table below details all of the predefineed Media Events:

NOTE

The API method mediaSession.logPlayheadPosition() and mediaSession.logUpdateQoS() don’t generate custom events. See Playhead Position and Quality of Service for more information about using them.

Event Attributes

All of our events support an options parameter that can contain custom attributes to allow a customer to capture valuable information with every media event. Each attribute will be logged to best describe the session characteristics for that event at that time.

The customer can choose from our list of predefined attributes below, which are mapped to custom third-party attributes, such as Adobe Standard Metadata, when forwarded to their respective vendor. A customer is also free to add their custom attributes of their own, which will pass through as-is when forwarded to a partner service.

Note: Depending on your player, you will need to either enable the callback method to receive updates for playhead position and quality of service (QoS) or set up a job to frequently poll for the current values.

mediaSDK.logMediaSessionStart({
    customAttributes: {
        content_title: 'The Best of Both Worlds',
        content_season: 3,
        content_episode: 26,
        my_custom_attribute: 'Locutus'
    }
});

Vendor-specific Attributes

In some cases third-party vendors, such as Adobe, may require custom attributes to be submitted in a differnt format from mParticle’s format, such as content_show vs s:meta:a.media.show, which would require duplicate information to be passed. In these cases, we provide vendor-specific mappings for some of our custom attributes to reduce duplication.

For example:

Example Event

{
    "event_type": "custom_event",
    "data": {
        "custom_event_type": "media",
        "event_name": "Play",
        "custom_flags": {},
        "timestamp_unixtime_ms": "1573828863888",
        "event_id": "-109840007014118971",
        "source_message_id": null,
        "session_id": "-8572887793551346848",
        "session_uuid": "29959B6B-9C3B-486F-9807-B5534EA1B16A",
        "session_start_unixtime_ms": "1573828757702",
        "event_start_unixtime_ms": "1573828863888",
        "custom_attributes": {
            "content_title": "My sweet sweet media",
            "content_duration": "120000",
            "content_id": "1234567",
            "content_type": "Video",
            "media_session_id": "96a023b8-b0c7-47b7-b687-09f73b9dfac3",
            "playhead_position": "110123"
        }
    }
}

Use the Event Listener

In cases where you may need to handle some custom functionality when a media event occurs, the Media SDK provides a mediaEventListener for use with callbacks.

For example, if you need to trigger a custom function when Play or Pause occurs:

const myCallback = function(mediaEvent) {
    // Some custom callback method defined by user
    // Should only trigger when play or pause is fired
    if (
        mediaEvent.type == MediaEventType.Play ||
        mediaEvent.type == MediaEventType.Pause
    ) {
        // Get the Media Event as an mParticle Page Event
        const mpEvent = mediaEvent.toPageEvent();

        // Pass to your own custom function
        myCustomFunction(mpEvent);
    }
};

mediaSession.mediaEventListener(myCallback);

Capture Playhead Position and Quality of Service

When creating media events, the Media SDK automatically includes relevant attributes, including media ID and title. Two of the most important attributes are the current playhead position, and the current quality of the media.

To capture these attributes, call logPlayheadPosition() and logUpdateQoS() at consistent intervals in each session.

Playhead Position

Use logPlayheadPosition() to continuously update the playhead position, so that your media events show the correct time.

Your media player provides at least one API method to query for the playhead position. There are two approaches to logging playhead position, depending on the capabilities of your player. The examples below both use JWPlayer, but any player should provide similar APIs.

If you are generating media custom events, note that logPlayheadPosition() doesn’t generate a custom event, so it is safe to call this method as often as necessary.

Event-driven (Preferred)

Most media players emit an event when the playhead position changes. You can listen for this event and call logPlayheadPosition() whenever it occurs. This example uses JWPlayer’s time event.

// The 'time' event is emitted whenever the playhead position changes
jwplayer().on('time', function(obj) {
    mediaSession.logPlayheadPosition(obj.position);
});

Cron-driven (Alternative)

If your media player does not emit an event when playhead position changes, query your player once per second to update the playhead. You must call logPlayheadPosition() at regular intervals. Adobe Heartbeat requires this to track the playhead position, in order to know how far a user has progressed through a media session.

You can query less often than once per second, depending on your needs. However, make sure that the query fires at a constant rate.

This example uses JWPlayer’s time event.

const intervalID = window.setInterval(updatePlayhead, 1000);

function updatePlayhead() {
  if (mediaSession) {
    const currentPosition = jwplayer().getPosition()
    mediaSession.logPlayheadPosition(currentPosition);
  }
}

API Reference

Visit the complete API Reference for a deep dive into the Media SDK.

Contribute to the Media SDK GitHub Repo

You can access the source code and contribute to the mParticle Media SDK GitHub repo.