Supported OVP Integrations

Third-party video player platforms with plug-and-play integrations currently supported by Chartbeat.

The below instructions refer to Chartbeat code already installed on your website (see our tracking for standard websites guide) because our Video engagement tracking add-on integration is frequently made by existing customers who are upgrading their Chartbeat service. If your team has not yet implemented our standard tracking snippet code for websites and instead plans to enable website and video player tracking simultaneously, simply apply any code adjustment recommendations found below to the new Chartbeat code template for your site.

Brightcove

Note: These instructions are for the New Brightcove Player available for the Video Cloud or Perform products.

To start tracking Brightcove Player videos, you’ll need to add the Chartbeat Video Pinger in your Brightcove Console.

Implementation Instructions

Across all pages on your site, change the chartbeat.js script currently being run to chartbeat_video.js
In the Brightcove VideoCloud console for the player you're looking to track, navigate to the Plugins module.

In the JavaScript section, add the Chartbeat plugin URL:

https://static.chartbeat.com/js/chartbeat_brightcove_plugin.js

In the Name,Options(JSON) section, enter the name "chartbeat" (all lower-case) for the Name.
Save and republish the player.
Repeat the above steps for all players you want to track.

Flowplayer

Note: Support is for Flowplayer v.5.4.3+ only. Flowplayer Flash is unsupported. Please see instructions for setting up a custom integration for Flowplayer Flash compatibility.

If you're using Flowplayer as your video platform, you'll need to include the "title" and "poster" attributes, and change the Chartbeat Pinger to the Chartbeat Video Pinger.

Implementation Instructions

Include the "title" and "poster" attributes in the HTML/DOM

These attributes populate the title and thumbnail images in the Chartbeat Video Dashboard. The "title" attribute must be added to the parent <div>, while the "poster" attribute can be in either the <video> tag or the parent <div>. So a sample video tag might look like the following:

<div data-swf='//releases.flowplayer.org/5.4.3/flowplayer.swf' class='flowplayer no-toggle' data-ratio='0.416' data-engine='flash' title='Video Title'>
    <video poster='http://yoursite.com/thumbnail.jpg'>
        <source src='http://yoursite.com/videos/movie.mp4' type='video/ mp4'>
    </video>
</div>

The other option looks like the following:

<div data-swf='//releases.flowplayer.org/5.4.3/flowplayer.swf' class='flowplayer no-toggle' data-ratio='0.416' data-engine='flash' title='Video Title' poster='http://yoursite.com/thumbnail.jpg'>
    <video>
        <source src='http://yoursite.com/videos/video.mp4' type='video/mp4'>
    </video>
</div>

Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You'll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    (function() {
        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 = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        /** CONFIGURATION END **/
        function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    })();
</script>

HTML5

If you use the HTML5 video element to embed your videos, you'll need to add "title" and "poster" attributes to the HTML/DOM, and change the Chartbeat Pinger to the Chartbeat Video Pinger.

Implementation Instructions

Include the "title" and "poster" attributes in the HTML/DOM
These attributes populate the title and thumbnail images in the Chartbeat Video Dashboard. You'll need to add the "title" and "poster" attributes to the <video> tag. For example:
```
<video src='yourmovie.mp4' title='Video Title' poster='http://yoursite.com/thumbnail.jpg'>
```
Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You'll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    (function() {
        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 = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        /** CONFIGURATION END **/
        function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    })();
</script>

JW Player

Note: Support is for v5, v6, v7, and v8 only.

If you're using JW Player as your video platform, you'll need to change the Chartbeat Pinger to the Chartbeat Video Pinger and include Title and Thumbnail attributes in your code.

Implementation Instructions

Include the JW Player attributes "title" and "image" in each video

This will populate the titles and thumbnails in your Video Dashboard. Your code should look similar to:

jwplayer("myElement").setup({
    file: "http://www.yoursite.com/video/movie.mp4",
    title: "JW Video Example"
    image: "http://www.yoursite.com/image/thumbnail.jpg"
});

Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You'll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```

Additional Notes

If you load your videos after the page has loaded (e.g. video only loads when someone presses the play button), you'll need to manually push the video object to Chartbeat to start tracking. Just call the lines below immediately after your video loads:

window._cbv = window._cbv || [];
window._cbv.push(jwplayer);

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    (function() {
        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 = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        /** CONFIGURATION END **/
        function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    })();
</script>

Kaltura

Note: Support is for Player v2+.

Implementation Instructions

Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You'll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    (function() {
        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 = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        /** CONFIGURATION END **/
        function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    })();
</script>

Ooyala

Note: Support is for v3+ and v2+.

