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
  • Disable auto-tracking of all video players
  • Set video type to Ooyala
  • Define video sections
  • Track videos in an iframe
  • Additional iframe instructions
  • Next steps

Was this helpful?

  1. Feature Integrations
  2. Video Engagement

Configure Video Tracking Settings

Use our JavaScript configuration variables to fine-tune your video tracking settings.

PreviousCustom Player Integration SDKNextIntegration QA: Video Tracking

Last updated 4 years ago

Was this helpful?

Similar to the configuration variables listed in our , review these variables to determine if they are needed for your integration.

Disable auto-tracking of all video players

This variable can be set to false to prevent our video tracker from automatically tracking all <video> elements on a page. We recommend this setting for all video tracking integrations where your in order to prevent additional video elements (ad units for example) from being detected and tracked automatically by chartbeat_video.js.

Field Name

Value Type

Default Value

Max Length

Example Value

autoDetect

boolean

true

N/A

false

Example usage:

_sf_async_config.autoDetect = false;

Set video type to Ooyala

Use this variable only if your implementation makes use of our plug-and-play .

Field Name

Value Type

Default Value

Max Length

Example Value

videoType

text

None

None

ooyala

Example usage:

_sf_async_config.videoType = 'ooyala';

Define video sections

Use this variable only if your team prefers to pass a page's section(s) data to the Video Dashboard as the section values associated for videos on that page. This variable is not recommended for most integrations.

Field Name

Value Type

Default Value

Max Length

Example Value

videoPageGroups

boolean

false

N/A

true

Example usage:

_sf_async_config.videoPageGroups = true;

Track videos in an iframe

This variable is required for our video tracker to properly identify videos embedded within iframes. It should be assigned to the full domain name, including subdomain, of the site your iframe embedded video file is hosted on.

Field Name

Value Type

Default Value

Max Length

Example Value

playerdomain

text

None

None

player.site.com

Example usage:

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

Additional iframe instructions

If you deploy your video player in an iframe on your website pages, you will need to (A) load chartbeat_video.js within the iframe, and (B) load chartbeat.js on the parent page with the playerdomain variable set to the full subdomain of your iframe embedded video content.

Step 1: Add chartbeat_video.js in the iframe

In the iframe content page where the player loads, include the Chartbeat Video tracker like so:

<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';
        /** 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>

Step 2: Set the playerdomain variable

On the main page—not within the iframe—add the following line into the existing Chartbeat code 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'>
    (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';
        /** 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>

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

<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)
        _sf_async_config.playerdomain = 'media.yoursite.com'; //CHANGE THIS TO YOUR DOMAIN
        /** 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.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
    })();
</script>

Next steps

Review our article for best practice advice to test your integration.

integration QA instructions
integration guide for standard web tracking
player object is pushed to _cbv
Ooyala integration