Get blog post category from Squarespace to Google Analytics: DOM method in GTM / Solution# 1

Getting Squarespace to work with Google Tag Manager is kind of a pain. Instead of using the async GA code into code injection setting, I opted for some search and found this handy JQuery script from Chris Eisenbraun that works amazingly well with GTM: Link to GTM script for SquareSpace.

Ok, so now that I have GTM up and running on this blog, the next question I had was related to which blog categories work well compared to others. After reaching out to SquareSpace support, was informed that dataLayer method isn't available in SS yet....hhhmmm.

@akhantweets We passed this along. We can't guarantee anything, but we really appreciate feedback.
— Squarespace Help (@SquarespaceHelp) May 26, 2016

This presents a challenge on how to get this done. In this post, I've used a video tip from MeasureSchool to capture the blog category by using the DOM Element variable in GTM.

Main steps in implementing this:

1. Finding out the name of the DOM element that has the blog post category.

Let's use a previous blog post from this blog as an example and scroll to the end where the post category [google analytics] is mentioned.

http://analyticslog.com/blog/2016/5/15/deeper-integration-of-search-console-and-google-analytics

Right click on the category [google analytics] and choose 'Inspect Element'. Hover over the class and you'll see the blog category highlighted.

Go to the Console tab in dev mode and type 'document.querySelectorAll("span.categories")' Enter. Drop down and you should see the category.

2. Now that we know the DOM element that captures the blog category, we go back to GTM and create a variable that captures this particular DOM Element.

3. Create a GTM Trigger that we can use in our events.

Since we need to capture this as soon as a page is loaded and not on click, we will keep it as a Page View trigger with the Regex = .* . This would capture all the categories.

4. Create GTM event based on this trigger.

The Event Category is labelled as Blog Category while the Action and Label is dynamic.

Event Action = {{Blog Category}} captures the value in DOM element variable while Event Label = {{Page Path}} captures the blog post link except the analyticslog.com part.

If a blog post does not have category assigned to it, Event Action will show as null. This is because Event Action is a required field.

First, we test it in Debug mode to be sure this is working. Open up an article and with DOM Ready left tab, go to Variables. This will now show the blog post category. Go back into GA and we now have the values in as events.