DCR & DTVR Browser Adobe Launch Extension
From Engineering Client Portal
Adobe Launch Extensions
Adobe Launch Extensions are building blocks for mobile application development. The necessary functionality can be implemented independently and put to separate Extensions, but make them able to communicate using Events. These Extensions are live in adobe launch environment and can be used by clients who develop their mobile applications using adobe launch mobile property.
Nielsen AppSDK Extension
Nielsen provides the Adobe Launch Extension based on AppSDK for measuring the video/audio content. It has the name Nielsen AppSDK Extension and is available for android and iOS mobile platforms.
Extension Installation and Configuration
Nielsen has developed Extensions to simplify adding Nielsen measurement into your video stream. The first step is to create and publish a property which is outlined in the Getting Started Guide.
Install the Extension
Nielsen provides three Adobe Launch Extensions that can be integrated to an html page containing any number of video players. It allows clients to add the reporting functionality to their site by putting several lines of JavaScript code into the page.
BSDK extension
BSDK extension integrates the Nielsen BSDK, initializes BSDK instances that can be used by any other extension or from the client’s page directly.
VJS (VideoJS) extension
VJS extension subscribes to standard media events fired by VideoJS player, processes data provided by the user and taken from player, and calls BSDK API (trackevent).
IMA extension
IMA extension subscribes to events fired by the IMA plugin, processes data provided by the user and taken from IMA, and calls BSDK API (trackEvent).
Build the Extension
After the Extension is configured, it can be “built” under the “library” on the Publishing page with other “libraries”.
Add a New library
Select to add a new library
Set the name, chose Environment (Production, Staging, Development):
Save and Build
Add all changed resources. When you get the Extension configured, it will appear in the list of changed resources. Select the Latest revision and press “Select & Create a New Revision” button:
Confirm
Once built, it will appear in the list of Development libraries:
Multi-instance support
The user’s page can contain several players. The user creates BSDK, VJS and IMA extension instances for each player. They should be bound by any string identifier, e.g. a player name. This value must be set in "sdk_instance_name" field of “ext_opt” object for all extensions to bind them.
Prerequisites
Before you begin, ensure that you have an Appid. This is a Unique ID assigned to the player/site and configured by product. If you do not have an AppID , please review the OnBoarding Guide.
Implementation Methods
There are two ways to communicate with extensions. Users can use events or call the extension methods directly.
Event Implementation Method
The first step is to include the following Inside the <head> tag:
<script src="//assets.adobedtm.com/launch-XXXXXX-development.min.js"></script>
In order to get custom data for a video that is loaded to the player, the VJS extension requests the user to provide necessary data. When the video (the first one or any video after changing video from the playlist) starts loading, the video player fires standard “loadstart” media event. The VJS extension sends "nls-vjs-get-data" event with the currentSrc (unique data describing the video stream) and the player identifier that must be returned with the user’s response. The user responds with the event "nls-vjs-set-data" providing the custom content metadata to the VJS extension. VJS extension listens to "nls-vjs-set-data" event. The custom data will be used when sending data to BSDK. VJS extension listens to all necessary standard media events (loadeddata, play, pause, timeupdate, ended, etc.) and handles data appropriately.
These media events are being queued until the extension receive the custom data from the user. When the custom data have come, the metadata in the queue are updated with the custom data received. Then the extension flushes the queued data to the BSDK. The extension buffers the events within 5 seconds max
All extensions use event "nls-msg" to send error or any other messages to the user User subscribes to "nls-vjs-get-data" event.
- User sends "nls-sdk-init-instance" with the SDK instance name, SDK options and a callback function. - User sends "nls-vjs-init-instance" with the SDK instance name, VJS extension options and a callback function. - User sends "nls-ima-init-instance" with the SDK instance name, IMA extension options and a callback function. BSDK extension. In the "nls-sdk-init-instance" event handler:
Inside <body> tag:
// create player with id specified in video tag
// ....
// Add listener. You can use the following code as a template.
document.addEventListener("nls-vjs-get-data", function (event) {
var customData = {};
var detail = event.detail;
var plId = detail.playerId;
// We must provide playerId field back to the event originator in "nls-vjs-set-data"
var currentSrc = detail.currentSrc;
if (currentSrc === “/path/file.mp4”) customData.assetid = "SeaHorseID";
var ev = new CustomEvent("nls-vjs-set-data", {"detail": { playerId: plId, custom_fields: customData } });
document.dispatchEvent(ev);
});
//
// Initialize BSDK and VJS extensions. You can use the following code as a template.
var ev = new CustomEvent("nls-sdk-init-instance", {"detail":
{
ext_opt:
{
"sdk_instance_name": "inst_" + playerId,
"apid": APID,
"opt_params":
{
"apn": APN,
"sfcode": SFCODE,
"nol_sdkDebug": "DEBUG"
}
},
callback: function (ret) {
var sdk_instance_name = ret. sdk_instance_name;
var ev = new CustomEvent("nls-vjs-init-instance", {"detail":
{
"playerId": playerId,
"sdk_instance_name": sdk_instance_name,
"callback": function (ret) {
console.log("USER: VJS is ready");
// initialize player (set playlist, ads);
}
}
});
console.log("USER: Sending nls-vjs-init-instance");
document.dispatchEvent(ev);
}
}
});
console.log("USER: Sending nls-sdk-init-instance");
document.dispatchEvent(ev);
// Add the following before </body>
<script>_satellite.pageBottom();</script>