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.
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...
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>
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 pathIf 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: - 1.
rel=canonicallink element loads - 2.Chartbeat snippet loads, initializing the required variables listed above
- 3.mab.js is loaded with the
asyncattribute
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.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).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>
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.
<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.<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>
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.Field Name | Value Type | Default Value | Max Length | Example Value |
flickerControl | boolean | true | None | false |
Example usage:
_sf_async_config.flickerControl = true;
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.Field Name | Value Type | Default Value | Max Length | Example Value |
topStorageDomain | text | None | None | mysite.com |
Example usage:
_sf_async_config.topStorageDomain = 'mysite.com';
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.Field Name | Value Type | Default Value | Max Length | Example Value |
lazyLoadImageAttributes | text | None | None | data-img-sm |
Example usage:
_sf_async_config.lazyLoadImageAttributes = 'data-img-sm,data-img-md,data-img-lg';
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.Field Name | Value Type | Default Value | Max Length | Example Value |
articleBlockSelector | text | article | None | section.item |
Example usage:
_sf_async_config.articleBlockSelector = 'article,section.item,div.top-story';
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:
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":
Last modified 1yr ago