Adding chartbeat.js to Your Site
An introduction to our analytics code snippet for standard web tracking.
Below is our JavaScript code for standard web tracking, including our recommended configuration variables. 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 UID variable,
_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 [email protected].The domain variable,
_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.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.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 configuration variables guide, up next.
- 2.Creates a
<script>element that starts asynchronously downloading the chartbeat.js tracker fromstatic.chartbeat.com/js/chartbeat.js.
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 Headline Testing and Video Tracking integration guides.
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.
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.
The next article in this series explains how to set the configuration variables included in the snippet above (lines 5–10), as well as other optional variables that may be appropriate for your integration.
Last modified 2yr ago