Articles in this section

See more

How-to: Integrate Chartbeat on your website

  • Updated

Follow the steps below to add Chartbeat tracking to your site. 

icon_neutral.png
You must be set up with a Chartbeat account to access our tools and view your site's engagement data. Interested in a demo? Learn more

 

Chartbeat tracking for desktop and mobile web

The below script tags should be loaded in the global header of your site (before the closing <head> tag), after the rel="canonical" element is loaded in your HTML.

 

<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 = 'YourDomain.com'; //CHANGE THIS
 _sf_async_config.flickerControl = false;
 _sf_async_config.useCanonical = true;
 _sf_async_config.useCanonicalDomain = 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 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>
<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

 

  1. The UID variable needs to be assigned to your unique Chartbeat account ID, available from your Account Executive or Customer Success Manager. The same UID can be used across multiple sites.
  2. The domain variable should be assigned to your site name (usually the root domain). If implementing for more than one site, the domain variable in this code should also be updated to the root domain of each unique site.
  3. We suggest reading our section & author implementation instructions for details on how to send a page's section and author metadata to our servers.
  4. If your website makes use of dynamic page change, infinite scroll, or Single Page App architecture, you will need to implement our virtualPage function for Chartbeat to properly track these pageviews.

 

 Additional Integrations 

Google AMP: If your organization publishes content using Google's AMP framework, your team will need to use our separate AMP integration to track visitors on those pages.

 

Subscriber Status: If your site allows users to register for user accounts or become full subscribers, we suggest making use of our Subscriber Engagement tracking implementation, detailed here on our support site. (Optional)

Related articles