How to fix Squarespace Index page tracking problems
In the past month or so I have encountered a problem of under reporting of page views in Google Analytics in certain Squarespace templates, such as Flatiron and Avenue.
The video below illustrates the problem and demonstrates a jQuery script for the Squarespace Flatiron template that tracks the missing page views.
The source code for the enhanced tracking script appears later in the article.
Featured website: Piqueshow
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?
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.
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.