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.
GDPR & CCPA compliance
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 cookie-less mode.
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;
Important: Note that we only use first party cookies, and leaving cookies enabled is required for our Headline Testing tool to work, as well as our Unique Visitors and Visitor Frequency metrics.
Instead of running our tracking in cookie-less mode across your site, we recommend that teams consider using the below popular workaround implementations to ensure optimal functionality of your Chartbeat tools. 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 using one of these two options:
Hook into your site's unique logic to recognize new un-cookied users to your site, and add conditional logic to your analytics tags to prevent our code from loading for these users until they (A) click the button in your banner to provide consent, or (B) provide consent by clicking into an additional page of your site to continue using it. Note that this will cause missed pageviews for users who do not provide consent on their initial page visit. 
Similar to the implementation above, but instead of preventing the Chartbeat snippet from loading for users that have not provided consent yet, add conditional logic that sets our noCookies configuration variable to true for these pageviews only. As soon as the visitor provides consent by viewing an additional page of your site, your custom code should recognize the cookied user and no longer set the noCookies variable in your Chartbeat snippet.
Tip: if you choose to implement either of the above configurations, 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.
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. 
User Subscriber Status
Integration QA Steps: Website
Last updated 3 months ago