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
  • Our JavaScript tracking snippet
  • Data collected
  • Next steps

Was this helpful?

  1. Implement Tracking
  2. Standard Websites

Adding chartbeat.js to Your Site

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

PreviousStandard WebsitesNextCustomize Tracking Settings

Last updated 4 months ago

Was this helpful?

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:

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

Sets a list of configuration variables that determine how we track your site. Note that the domain variable must be set correctly to the site name(s) in your Chartbeat account for your traffic data to begin populating in our Real-Time and Historical dashboards. All of the other variables included above are optional but strongly recommended to ensure accurate tracking and full functionality of your Chartbeat tools. More details on each of these variables can be found in our , up next.

Note: For websites that will make use of our Headline Testing and/or Video Tracking integrations, the above snippet will need to be modified. See additional instructions in our and integration guides.

The next article in this series explains how to set the included in the snippet above (lines 5–10), as well as other optional variables that may be appropriate for your integration.

configuration variables guide
Headline Testing
Video Tracking
configuration variables
configuration variables
support@chartbeat.com
UID variable
domain variable