Adding chartbeat_mab.js to Your Site

An introduction to our code snippet for testing headlines and images on your site. Note that our homepage testing tools are not included in all Chartbeat service plans.

Implementation requirements

Headline and Image Testing are only supported for websites using our tracking library (chartbeat.js or chartbeat_video.js), covered in the website tracking guide for adding Chartbeat tracking to your site.

Our chartbeat_mab.js library is responsible for Chartbeat's headline and image testing functionality on your sites. Our tool makes it easy to get started testing elements on your homepage; simply implement the required JavaScript outlined over the next several pages of this guide and our code takes care of the rest. Your sites' editors can begin using the tool from within our Heads Up Display interface.

There are a few primary requirements for loading mab.js on your site to ensure optimal functionality...

First requirement:

Our testing script, chartbeat_mab.js, should be loaded in the <head> on any page where tests will be conducted. Our default code snippet utilizes the async attribute to load this script asynchronously:

<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

Second requirement:

Prior to chartbeat_mab.js loading, the following configuration variables should already be initialized in your Chartbeat code snippet: • domain • uid • flickerControl • useCanonical & useCanonicalDomain OR path

If your chosen Chartbeat configuration includes the useCanonical and useCanonicalDomain variables to pull your page paths from the canonical URL element in your source code, these variables must be initialized after the rel=canonical element loads in your site's header, and followed by the script tag which loads mab.js. Similarly, our code should load after your page <title> tags near the top of the <head>.

Ideally, mab.js should load as early in the page load sequence as possible, so best practice is to ensure the above elements are loaded near the top of the <head> in this order:

rel=canonical link element loads
Chartbeat snippet loads, initializing the required variables listed above
mab.js is loaded with the async attribute

Third requirement:

Headline and Image Testing rely on a first-party cookie set by our JavaScript, so it is necessary to have first-party cookies enabled for your site. If your site uses our optional noCookies configuration variable set to true to disable Chartbeat's first-party cookies, Headline and Image Testing will not work. See our alternative website integrations page for instructions on how to customize your Chartbeat tracking code to use our noCookies variable in a way that is compatible with homepage testing.

Configuration options

Our JavasScript code can be added to your page templates as one snippet or two separate snippets, both options ensuring that our chartbeat_mab.js library is loaded in the page header (before the closing <head> tag).

One snippet solution

Below is our standard JavaScript code for web tracking and homepage testing functionality, including our recommended configuration variables. The below script tags should be loaded in your site's global header (before the closing <head> tag), after the rel="canonical" link element in your HTML.

<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
        _sf_async_config.domain = 'domain.com'; //CHANGE THIS
        _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.flickerControl = 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.js';
            n.parentNode.insertBefore(e, n);
        }
        loadChartbeat();
     })();
</script>
<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

Two snippet solution

If your site loads our tracking code in the <body>, either by necessity of your tag manager platform or because your data layer is only available to initialize the section/author or subscriber variables later in the page load, you can load our testing code separately in the <head> following the instructions below.

We recommend splitting our code into the following two snippets with the first snippet being implemented directly in your source code, after canonical URLs are defined in your header HTML.

Header snippet

<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
        _sf_async_config.domain = 'domain.com'; //CHANGE THIS
        _sf_async_config.useCanonical = true;
        _sf_async_config.useCanonicalDomain = true;
        _sf_async_config.flickerControl = false;
        /** CONFIGURATION END **/
     })();
</script>
<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

The above code needs to load early in the <head> after canonical URLs are loaded because it is responsible for altering the headlines and images in your homepage template to display test variants to your visitors, so this should happen before your CMS headlines and images become visible to the user to prevent "flicker" (more on flicker and how to prevent it in the next article of this guide).

The below code includes the rest of our tracking snippet, and can be loaded near the top of the <body> , or whenever your data layer is available with the necessary section and author or user subscriber status data.

Body snippet

<script type='text/javascript'>
    (function() {
        /** CONFIGURATION START **/
        var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
        _sf_async_config.sections = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
        _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
        /** 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>

Configuration variables

Headline flicker control on/off

Set this variable to false if your site does not utilize our recommended headline flicker control JavaScript detailed in a subsequent page of this guide. Set this variable to true if your site does utilize our headline flicker control JavaScript.

Example usage:

_sf_async_config.flickerControl = true;

Top storage domain

Use this variable only if your homepage links out to subdomain pages of your site. This variable must be set to the top-level domain of your website in order to run tests on headlines or images that link to articles pages under unique subdomains. For example, if I want to test a headline on the mydomain.com/ homepage, for an article that lives under mysub.domain.com, this variable should be set to mydomain.com in the mysub.domain.com article page Chartbeat code.

Example usage:

_sf_async_config.topStorageDomain = 'mysite.com';

Lazy load image attribute (Image Testing only)

For Chartbeat Image Testing customers: If your site uses custom lazy load attribute names in its image markup outside of data-src and data-srcset (for example, data-img-sm, data-img-lg), you will need to set this variable to list the names of these lazy load attributes so our code can detect and replace those image urls. This variable accepts multiple comma separated string values as shown in the example below.

Example usage:

_sf_async_config.lazyLoadImageAttributes = 'data-img-sm,data-img-md,data-img-lg';

Article block selector (Image Testing only)

For Chartbeat Image Testing customers: This variable must be set if your homepages use custom HTML elements to encapsulate each headline/byline/image link combination in your homepage source code. By default, this variable will be set to article, so if your site uses only <article> tags to encapsulate your headline/image <a> tags, you do not need to include this variable in your Chartbeat code snippet. However, if your site uses any additional tags for different image/headline link positions on your homepage, each of those elements needs to be assigned to this configuration variable separated by commas, as shown in the example below.

Example usage:

_sf_async_config.articleBlockSelector = 'article,section.item,div.top-story';

Next steps

For Image and Headline Testing customers: Read through the next article in this guide to determine Image Testing compatibility with your homepage's image markup formatting:

Image Compatibility

For Headline Testing only customers: Skip ahead to learn about headline flicker, and if necessary, how to prevent it with our optional implementation to prevent flicker, called "flicker control":

Flicker & Flicker Control

PreviousHeadline and Image Testing NextImage Compatibility

Last updated 3 years ago