BRIGHTCOVE

SMART
PLAYER
TRACKING
VIA
HEARTBEAT
 Document Revision Log

Versi Date Author Change

on Descriptk
V1.0 20/09/20 Rajdeep Initial Draft
16 Singh
 Table of Contents

1. Introduction
Why Brightcove?
Why Heartbeat?
2. Prerequisites For Tracking
3. Implementation Steps
Brightcove Config JS
Player Delegate JS
Page level coding
Correct loading order
4. Sample Project

Introduction

Brightcove is a one of the popular video platform

that offers solutions for publishing and distribution of
digital media and Video heartbeat is a new data
collection service provided by Adobe that collects
and aggregates video metrics. During video
playback, frequent "heartbeat" calls are sent to this
service to measure time played. These heartbeat
calls are sent every 10 seconds, which results in
granular video engagement metrics and more
accurate video fallout reports.
The primary purpose of this document is to provide
you step by step instructions for implementing
Heartbeat tracking for Brightcove players. It will help
content development team and digital marketing
team to implement and understand the Brightcove
Tracking logic.
Note - This document is only for those websites
which are using appMeasurement or H code
(JavaScript) for analytics tracking (not for DTM or
other tag management systems).
Why BrightCove:
Brightcove is a one of the most popular video
platform that offers solutions for publishing and
distribution of digital media. Brightcove solutions
improve the user experience by offering customized
features including video branding and streaming to
mobile devices.
BrightCove is known for various features like it is
lightweight, flexible in terms of adding features and
functionality.
Click here for more details.
Why Heartbeat:
Video heartbeat is a new data collection service
provided by Adobe that collects and aggregates
video metrics. During video playback, frequent
"heartbeat" calls are sent to this service to measure
time played. These heartbeat calls are sent every 10
seconds, which results in granular video engagement
metrics and more accurate video fallout reports.
When a video or video ad is played, a single server
call is sent to your Analytics data collection server
with the video/ad name, player name, channel, and
any additional custom variables that you want to
track for that video/ad. During playback,
"heartbeats" are sent at regular intervals to the
heartbeat data collection service to track time
played. After the video/ad is completed and/or
abandoned, the heartbeat service calculates time-
spent metrics and then sends the data to Analytics.
Click here for more details.
Prerequisites:

1. Installation of jQuery library on your site:

The Video Heartbeat solution currently relies on
jQuery for extending the delegates, using the
$.extend() method found in jQuery 1.1.4 or higher.
You can also refer this attached copy of jQuery JS.

jquery.min.zip

2. Video Heartbeat Library:

The latest libraries, documentation and sample
players can also be found on the Adobe GitHub Video
Heartbeat. Attached is the Video Heartbeat lib only.

VideoHeartbeat.min.zip

3. Adobe Marketing Cloud Prerequisites:

The solution requires the following to be in place:
Video Heartbeat stream contract for analytics.
Regional Data Collection (RDC) analytics
servers (omtrdc.net not 2o7.net)
Marketing Cloud Organization ID
(####@Adobe) Visitor ID API JavaScript.
 appMeasurement or H code version H27 or
higher.

Implementation Steps:

1. Heartbeat Config JS:

The Heartbeat Config javascript file, which combines
all the declarations, objects and extensions into one
generic helper file. It simplifies the integration
steps by providing a single file with all the Heartbeat
library extensions. The Heartbeat Bridge file should
be loaded after the Heartbeat library but before the
player delegate file.
Note This JS is generic and can be used with most
of the players.

HeartbeatConfig.zip

2. BrightCove Player Delegate JS:

The Brightcove Player Delegate contains the
updated Heartbeat tracking methods. The
Heartbeat Config JS, map the video player events to
the Heartbeat methods and populate the Video Info
object with the data for the current video asset.
Note This JS is Player specific and is different for
every player.
 BrightcoveDelegate.zip

3. Page code implementation:

Page code implementation is done by content team
only. Page code some what looks like this:
<script language="JavaScript" type="text/javascript"
src="http://admin.brightcove.com/js/BrightcoveExperienc
es.js">
</script>
<object id="123" class="BrightcoveExperience">

<param name="bgcolor" value="#FFFFFF" />

<param name="width" value="700" />
<param name="height" value="480" />
<param name="playerID" value="default" />
<param name="playerKey"
value="AQ~~,AAAAAG8QjX0~,4h36XO97G3ryQVr
kYLAgoBiXDwbHt5ED" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true"
/>
<param name="includeAPI" value="true" />
<param name="templateLoadHandler"
value="myTemplateLoaded" />
<param name="@videoPlayer"
value="3566384091001" />
 </object>

<script
type="text/javascript">brightcove.createExperiences();

</script>

Content development team do take care of this

part of code. Every single parameter like playerID
or playerkey is populated by content
development team only.
If you want more information regarding these
parameters then you can go to follow this link.
In above code, you must have noticed that there is
call for BrightcoveExperience JS. This JS is
responsible for loading the player and running the
video within the web page.
You can create a free trial account in Brightcove
and explore it for better understanding of how
videos get uploaded to Brightcove cloud and how
you create player within etc.

4.For Analytics team:

The only parameters which are important for digital
marketers are:

I. <param name="includeAPI" value="true" />

 includeAPI: This is required to be true
in order to use the Brightcove
Players API. By default is false.

II. <param name="myTemplateLoaded"

value="myTemplateLoaded"/>
templateLoadHandler: The name of a
user-defined JavaScript function to be
automatically invoked when the player
loads. This provides an entry point for the
Smart Player API.

5. Correct Load Order of Scripts:

The load order of the JavaScript files is critical to
having a successful implementation. Please ensure
that you have implemented the correct load order of
the scripts otherwise you may end up in a situation
where video track events doesnt work. The correct
load order of the scripts should be:
jQuery
VisitorAPI
appMeasurement
Video Heartbeat Library
Heartbeat Config
BrightCove Player Delegate
Sample Project:
I have attached the Sample Project. Here is the attached
ZIP

BrightCove-Heartbeat.zip

Note Please do run this project on localhost server only. Do not

test it with local static pages stored on PC, doing so may not give
you expected tracking.