If you're using Ooyala as your video platform, you'll just need to modify the Ooyala embed code and the existing Chartbeat code.

Implementation Instructions

Modify the Ooyala embed code

The standard embed code for Ooyala does not expose the player to the Chartbeat pinger, so in order to start tracking video performance, you just need two lines of code inside the 'onCreate' event provided by Ooyala. Find the following code:

OO.ready(function() {
    OO.Player.create('element_id', 'account_id', {
        onCreate: function(player) {
            var _cbv = window._cbv || (window._cbv = []);
            _cbv.push(player);
        }
    });
});

Modify the Chartbeat code
Within the current Chartbeat code on the page, you’ll need to make two adjustments.
Part A: Add the video type line to the configuration section
```
_sf_async_config.videoType = 'ooyala';
```
Part B: Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You'll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```
Part C: Add _sf_async_config.autoDetect=false; to your _sf_async_config object setup.
```
_sf_async_config.autoDetect = false;
```

YouTube

To start tracking YouTube Videos (using the new <iframe> embed style that supports both Flash and HTML5 videos), you'll need to use the YouTube API and modify the current Chartbeat code.

Implementation Instructions

Link to the YouTube JavaScript API
Add this script, which grants access to the YouTube API, to the <head> section for any page with video. This must be inserted before the chartbeat_video.js is included.
```
<script type='text/javascript' src='//www.youtube.com/iframe_api'></script>
```
Enable JavaScript API access to your YouTube embeds
Chartbeat’s code needs to communicate with the YouTube videos to track them, so you’ll need to enable JavaScript access. This is easily done by adding a single query parameter (“enablejsapi=1”) to your YouTube embed URL. For example:
```
<iframe width="420" height="315" src=“//www.youtube.com/embed/_OBlgSz8sSM?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
```
Note that in the above code uses a single query parameter. If your URL already has other options set, you can add the enablejsapi parameter after the others by using an ampersand ("&") as a separator. For example:
```
<iframe width="420" height="315" src=“//www.youtube.com/embed/_OBlgSz8sSM?autohide=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
```
Push the YouTube Video to Chartbeat and Update the Pinger
Within the current Chartbeat code on the page, you’ll need to make two adjustments.
Part A: Change chartbeat.js to chartbeat_video.js
In order to use the Video Pinger, you must modify the Chartbeat code already on your site. You’ll want to switch the Chartbeat code to load chartbeat_video.js instead of chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities.
```
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
```
Part B: Add these lines to tell Chartbeat to autodetect the YouTube iframes
```
var _cbv = window._cbv || (window._cbv = []);_cbv.push(['autoDetectYouTubeIframes']);
```

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
  (function() {
      var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
      /** CONFIGURATION START **/
      _sf_async_config.uid = CHARTBEAT_ACCOUNT_ID;
      _sf_async_config.domain = 'yoursite.com';
      _sf_async_config.useCanonical = true;
      _sf_async_config.useCanonicalDomain = true;
      _sf_async_config.sections = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
      _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
      /** CONFIGURATION END **/
      function loadChartbeat() {
            var e = document.createElement('script');
            var n = document.getElementsByTagName('script')[0];
            e.type = 'text/javascript';
            e.async = true;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
          }
          /** TELL CHARTBEAT TO AUTODETECT YOUTUBE VIDEOS **/
      var _cbv = window._cbv || (window._cbv = []);
      _cbv.push(['autoDetectYouTubeIframes']);
      loadChartbeat();
  })();
</script>

Special Instructions

If the YouTube video embed is not present on the page load or is loaded later on a later event, you need to push the video object (event.target, in this case) to _cbv once a reference to the iframe is available:.

// Once we have a reference to the YouTube video's iframe element...
        new window.YT.Player(iframe, {
          'events': {'onReady': function(event) {
          window._cbv.push(event.target);
          }}
        });

If you are declaring custom events in event listeners on your YouTube Player video objects, you can preserve your events in those listeners by performing the _cbv.push in the onPlayerReady function of your video object constructor, along with other code you want to fire on that listener:
```
function onPlayerReady(event) {
        var window._cbv = window._cbv || (window._cbv = []);
        _cbv.push(event.target);
        event.target.playVideo();
      }
```

Next steps

If your team uses a web player not listed in our plug-and-play integration list above, the next article in this guide details instructions for using our custom player SDK to build your own player integration. If you've already found the install steps for your supported player platform in the list above, skip ahead to configure video tracking settings.

PreviousAdding chartbeat_video.js to Your Site NextCustom Player Integration SDK

Last updated 3 years ago