How to fix Squarespace Index page tracking problems

27 Feb

The problem - why clicking an Index preview doesn't trigger a page view in Google Analytics

Many Squarespace templates feature Index page structures. An index page acts like a holder for multiple subpages.

If you view the index page you see preview images for the subpages. Click on a preview image and the url changes and the subpage is displayed.

So we’re on a new page, right?

WRONG.

In fact, clicking a preview image triggers an Ajax call to pull the content of the subpage into the index. It also changes the url so that the page can be bookmarked by a user and they will return to the page with the relevant subpage in view.

The Ajax approach makes for a slick user interaction, but it does cause problems when it comes to tracking pageviews.

Loading the subpage with Ajax doesn’t trigger the Google Analytics tracking script. This means that there is nothing recorded in Google Analytics to tell us that the viewer looked at the subpage.

In fact, a visitor could look at every featured item in an index but Google would record only one page view.

I don’t know how you feel about this, but I want to know which content my viewers are looking at, so I wrote a script that detects when dynamic content is loaded into an Index page and triggers a virtual page view in Google Analytics.

The Solution - tracking the missing Squarespace page views with a jQuery script

My solution was to write a jQuery script that monitors Index pages to detect when a visitor clicks one of the subpage previews. The script then grabs the subpage url and title and uses this information to push a virtual page view into Google Analytics.

Here's the code for the Squarespace Flatiron Template. If you already have jQuery installed on your website you won't need the first <script> section.

NB. Code samples on this site may be reused subject to certain conditions.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
// Put our initial page url into a variable       
var initialhref = window.location.href;

// Run the foo function every 1.5s
window.setInterval(foo, 1500);

function foo(){

// Put the current url into a variable
var currenthref = window.location.href;

//If the current url isn't the same as the initial url we need to track a virtual page view
if ( currenthref != initialhref ) {

// The next 2 lines store the folder & page name of the current url in a variable
    var arrsplitvpv =  currenthref.split('http://www.mydomain.com/');
    var trackurl = arrsplitvpv[1];
    
// The next looks to see which of the index pages is active and grabs its page title. This code is template specific to the Flatiron template. Other templates will use different selectors. 
    var pagetitle = $("#grid .sqs-dynamic-data-active .project-title h2").text();

// Now push the virtual page view over to Google Analytics  
    _gaq.push(['_trackPageview', '/vpv/' + trackurl, pagetitle ]);

// Finally, reset the initialhref to currenthref so that we can detect any further url changes 
    initialhref = currenthref;
    };      
}

</script>

The results - hidden page views are now being tracked

The tracking script does exactly what I hoped. I can now see which content is popular in my Squarespace Index pages and, because I'm tracking Index page activity as /vpv/ virtual page views I can tell the difference between content views on the Index page versus the standalone pages that make up the Index.

Bounce rate goes down. Because we can see the previously hidden activity the Bounce rate drops. What you thought were single page visitors who didn’t like your site are actually engaged users who are interacting with your index content.
Average time on site goes up. Session length is calculated to the last measured interaction with the site, so tracking the virtual page views records session length and user engagement more accurately.
Pageviews go up. All of a sudden you’re seeing the user activity that was not previously recorded.
You feel happier knowing that people are actually engaging with your site.