LogoLogo
Help CenterStatusContact
  • Chartbeat Documentation
  • Implement Tracking
    • Standard Websites
      • Adding chartbeat.js to Your Site
      • Customize Tracking Settings
      • Tracking Virtual Page Change
      • User Subscriber Status
      • Alternative Site Integrations
      • Integration QA Steps: Website
      • Additional Page Metadata
    • Google AMP
      • Chartbeat Code for AMP
      • AMP Configuration Variables
      • Alternative AMP Integration
      • Integration QA Steps: AMP
    • Mobile App SDKs
      • Intro to Mobile App Tracking
      • Android SDK
      • iOS SDK
      • Integration QA Steps: Mobile Apps
  • Feature Integrations
    • Headline and Image Testing
      • Adding chartbeat_mab.js to Your Site
      • Image Compatibility
      • Flicker & Flicker Control
      • mab.js Specifications
      • Integration QA Steps: Headline and Image Testing
    • Video Engagement
      • Adding chartbeat_video.js to Your Site
      • Supported OVP Integrations
      • Custom Player Integration SDK
      • Configure Video Tracking Settings
      • Integration QA: Video Tracking
    • Conversion
      • Adding subscriptions.js to Your Site
      • Conversion Events
      • Integration QA Steps: Conversion
      • Supported Conversion Flows
  • API Docs
    • Real-Time API
      • Getting Started with our Real-Time API
      • Traffic Data
      • Video Engagement Data
    • Historical API
      • Getting Started with our Historical API
      • One-time Queries
      • Recurring Queries
      • Metrics, Dimensions, and Filters
    • Headline Testing API
      • Getting Started with our Headline Testing API
      • Raw Data
      • Summary Report
      • Variant Report
    • Conversion API
      • Getting Started with our Conversion API
      • Top Articles
    • Data Lab API
      • Getting Started with Data Lab API
  • Help Center
  • Contact Support
  • Datastream Docs
  • Back to Chartbeat.com
Powered by GitBook
On this page
  • Included files in the SDK
  • Implementation Instructions
  • Step 1: Push your video strategy to _cbv_strategies
  • Step 2: Push your video object to _cbv
  • Step 3: Change chartbeat.js to chartbeat_video.js
  • Checking your work
  • Next steps

Was this helpful?

  1. Feature Integrations
  2. Video Engagement

Custom Player Integration SDK

Manually integrate your video player with our custom player SDK.

PreviousSupported OVP IntegrationsNextConfigure Video Tracking Settings

Last updated 4 years ago

Was this helpful?

If your video player is not listed among our , you may use our Video SDK to create a custom integration. The primary task 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.

Included files in the SDK

  • 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 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

Step 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);

Note: Make sure to push your video strategy constructor to _cbv_strategies synchronously, before Chartbeat's pinger (chartbeat_video.js) loads.

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

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

Checking your work

Your complete Chartbeat code will look something like this:

<script type='text/javascript'>
    (function() {
        window['_cbv_strategies'] = window['_cbv_strategies'] || [];
        window['_cbv_strategies'].push(MyStrategy);
        var _cbv = window._cbv || (window._cbv = []);
        _cbv.push(MyPlayer);
        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 ';
        /** 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>

Next steps

Review our JavaScript configuration variables and add them to the Chartbeat code snippet for your website if they apply to your video player implementation.

Supported OVPs
Google Closure
6KB
chartbeat_js_video_sdk.zip
archive
Download the Chartbeat Video SDK (JavaScript)