Adding chartbeat_video.js to Your Site

An introduction to our video engagement tracking code for real-time video analytics for your website. Note that this is an add-on feature, not included in all Chartbeat service plans.

Implementation requirements: Video

Video Engagement tracking is an add-on feature, designed to supplement our website engagement analytics with video analytics to help your teams understand who’s watching your videos, which ones are keeping audience attention, and what you can do to pair articles and videos to boost engagement and consistently grow your viewership.

So the first requirement is to integrate our standard webpage engagement tracking for your site in addition to integrating Chartbeat with the main video player on your site because it's not possible to use our Video Dashboard as a standalone product. If you haven't already, see our integration guide for standard websites to understand our basic tracking code first, then make adjustments to that code based on the instructions found in this guide to integrate with your chosen web player.

The second primary requirement is to load our tracker with support for video analytics, chartbeat_video.js, instead of our standard tracker, chartbeat.js. chartbeat_video.js contains all of the same functionality as our standard web analytics script, chartbeat.js, but it also adds support for video tracking. So in most cases, chartbeat_video.js should replace chartbeat.js in the code snippet detailed in our standard website integration guide instead of loading both scripts on your site. Only if your video player is loaded in an iframe will both trackers will need to be used in your integration, detailed later in this guide.

Here's what our standard web tracking snippet looks like with chartbeat.js replaced with chartbeat_video.js to add support for video engagement tracking (see line 18):

<script type='text/javascript'>
    (function() {
        /** CONFIGURATION START **/
        var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
        _sf_async_config.uid = #####; //CHANGE THIS TO YOUR ACCOUNT ID
        _sf_async_config.domain = 'domain.com'; //CHANGE THIS TO YOUR SITE ID
        _sf_async_config.useCanonical = true;
        _sf_async_config.useCanonicalDomain = true;
        _sf_async_config.sections = ''; //SET PAGE SECTION(S)
        _sf_async_config.authors = ''; //SET PAGE AUTHOR(S)
        _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;
            e.src = '//static.chartbeat.com/js/chartbeat_video.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
     })();
</script>

A third requirement is to use our additional iframe configuration, found here, for videos embedded within iframes.

Supported OVPs vs custom player integration

The next step to integrate Chartbeat tracking for your player is to determine whether your website player platform for proprietary content is a third-party OVP (Online Video Platform) that our team has already created a plug-and-play integration for, or whether your player will require its own custom integration by your video developer team using our custom video SDK. Our list of supported players is as follows:

• Brightcove

• Flowplayer

• JW Player

• Kaltura

• Ooyala

• YouTube

Note that for some of these third-party web player platforms, compatibility of our integration is only guaranteed for certain player versions, detailed in the next page of this guide where you will find integration instructions for each player platform above.

Limitations

Currently, Chartbeat Video tracking is only supported for our standard website tracking integration. Though we offer unique visitor tracking integrations for other platforms like AMP and native apps, we cannot provide video engagement analytics for those separate platform integrations at this time. If you are a current customer and this functionality is important to your team, we'd like to hear from you! Shoot us a note at [e-mail].

Next steps

If your organization uses one of the player platforms listed above to host owned video content on your website, find additional integration instructions for the player (as well as player version compatibility details) on the next article of this guide.

If your organization uses a player not included in our list of supported OVPs above, skip ahead to learn about our custom player integration SDK.