Get up and running with Chartbeat—full implementation guides for all our products.

Implement Video

Introduction

To set up video integration with Chartbeat, you’ll need to follow a few more steps in addition to the Publishing code. We offer plugin and code support for many of the major Online Video Platforms (OVPs). However, if your video player is not supported, you can use a custom integration with our JavaScript SDK. Select your option on the left menu to get started.

Supported OVPs

Brightcove (New Brightcove Player)

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

For the Brightcove Smart Player (Legacy), please refer to documentation here.

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

Implementation Instructions

  1. In the Brightcove VideoCloud console for the player you’re looking to track, navigate to the Plugins module.

  2. In the JavaScript section, add the Chartbeat plugin URL:

    http://static.chartbeat.com/js/chartbeat_video.js
  3. In the Name,Options(JSON) section, enter the name "chartbeat" (all lower-case) for the Name.

  4. In the same section, enter JSON to match your site. You’ll need to configure the uid and domain variables.

    Additional values for sections and authors are optional and only need to be set if your team wants to view videos in sections that are different from those of the pages they are embedded on.

  5. Save and republish the player.

  6. Repeat the above steps for all players you want to track.

Brightcove (Legacy Smart Player)

NOTE: These instructions are for the Brightcove Smart Player from the Legacy Studio.

For the New Brightcove Player available for the Video Cloud or Perform products, please refer to our new documentation here.

To start tracking Brightcove Smart Videos in Chartbeat, you’ll need to install two plug-ins for both Flash and HTML5 instances. If you know you’re only using one type of player, you only need to install the one you are using.

Two Things You Need:

  1. Your Account ID for Chartbeat Publishing

    Your account ID should match the "UID" included in the Chartbeat code, which has been embedded on your website.

  2. The Host Domain for Chartbeat Publishing

    The host domain should match the domain name you currently use for Chartbeat Publishing, e.g. yoursite.com.

Implementation Instructions

  1. Determine the plug-in URLs

    There are two plug-ins that you'll need to enter your Account ID ("UID") and Host Domain for.

    Flash Plug-in

    http://static.chartbeat.com/swf/ChartbeatModule.swf?acctId=#####&hostId=video@domain.com

    JavaScript Plug-in (HTML5)

    http://static.chartbeat.com/js/chartbeat_video.js?uid=#####&domain=video@domain.com
  2. Select your players you want to track within the Brightcove Platform

    Head on over to the Brightcove console (my.brightcove.com), select "Publishing" from the navigation bar, double-click on the player you'd like Chartbeat to track and then select the "Plugins" tab on the left-hand side.

  3. Add the plug-in URLs to the individual players

    Enter both URLs you created in Step 1, click "Add" and it should populate in the list of URLs directly below. Hit "Save Changes" and- boom!- you're ready to go. Repeat Steps 2 and 3 for each player you'd like Chartbeat to track.

  4. Include the playerdomain variable in the regular Chartbeat code

    If you deploy Brightcove players on your site within an iframe, you'll need to add one additional line in the existing Chartbeat script. On the parent page which has the <iframe> tag, include the playerdomain variable within the Chartbeat config code. This is the brightcove domain the player is loaded from:

    _sf_async_config.playerdomain = 'c.brightcove.com';

Checking your Work

You should have two URL plug-ins per video, which will be able to track both Flash and HTML5 renderings that look like this:

Flash Plug-in

http://static.chartbeat.com/swf/ChartbeatModule.swf?acctId=12345&hostId=video@yoursite.com

JavaScript Plug-in (HTML5)

http://static.chartbeat.com/js/chartbeat_video.js?uid=12345&domain=video@yoursite.com

The complete Chartbeat code on the parent page, should resemble:

<script type='text/javascript'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.playerdomain = 'c.brightcove.com';
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

Flowplayer

Please note we only support Flowplayer v.5.4.3+. 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

  1. 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>
  2. 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'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                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

  1. 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'>
  2. 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'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

JW Player

Support for v7+, v6+, and v5+

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

  1. 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"
    });
  2. 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 loads when someone presses "play?"), 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'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

Kaltura

Support for Player v2+

Implementation Instructions

  1. 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'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

Ooyala

Support 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

  1. 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);
            }
        });
    });
  2. 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.

    By default we automatically check your page for videos. This causes problems for many Ooyala deployments, so it must be toggled off.

    _sf_async_config.autoDetect = false;

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.videoType = 'ooyala';
    _sf_async_config.autoDetect = false;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

ThePlatform

Support for v5.5.6+

If you're using thePlatform as your video platform, you'll just need to install a plug-in to start tracking your videos in Chartbeat.

Implementation Instructions

  1. Determine the plug-in URLs

    Replace your Account ID and Host Domain into the plug-in and add the following line into thePlatform's player code.

    HTML5 (JS) Plug-in

    tp:plugin1=“type=tracking|URL=http://static.chartbeat.com/js/chartbeat_video.js|priority=1"

    Flash Plug-in

    tp:plugin1="type=tracking|URL=http://static.chartbeat.com/swf/ChartbeatPDK.swf|acctId=<account_id>|appId=video@<domain.com>|priority=1"

    The Flash plug-in requires your Account Id (which you can find here) and your site’s domain.

Additional Notes:

If your videos are embedded in an iframe on the page, which is common with thePlatform, the iframe is probably hosted on www.theplatform.com. As a result, on the main page itself- not in the iframe- you will need to add the following line in the Chartbeat code’s configuration section:

