Alternative Site Integrations

This page details alternative options for implementing our tracking snippet to better fit your site's existing model for loading third-party JavaScript.

Using tag managers

We do not currently offer pre-built templates with our standard JavaScript tracking snippet for any tag manager platforms. However, teams that would prefer to use a tag manager to load our code can simply create a custom tag in their chosen platform, following the instructions from page 1 of this guide to load our snippet as early in the page load sequence as possible, ideally in the header.

If you are not able to load our snippet in your site's header as a limitation of your tag manager settings, it is acceptable for sites that are not making use of our Headline Testing functionality to load our full JavaScript snippet in the <body>.

Two snippet solution

For sites that will use our Headline Testing tool, there's a portion of our JavaScript code that needs to load in the <head>. In this case, 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.flickerControl = false;
        _sf_async_config.useCanonical = true;
        _sf_async_config.useCanonicalDomain = true;
        /** 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.

The below code includes the rest of our tracking snippet, and can be loaded via a custom tag 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>

Loading our tag in the `<body>`

We recommend the same configuration as described in the instructions directly above for sites using Headline Testing without a tag manager, where certain required page data like section & author or subscriber data is not available to our JavaScript if it were placed in the <head>. For these sites, we also recommend implementing the above header snippet (containing our Headline Testing JS) separately in the <head> after canonical URLs are loaded. The rest of our code can be called later in the page load sequence, whenever your preferred page data is available.

If your site will not make use of your Headline Testing feature, our full snippet can be called later in the page load sequence, skipping the steps above to split the snippet in two. Note that calling our tracking script later in the page load sequence may cause missed visitor pageviews which start and end prior to page load completion.

As a first stop resource for understanding how Chartbeat tracking complies with GDPR regulations, check out our Data Protection resources page.

Chartbeat does not set third-party cookies. We also do not take any steps to identify specific visitors (for example, we do not do browser fingerprinting or collect device IDs). Chartbeat was designed with privacy in mind, and is a first-party analytics platform. This means that publishers who use our service can set first-party cookies on their sites using Chartbeat code, or they can run in cookieless mode.

Implement cookieless tracking

Customers who would prefer not to use cookies can set an additional configuration variable in their Chartbeat snippet prior to chartbeat.js loading to prevent our JavaScript from using first-party cookies:

_sf_async_config.noCookies = true;

Instead of running our tracking in cookieless mode across your site, we recommend that teams implement conditional logic to prevent Chartbeat cookies only for users that have not yet provided consent to our cookies. Cookies are required for the our Headline and Image Testing tool to work, as well as our Unique Visitors and Visitor Frequency metrics, so using our cookieless mode conditionally— only for users who have not provided consent to cookies— allows your team to use our homepage testing tools and other metrics that rely on cookies for the subset of your website visitors that accept cookies. If your site uses a cookie consent banner which allows users to provide explicit consent by clicking a button to agree, or inexplicit consent by clicking into an additional page of your site, we recommend making use of our cookieless tracking mode as follows:

Hook into your site's unique logic to recognize new un-cookied users to your site, and add conditional logic to your analytics tags that sets our noCookies configuration variable to true for these pageviews only.
As soon as the visitor provides consent by accepting cookies, your custom code should recognize the cookied user and no longer set the noCookies variable in your Chartbeat snippet.
For visitors that deny cookies, your code should continue setting the noCookies = true variable in your Chartbeat snippet for all of these users' subsequent views, until they update their cookie preferences to allow Chartbeat's cookies.

Tip: If you choose to implement the above configuration, also ensure that our headline testing script, chartbeat_mab.js, does not get loaded in the <head> for pageviews where the user has not yet provided consent to cookies. This way, you can still load this code for users who have already provided consent and our Headline Testing tool will still work for this user group.

IP Truncation

Clients in the EU can point traffic to our proxy layer that de-identifies IP addresses within the EU. Please refer to our platform-specific integration instructions for more details:

Legacy code snippet

Some of our partner sites that have been with us for a while are using our previous snippet for basic tracking functionality, included below. The primary differences between our previous recommended code and our current snippet are twofold:

This snippet includes code that delays chartbeat.js from being called until the page has finished loading, on the window.onload or document.ready event. Our new snippet loads chartbeat.js immediately, asynchronously.
We previously recommended loading our snippet near the bottom of the <body>. We've since adjusted our default implementation to load our script early in the <head> to ensure we capture brief user pageviews which end prior to page load completion.

For partners still using this older version of our tracking code, it will still work but we recommend updating to our latest implementation specs for the reasons detailed above.

Legacy code snippet (for reference only)

<script type='text/javascript'>   
    var _sf_async_config = _sf_async_config || {};
    /** CONFIGURATION START **/
    _sf_async_config.uid = #####; //CHANGE THIS
    _sf_async_config.domain = 'domain.com'; //CHANGE THIS
    _sf_async_config.useCanonical = true;
    _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() {
        function loadChartbeat() {
            var e = document.createElement('script');
            e.setAttribute('language', 'javascript');
            e.setAttribute('type', 'text/javascript');
            e.setAttribute('src', '//static.chartbeat.com/js/chartbeat.js');
            document.body.appendChild(e);
        }
        var oldonload = window.onload;
        window.onload = (typeof window.onload != 'function') ?
            loadChartbeat : function() {
                oldonload();
                loadChartbeat();
            };
    })();
</script>

Next steps

Having reviewed all of the previous articles in this guide, identifying the configuration options and tracking methods that best fit your site, you're now ready to add our snippet to your website using our integration QA article (up next) to check your work for completeness.

PreviousUser Subscriber Status NextIntegration QA Steps: Website

Last updated 4 months ago