Adding chartbeat_mab.js to Your Site

An introduction to our headline testing code snippet for testing headlines on your site. Note that this is a Premium feature, not included in all Chartbeat service plans.

Implementation requirements

Headline Testing is a Premium feature, and is 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 testing functionality on your sites. Our tool makes it easy to get started testing headlines on your site; simply implement the required JavaScript outlined below 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 Headline 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 uidflickerControluseCanonical & 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.

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:

  1. rel=canonical link element loads

  2. Chartbeat snippet loads, initializing the required variables listed above

  3. mab.js is loaded with the async attribute

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 headline 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 headline testing code separately in the <head> following these instructions.

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 headline text in your homepage template to display test variant headlines to your visitors, so this should happen before your CMS headlines become visible to the user to prevent headline "flicker".

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

Our default integration options described above include the flickerControl variable set to false. The topStorageDomain variable is only required if your homepage editors will need to test headlines to articles under unique subdomains different from the homepage.

Field Name

Description

Example Input

flickerControl

This variable can be set to false to prevent chartbeat_mab.js from briefly hiding the <body> element of your website. This variable should only be set to true if your site utilizes our additional flicker control JavaScript snippet, detailed in the next article of this guide.

false

topStorageDomain

This variable must be set to the top-level domain of your website in order to run tests on homepage headlines that link to articles 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.

mysite.com

Next steps

Read through the next article to learn about headline flicker, and if necessary, how to prevent it with our optional implementation to prevent flicker, called "flicker control".