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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
Headline and Image Testing are only supported for websites using our tracking library (chartbeat.js or chartbeat_video.js), covered in the 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 .
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:
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
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).
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.
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).
Field Name
Value Type
Default Value
Max Length
Example Value
flickerControl
boolean
true
None
false
Example usage:
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:
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:
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:
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":
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 set to true to disable Chartbeat's first-party cookies, Headline and Image Testing will not work. See our for instructions on how to customize your Chartbeat tracking code to use our noCookies variable in a way that is compatible with homepage testing.
Below is our standard JavaScript code for web tracking and homepage testing functionality, including our recommended . 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.
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 or data.
Set this variable to false if your site does not utilize our headline flicker control JavaScript detailed in a . Set this variable to true if your site does utilize our headline testing flicker control JavaScript. Note: If using our image testing flicker control settings, set flickerControl to false.