Track core playback using JavaScript 2.x track-core-playback-on-javascript
The following instructions provide guidance for implementation across 2.x SDKs.
-
Initial tracking setup
Identify when the user triggers the intention of playback (the user clicks play and/or autoplay is on) and create a
MediaObjectinstance.table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 3-align-center 7-align-center 11-align-center 15-align-center 19-align-center 23-align-center Variable Name Description Required nameMedia name Yes mediaidMedia unique identifier Yes lengthMedia length Yes streamTypeStream type (see StreamType constants below) Yes mediaTypeMedia type (see MediaType constants below) Yes StreamTypeconstants:table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 Constant Name Description VODStream type for Video on Demand. LIVEStream type for LIVE content. LINEARStream type for LINEAR content. AODStream type for Audio on Demand. AUDIOBOOKStream type for Audio Book. PODCASTStream type for Podcast. MediaTypeconstants:table 0-row-2 1-row-2 2-row-2 Constant Name Description AudioMedia type for Audio streams. VideoMedia type for Video streams. code language-none var mediaObject = MediaHeartbeat.createMediaObject(<MEDIA_NAME>, <MEDIA_ID, <MEDIA_LENGTH>, MediaHeartbeat.StreamType.VOD, <MEDIA_TYPE>); -
Attach metadata
Optionally attach standard and/or custom metadata objects to the tracking session through context data variables.
-
Standard metadata
Implement standard metadata on JavaScript
note note NOTE Attaching the standard metadata object to the media object is optional. -
Media metadata keys API Reference - Standard metadata keys - JavaScript
See the comprehensive set of available metadata here: Audio and video parameters
-
-
Custom metadata
Create a variable object for the custom variables and populate with the data for this media. For example:
code language-js /* Set custom context data */ var customVideoMetadata = { isUserLoggedIn: "false", tvStation: "Sample TV station", programmer: "Sample programmer" };
-
-
Track the intention to start playback
To begin tracking a media session, call
trackSessionStarton the Media Heartbeat instance:code language-js mediaHeartbeat.trackSessionStart(mediaObject, customVideoMetadata);note tip TIP The second value is the custom media metadata object name that you created in step 2. note important IMPORTANT trackSessionStarttracks the user intention of playback, not the beginning of the playback. This API is used to load the data/metadata and to estimate the time-to-start QoS metric (the time duration betweentrackSessionStartandtrackPlay).note note NOTE If you are not using custom metadata, simply send an empty object for the dataargument intrackSessionStart, as shown in the commented out line in the iOS example above. -
Track the actual start of playback
Identify the event from the media player for the beginning of the playback, where the first frame of the media is rendered on the screen, and call
trackPlay:code language-js mediaHeartbeat.trackPlay(); -
Track the completion of playback
Identify the event from the media player for the completion of the playback, where the user has watched the content until the end, and call
trackComplete:code language-js mediaHeartbeat.trackComplete(); -
Track the end of the session
Identify the event from the media player for the unloading/closing of the playback, where the user closes the media and/or the media is completed and has been unloaded, and call
trackSessionEnd:code language-js mediaHeartbeat.trackSessionEnd();note important IMPORTANT trackSessionEndmarks the end of a tracking session. If the session was successfully watched to completion, where the user watched the content until the end, ensure thattrackCompleteis called beforetrackSessionEnd. Any othertrack*API call is ignored aftertrackSessionEnd, except fortrackSessionStartfor a new tracking session. -
Track all possible pause scenarios
Identify the event from the media player for pause and call
trackPause:code language-js mediaHeartbeat.trackPause();Pause Scenarios
Identify any scenario in which the media player will pause and make sure that
trackPauseis properly called. The following scenarios all require that your app calltrackPause():- The user explicitly hits pause in the app.
- The player puts itself into the Pause state.
- (Mobile Apps) - The user puts the application into the background, but you want the app to keep the session open.
- (Mobile Apps) - Any type of system interrupt occurs that causes an application to be backgrounded. For example, the user receives a call, or a pop up from another application occurs, but you want the application to keep the session alive to give the user the opportunity to resume the media from the point of interruption.
-
Identify the event from the player for play and/or resume from pause and call
trackPlay:code language-js mediaHeartbeat.trackPlay();note tip TIP This may be the same event source that was used in Step 4. Ensure that each trackPause()API call is paired with a followingtrackPlay()API call when the playback resumes.
- Tracking scenarios: VOD playback with no ads
- Sample player included with the JavaScript SDK for a complete tracking example.