Adding chartbeat.js to Your Site

An introduction to our analytics code snippet for standard web tracking.

PreviousStandard Websites NextCustomize Tracking Settings

Last updated 5 months ago

Was this helpful?

Adding chartbeat.js to Your Site

An introduction to our analytics code snippet for standard web tracking.

Our JavaScript tracking snippet

Below is our JavaScript code for standard web tracking, 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 , _sf_async_config.uid, needs to be assigned to your unique Chartbeat account ID, available from your Account Executive, Customer Success Manager, or the Technical Solutions team at .

The , _sf_async_config.domain, should be assigned to your site ID as it appears in your Chartbeat account — usually your website's root domain. If implementing for more than one domain, the domain variable in this code should also be updated to the site id of each unique site.

<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 TO YOUR ACCOUNT ID
        _sf_async_config.domain = 'domain.com'; //CHANGE THIS TO YOUR SITE ID
        _sf_async_config.useCanonical = true;
        _sf_async_config.useCanonicalDomain = true;
        _sf_async_config.flickerControl = false;
        _sf_async_config.sections = ''; //SET PAGE SECTION(S)
        _sf_async_config.authors = ''; //SET PAGE AUTHOR(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>

The above code serves two primary purposes:

Creates a <script> element that starts asynchronously downloading the chartbeat.js tracker from static.chartbeat.com/js/chartbeat.js.

Data collected

When you add this code to your website, we'll begin tracking all visitors to your site with each new page that is loaded. Immediately after chartbeat.js loads on a given page, it will begin making requests to ping.chartbeat.net every 15 seconds. These "pings" are HTTP requests consisting of field and value pairs encoded as a query string. The first ping of a given page session registers a pageview in Chartbeat, and the subsequent pings carry real-time data about the user's active session on your site so we can tell you precisely when each visitor arrives, how long they engage with your page, and when they make their exit. From this data, Chartbeat can infer information such as:

The total time a user spends actively engaged with your page.
What page the visitor arrived from.
What internal links were clicked.
The geographic location of the user.
The device type of the user (mobile/desktop/tablet).
How far the user scrolls down the page.
Page title, URL, and max height in pixels.

Next steps

For a basic implementation and tracking, the above snippet can suffice, but we strongly encourage reviewing each of the articles within this guide prior to implementing our code so you can fine-tune your Chartbeat tracking settings for each of your properties.