mParticle Web Media SDK

Hello! This is the public repo of the mParticle Web Media SDK. We've built the mParticle platform to take a new approach to web and mobile app data and the platform has grown to support 200+ services and SDKs, including developer tools, analytics, attribution, messaging, and advertising services. mParticle is designed to serve as the connector between all of these services - check out our site, or hit us at developers@mparticle.com to learn more.

Documentation

Fully detailed documentation and other information about mParticle web SDK can be found at our doc site

- Core mParticle SDK

- Media SDK

Getting Started

Please be aware that this SDK is built as an extension of and requires the use of the mParticle Javascript SDK.

Include and Initialize the SDK

Below summarizes the major steps to get the Web Media SDK up and running.

$3

In your root directory:

``
npm i @mparticle/web-sdk @mparticle/web-media-sdk
`

`
// index.js
import mParticle from '@mparticle/web-sdk'
import MediaSession from '@mparticle/web-media-sdk';
import SampleMediaKit from '@mparticle/web-sample-media-kit'

const mParticleConfig = {
// Set up mParticle core config per our docs at:
// https://docs.mparticle.com/developers/sdk/web/self-hosting/#3---create-a-config-object
}

// Register any media kits
SampleMediaKit.register(mParticle.config)

mParticle.init('REPLACE WITH API KEY', mParticleConfig);

// 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, 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
true // (optional) Exclude Ad breaks from media content time
)

mediaSession.logMediaSessionStart();
mediaSession.logPlay();

`

$3

By default, a MediaEvent will have certain required attributes, such as custom_media_id and custom_media_title, etc. However, if you need to log something custom, such as content_season_number or player_name, this can be included in the customAttributes object.

These customAttributes are attributes unique to the media event but can be passed through the MediaSession via the various log functions as an options parameter.

`javascript
const customAttributes = {
content_season: 3,
content_episode: 26,
content_episode_name: 'The Best of Both Worlds',
};

mediaSession.logPlay({ options: currentAttributes });
`

$3

You can create custom media session attributes when initializing a new media session by including the custom media session attributes object directly in the MediaSession() builder:

`javascript
{
"my_session_attribute": "My Session Attribute" // Example key/value pair for a custom media session attribute
}
`

Custom media session attributes are automatically propagated to all 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.

#### Custom media session attribute limits

* 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

$3

Most of our partner integrations require that a media player frequently trigger a _timeline update_ or _heartbeat_ event. Our API provides two different methods of updating the playhead position based on your needs.

#### logPlayheadPosition (recommended)

The simplest method we provide is the current playhead position as a number to the MediaSession.logPlayheadPostition() method.

`javascript
player.addEventListener('playheadUpdate', function (currentPlayheadPosition) {
mediaSession.logPlayheadPosition({ options: currentPlayheadPosition });
});
`

#### As Optional Parameter

If your implementation prevents you from triggering a playhead position update on regular intervals, you can provide the currentPlayheadPosition attribute via options to any log method.

`javascript

const options = {
currentPlayheadPosition: 299;
}

mparticle.logPause(options);
mparticle.logAdSkip(exampleAdObject, options);

`

Logging Custom Events

Depending on your use case or player's events, there might be a need to log an event which the Media SDK does not currently support. In these cases, please use the createPageEvent method to trigger a custom event via the Core SDK.

For example,

`javascript
const customMPEvent = MediaSession.createPageEvent('My Custom Event', {
// Attributes are optional
'custom-property': 'custom-value',
});

mParticle.logBaseEvent(customMPEvent);
`

Using 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 which will provide a callback.

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

`javascript
const myCallback = function (event) {
// Some custom callback method defined by user
// Should only trigger when play or pause is fired
if (
event.type == MediaEventType.Play ||
event.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);
`

Contribution Guidelines

At mParticle, we are proud of our code and like to keep things open source. If you'd like to contribute, simply fork this repo, push any code changes to your fork, and submit a Pull Request against the master branch of mParticle-web-media-sdk.

Running the Tests

Prior to running the tests please install all dev dependencies via an npm install, and build the mParticle.js file as well as the test file by running npm run build:

`bash
$ npm install
$ npm run build
$ npm test
``

The test script will run all tests using Mocha as unit tests.

Development Notes

This package comes with the NPM package pre-commit, which will run GTS when you try to commit.

Support

License

The mParticle Web Media SDK is available under the Apache License, Version 2.0. See the LICENSE file for more info.