_sf_async_config.playerdomain = 'player.theplatform.com';

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

  1. 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.

    <script type='text/javascript' src='//www.youtube.com/iframe_api'></script>
  2. 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>
  3. 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'>
var _sf_async_config = {};
/** CONFIGURATION START **/
_sf_async_config.uid = 12345;
_sf_async_config.domain = 'yoursite.com';
_sf_async_config.useCanonical = true;
_sf_async_config.sections = 'section1,section2';
_sf_async_config.authors = 'author1,author2';
/** CONFIGURATION END **/
(function() {
    function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        /** TELL CHARTBEAT TO AUTODETECT YOUTUBE VIDEOS **/
    var _cbv = window._cbv || (window._cbv = []);
    _cbv.push(['autoDetectYouTubeIframes']);
    var oldonload = window.onload;
    window.onload = (typeof window.onload != 'function') ?
        loadChartbeat : function() {
            oldonload();
            loadChartbeat();
        };
})();
</script>

Custom Integration

Javascript Video SDK

The primary task in implementing the JavaScript SDK is to define a JavaScript Class-referred to as a strategy-which interfaces with your native video API to return values measured by the Chartbeat Publishing Video platform. These include values such as video state (playing, stopped, completed, etc.), video duration, video thumbnail, playhead position, and so on.

Reference Files

v5.0 — Last Updated 2/6/2015

simplified_strategy.js is a template for creating a strategy class with no external dependencies. The comments in the code explains what each of the methods in the strategy class need to do.

strategy_interface.js is a Google Closure implementation of the strategy interface. If you’re using Google Closure, it defines all the required methods for you. Using Google Closure is not a requirement if you use the simplified_strategy.js as a basis for your object.

strategy_html_player.js is an example file showing how Chartbeat implemented the video strategy constructor for HTML5 video players.

Implementation Instructions

  1. Push your video strategy to _cbv_strategies

    On each page with embedded video, you will need to push your video strategy constructor—as customized in strategy_interface.js — so that Chartbeat's pinger can use it to watch for video events. For the constructor, “CUSTOM_STRATEGY_CONSTRUCTOR”, you would push the constructor like this:

    window['_cbv_strategies'] = window['_cbv_strategies'] || [];
    window['_cbv_strategies'].push(CUSTOM_STRATEGY_CONSTRUCTOR_NAME);

    As a note, make sure to push your video strategy constructor to _cbv_strategies synchronously, before Chartbeat's pinger (chartbeat_video.js) loads.

  2. Push your video object to _cbv

    Whenever a new video player loads on the page, push the video object to _cbv. This should come after you’ve pushed your video strategy constructor, as in Step 1. For each individual video player, push the video object as below:

    var _cbv = window._cbv || (window._cbv = []); _cbv.push(player);

    Make sure to do this for each player that loads. So if a single page has two separate video players, you’ll need to push twice. However, if the same video player switches to a new video, you do not need to make this push, as the strategy interface should take care of new video loads.

  3. 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 want to minify/obfuscate the code for your strategy JS file, make sure that you do not minify the method names referenced in simplified_strategy.js, as Chartbeat’s pinger looks for those method names specifically.

Checking your Work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    window['_cbv_strategies'] = window['_cbv_strategies'] || [];
    window['_cbv_strategies'].push(MyStrategy);
    var _cbv = window._cbv || (window._cbv = []);
    _cbv.push(MyPlayer);
    var _sf_async_config={};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com ';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2 ';
    _sf_async_config.authors = 'author1,author2 ';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

Iframe Instructions

If you deploy any of your video players in iframes, you’ll need to add one extra line into the configuration section of the existing Chartbeat code.

Implementation Instructions

  1. Add the Chartbeat Video Pinger in the iframe

    In the iframe content page where the player loads, include the Chartbeat Video Pinger (chartbeat_video.js). This embed technique is the same as the standard Chartbeat script, just link to static.chartbeat.com/js/chartbeat_video.js instead of static.chartbeat.com/js/chartbeat.js. The chartbeat_video.js file includes both Publishing and Video tracking capabilities. You can leave out the other optional config variables.

  2. Set the playerdomain variable

  3. On the main page—not within the iframe—add the following line into the existing Chartbeat Publishing code’s configuration section:

    _sf_async_config.playerdomain = '<player domain>';

    As an example: Let's say you have a video link on your homepage, and that link opens an iframe with a video player in it. Also, let's say that video player is hosted on a subdomain, media.yoursite.com. Your Chartbeat Publishing code on the homepage must then include the following line:

    _sf_async_config.playerdomain = 'media.yoursite.com';

Checking your Work

Your Chartbeat code within the iframe should look like:

<script type='text/javascript'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat_video.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

The Chartbeat code on the parent page (outside the iframe) should look like:

<script type='text/javascript'>
    var _sf_async_config = {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = 12345;
    _sf_async_config.domain = 'yoursite.com';
    _sf_async_config.useCanonical = true;
    _sf_async_config.sections = 'section1,section2';
    _sf_async_config.authors = 'author1,author2';
    _sf_async_config.playerdomain = 'media.yoursite.com';
    /** CONFIGURATION END **/
    (function() {
        function loadChartbeat() {
            window._sf_endpt = (new Date()).getTime();
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

API Integrations

Our Video REST APIs give you access to data that makes up the Chartbeat Video Dashboard. The Video API endpoints and all parameters can be found in the API Documentation.

Here are some ways to get in touch.