Send Web data to Edge with the ÃÛ¶¹ÊÓƵ Experience Platform Web SDK
Starting with version 2.20.0, the streamingMedia
component of the ÃÛ¶¹ÊÓƵ Experience Platform Web SDK enables you to collect data related to media sessions on your website. The collected data can include information about media playbacks, pauses, completions, and other related events.
After data is collected, you can send it to ÃÛ¶¹ÊÓƵ Experience Platform and/or ÃÛ¶¹ÊÓƵ Analytics, to generate reports. This feature provides a comprehensive solution for tracking and understanding media consumption behavior on your website.
For customers who are using the Media JS SDK, Web SDK provides a migration path to move from Media JS SDK to Web SDK, while including support for existing Media JS functionalities, such as handling media events.
Prerequisites prerequisites
To use the streamingMedia
component of Web SDK, you must meet the following prerequisites:
- Before you can send streaming media data to Edge, first complete the steps in Install the Streaming Media Collection with Experience Platform Edge.
- Make sure you have access to ÃÛ¶¹ÊÓƵ Experience Platform and/or ÃÛ¶¹ÊÓƵ Analytics.
- You must use Web SDK version 2.20.0 or later. See the Web SDK installation overview to learn how to install the latest version.
- Enable the Media Analytics option for the datastream you are using.
- Ensure that the schema used by your datastream includes the Media Collection schema fields.
- Configure the Streaming Media feature in the Web SDK configuration, as shown in this page, either through the tag extension or through the JavaScript library.
Follow the steps described in this page to migrate your Streaming Media Collection implementation from Media JS to Web SDK.
Step 1: Install Experience Platform Web SDK
See the dedicated documentation to learn how to install Web SDK on your web properties.
Step 2: Configure the Web SDK streamingMedia
component.
Example
The snippet below shows how you would configure media collection in Media JS.
var mediaConfig = new ADB.MediaConfig();
mediaConfig.trackingServer = "company.hb-api.omtrdc.net";
mediaConfig.playerName = "player_name";
mediaConfig.channel = "sample_channel";
mediaConfig.appVersion = "app_version";
mediaConfig.debugLogging = true;
mediaConfig.ssl = true;
ADB.Media.configure(mediaConfig, appMeasurement);
Instead, you must configure the streamingMedia
component in the Web SDK as exemplified below.
alloy("configure", {
streamingMedia: {
channel: "sample_channel",
playerName: "player_name",
appVersion: "app_version",
mainPingInterval: 10,
adPingInterval: 10
}
});
See the Web SDK streamingMedia
component documentation for complete details on how to configure it.
Step 3: Get the media tracker instance when migrating from the Media JS SDK
For customers who are using the Media JS SDK, Web SDK provides a migration path to move from Media JS SDK to Web SDK, while including support for existing Media JS functionalities, such as handling media events.
Web SDK includes a command to retrieve a Media Analytics Tracker. You can use this command to create an object instance and then, using the same APIs as the ones provided by the , track media events.
See the getMediaAnalyticsTracker
documentation for complete details on the supported methods.
The snippet below shows how you would retrieve the media tracker instance in Media JS.
var tracker = ADB.Media.getInstance();
Instead, use the getMediaAnalyticsTracker
command in Web SDK to achieve the same result, as shown below.
// aquire Media Analytics APIs
const Media = await window.alloy("getMediaAnalyticsTracker", {});
// create a media tracker instance
const trackerInstance = Media.getInstance();
All the helper methods will be available on the Media
object. The tracker methods are available on the tracker instance, as shown below.
const mediaInfo = Media.createMediaObject(
"video name",
"player video",
60,
Media.StreamType.VOD,
Media.MediaType.Video
);
const contextData = {
isUserLoggedIn: "false",
tvStation: "Sample TV station",
programmer: "Sample programmer",
assetID: "/uri-reference"
};
// Set standard Video Metadata
contextData[Media.VideoMetadataKeys.Episode] = "Sample Episode";
contextData[Media.VideoMetadataKeys.Show] = "Sample Show";
trackerInstance.trackSessionStart(mediaInfo, contextData);