Configure Video Tracking Settings

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

Similar to the configuration variables listed in our integration guide for standard web tracking, 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 player object is pushed to _cbv 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 Ooyala integration.

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 integration QA instructions article for best practice advice to test your integration.