Table of content

Connect your Dailymotion real-time Player data to your Chartbeat dashboard

Introduction

As a Dailymotion Partner, video content is at the core of your communication, and it is usually paired with editorial content on your webpages. Chartbeat enables you to gather — on one single interface — the data from your video and written content, giving you a global view of how your audience is engaging with your video and editorial content together, across platforms, channels and devices.

In this guide, you’ll learn how to connect your Dailymotion Player data to your Chartbeat analytics dashboard in 5 steps.

Prerequisites

Before you start integrating Chartbeat’s video tracker, make sure you meet the following requirements:

  • You have a Dailymotion Partner account.
  • Your Dailymotion content is embedded on your domain(s) using the Player Library Script of our Web SDK. They collect information about your Player states and events which will be used by Chartbeat’s tracking script.
  • You have a Chartbeat subscription that includes the premium Video Dashboard feature (not included in standard Chartbeat packages). If you haven’t subscribed to the feature yet, please reach out to your Chartbeat Customer Success Manager.
  • You already have Chartbeat integrated on your domain(s) to track your editorial content: this guide aims at adapting your existing integration to add video tracking. If it’s not the case, we recommend you to first add Chartbeat tracker for editorial content on your domain(s) following their step-by-step guide, and then come back here to add the Dailymotion video tracking.

5-step integration guide

As a Chartbeat user, you are already using their software to track how your editorial content performs on your website(s). As a Dailymotion Partner, you also want to monitor how your video content performs along with the rest of your content. Adding the video extension to your existing integration can be done easily by modifying your code slightly.

Our API allows you to access the state and events of your embedded Players, which enables you to know when your audience presses pause, play, skip forward etc. All we have to do now is passing these data from Dailymotion to Chartbeat analytics dashboard. To do so, follow the guide!

1. Add DMStrategy_v1.js script in your webpage code

DMStrategy_v1.js is a client-side script that enables Dailymotion Player API to return its events values into measurable data that Chartbeat interface understands.

You can find DMStrategy_v1.js below and in our Dailymotion Codepen library:

Important:

DMStrategy_v1.js script must be hosted directly on your domain to be used, and must be loaded before the dailymotion.createPlayer() method in your integration

// Load your Player Library Script (customized with your Player ID)
<script src="https://geo.dailymotion.com/libs/player/{Player ID}.js"></script>

// Load DMStrategy_v1.js script
<script src="DMStrategy_v1.js"></script>

2. Connect Dailymotion and Chartbeat strategies

Chartbeat will use _cbv_strategies to get Dailymotion Player events — like play, pause, progress etc.

        // Connect Dailymotion and Chartbeat strategies
        window['_cbv_strategies'] = window['_cbv_strategies'] || [];
        window['_cbv_strategies'].push(DMStrategy);

3. Create a Player and connect it to Chartbeat

Create your Dailymotion Player with the dailymotion.createPlayer() method and push it to Chartbeat’s _cbv to start tracking it.

Each new Dailymotion Player created and loaded on your webpage needs to be pushed to _cbv so that its data can be passed to Chartbeat.
This means:

  • If you have two separate video Players on the same page, you will need to push each of them to _cbv
  • If you have only one video Player playing several videos, you only need to push once
// Create your Dailymotion Player
dailymotion.createPlayer("my-dailymotion-player", {
    video: "videoID", // Add your video ID
}).then((player) => {

// Add the event listeners you want to track - for example
            .then((player) => {
                player.on(dailymotion.events.VIDEO_PAUSE, displayEvent.bind(this,dailymotion.events.VIDEO_PAUSE) );
// Find the whole list of events you can listen to on https://developers.dailymotion.com/sdk/player-sdk/web/#events

// Push Player to Chartbeat _cbv
   window._cbv  = window._cbv || [];
   window._cbv.push(player);
}

4. Edit your _sf_async_config to avoid tracking ads

To optimise the data you track, add the following parameter in your existing _sf_async_config section to prevent videos that aren’t your content — like ads — from being tracked:

/** CONFIGURATION START **/
_sf_async_config.uid = YOUR_ACCOUNT_ID;
_sf_async_config.domain = 'yoursite.com ';
_sf_async_config.useCanonical = true;
_sf_async_config.useCanonicalDomain = true;
_sf_async_config.sections = 'section1,section2 ';
_sf_async_config.authors = 'author1,author2 ';
// Add this config param to avoid tracking video data unrelated to your content (like ads)
_sf_async_config.autoDetect = false;
/** CONFIGURATION END **/

5. Switch from standard tracker to video tracker

Chartbeat provides two different trackers:

  • chartbeat.js their standard editorial tracker
  • chartbeat_video.js that includes the same functionalities as chartbeat.js, with the addition of video tracking

    In order for Chartbeat to collect your editorial data and your video events, you need to call chartbeat_video.js instead of chartbeat.js in your existing loadChartbeat() method.
function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
// Replace chartbeat.js with chartbeat_video.js so that you can track editorial content AND video events
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
     })();

Check your integration

In the end, your Chartbeat integration with your Dailymotion Player should look like this on your webpage:

<!DOCTYPE html>
<html>
<body>

// Add a div placeholder where you want the Player(s) to be loaded and
assign an id to the container. This id will be used in the createPlayer() method further
    <div id="my-dailymotion-player" ></div>

// Load your Player Library Script (customized with your Player ID)
    <script src="https://geo.dailymotion.com/libs/player/{Player ID}.js"></script>

// Load DMStrategy_v1.js script
    <script src="DMStrategy_v1.js"></script>

// Connect Dailymotion and Chartbeat strategies
    <script>
        window['_cbv_strategies'] = window['_cbv_strategies'] || [];
        window['_cbv_strategies'].push(DMStrategy);

// Create your Dailymotion Player
        dailymotion.createPlayer("my-dailymotion-player", {
                video: "VideoID", // Add your video ID
            })

// Add the event listeners you want to track - for example
            .then((player) => {
                player.on(dailymotion.events.VIDEO_PAUSE, displayEvent.bind(this,dailymotion.events.VIDEO_PAUSE) );
// Find the whole list of events you can listen to on https://developers.dailymotion.com/sdk/player-sdk/web/#events

// Push Player to Chartbeat _cbv
                var _cbv = window._cbv || (window._cbv = []); _cbv.push(player);
            })
    </script>

    <script>
        var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
/** CONFIGURATION START **/
_sf_async_config.uid = YOUR_ACCOUNT_ID;
_sf_async_config.domain = 'yoursite.com ';
_sf_async_config.useCanonical = true;
_sf_async_config.useCanonicalDomain = true;
_sf_async_config.sections = 'section1,section2 ';
_sf_async_config.authors = 'author1,author2 ';
// Add this config param to avoid tracking video data unrelated to your content (like ads)
_sf_async_config.autoDetect = false;
/** CONFIGURATION END **/
function loadChartbeat() {
var e = document.createElement('script');
var n = document.getElementsByTagName('script')[0];
e.type = 'text/javascript';
e.async = true;
// Replace chartbeat.js with chartbeat_video.js so that you can track editorial content AND video events
e.src = '//static.chartbeat.com/js/chartbeat_video.js';
n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    </script>
</body>
</html>

As a final check, you can have a look at Chartbeat’s checklist to make sure your video integration is correctly populating your Video Dashboard.