LogoLogo
Help CenterStatusContact
  • Chartbeat Documentation
  • Implement Tracking
    • Standard Websites
      • Adding chartbeat.js to Your Site
      • Customize Tracking Settings
      • Tracking Virtual Page Change
      • User Subscriber Status
      • Alternative Site Integrations
      • Integration QA Steps: Website
      • Additional Page Metadata
    • Google AMP
      • Chartbeat Code for AMP
      • AMP Configuration Variables
      • Alternative AMP Integration
      • Integration QA Steps: AMP
    • Mobile App SDKs
      • Intro to Mobile App Tracking
      • Android SDK
      • iOS SDK
      • Integration QA Steps: Mobile Apps
  • Feature Integrations
    • Headline and Image Testing
      • Adding chartbeat_mab.js to Your Site
      • Image Compatibility
      • Flicker & Flicker Control
      • mab.js Specifications
      • Integration QA Steps: Headline and Image Testing
    • Video Engagement
      • Adding chartbeat_video.js to Your Site
      • Supported OVP Integrations
      • Custom Player Integration SDK
      • Configure Video Tracking Settings
      • Integration QA: Video Tracking
    • Conversion
      • Adding subscriptions.js to Your Site
      • Conversion Events
      • Integration QA Steps: Conversion
      • Supported Conversion Flows
  • API Docs
    • Real-Time API
      • Getting Started with our Real-Time API
      • Traffic Data
      • Video Engagement Data
    • Historical API
      • Getting Started with our Historical API
      • One-time Queries
      • Recurring Queries
      • Metrics, Dimensions, and Filters
    • Headline Testing API
      • Getting Started with our Headline Testing API
      • Raw Data
      • Summary Report
      • Variant Report
    • Conversion API
      • Getting Started with our Conversion API
      • Top Articles
    • Data Lab API
      • Getting Started with Data Lab API
  • Help Center
  • Contact Support
  • Datastream Docs
  • Back to Chartbeat.com
Powered by GitBook
On this page
  • Using tag managers
  • Two snippet solution
  • Loading our tag in the <body>
  • GDPR & CCPA compliance
  • Implement cookieless tracking
  • IP Truncation
  • Legacy code snippet
  • Next steps

Was this helpful?

  1. Implement Tracking
  2. Standard Websites

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.

PreviousUser Subscriber StatusNextIntegration QA Steps: Website

Last updated 10 months ago

Was this helpful?

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

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>

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

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

  1. 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.

  2. 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.

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 or data.

We recommend the same configuration as described in the instructions 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 (containing our Headline Testing JS) separately in the <head> after canonical URLs are loaded. can be called later in the page load sequence, whenever your preferred page data is available.

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

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 on their sites using Chartbeat code, or they can run in .

Mobile SDKs - and

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 are twofold:

page 1
Data Protection resources page
current snippet
header snippet
directly above
The rest of our code
user subscriber status
first-party cookies
section & author
cookieless mode
Standard web
Google AMP
Android
iOS