How-to: Install Chartbeat analytics on a Squarespace site

If you’re using Squarespace’s Business or Commerce plan and want to use Chartbeat’s website tracking on your site, you can leverage the code-injection feature in Squarespace to be up and running in under 5 minutes. 

Follow the simple guide below to get started tracking your Squarespace site. (Don’t have a Chartbeat account yet? Reach out to snak@chartbeat.com for more information.)

Gather necessary information 

In order to add Chartbeat’s code to your Squarespace site, you’ll need two pieces of information about your Chartbeat account.

Domain

This value should be set to the Chartbeat Site id (site name) for your website. This is usually the root domain without http or 'www.' prepended. (So this often looks like mysite.com or mysite.net.)

UID

This is a numerical id value associated with your Chartbeat account, three to six digits in length. If you are integrating tracking into a Squarespace site and need to know your UID, you can reach out to snak@chartbeat.com.

Add tracking code to your site

Step 1 - Log into Squarespace

Log into your Squarespace account, and select Edit for the site you want to track with Chartbeat. 

Step 2 - Open Code Injection

Open the Home Menu, click Settings, click Advanced, and then click Code Injection.

Step 2 - Add Chartbeat’s code

Under the Footer section, paste in the following code, which will add Chartbeat’s tracking capabilities to every page of your Squarespace-hosted site (assign the uid and domain configuration variables to your site's unique account id and Site id):

<script type='text/javascript'>
 
var cbMetadata = document.querySelectorAll(".blog-item-category, .blog-item-tag"); 
var cbMetadataList = [window.location.href.split('/')[3]]; 
var cbSections = (function(){ 
    for(item of cbMetadata){ 
        cbMetadataList.push(item.text); 
    } 
    return cbMetadataList 
})().join(', ');
 
    (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 = cbSections; 
        _sf_async_config.author = document.querySelector('[itemprop=author]') ? document.querySelector('[itemprop=author]').content : 'No Author'; 
        /** 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>

Step 3 - Hit Save

Hit Save, and you should begin seeing your data flow into the dashboard of your active Chartbeat account.

For more information on Code Injection, please reference Squarespace’s documentation.