One of the most powerful features of Google Analytics is the ability to add Custom Dimensions and Metrics into your existing Google Analytics data.
This can be very powerful. TNW reported using as many as 59 custom dimensions and metrics to better understand the impact of ad blockers, syndication, the differences in behaviour between signed in users and new users, and so on and so on.
Custom Dimensions can obviously add a great deal of depth for publishers, but they can also be very powerful for other types of businesses too.
The problem you’ll often encounter is a situation where a technical change is months away, and you need the data now. Fortunately, Google Tag Manager has a feature under User Defined Variables that allows you to extract data from HTML Elements in your webpages. This can be useful for things like:
- A count of reviews on a product page
- The number of product items on a category page
- Whether a product is a sale item or not
And so on.
In this example, I’ll be showing you how to add stock status as a custom dimension in a retailer’s Google Analytics setup.
The challenge with this particular website was – like so many companies – a lack of resource to get a code change anytime soon. The data we needed wasn’t available in the site’s Data Layer, so the quickest solution was to set up a User Defined Variable to return the text of an HTML element and pass that to GA as a Custom Dimension.
This isn’t the perfect way to solve the problem – scraping the DOM is inherently risky, since changes to a site’s front-end can break your tracking. You’re far better off working from a Data Layer which has been structured according to business goals, and which is managed by stakeholders from across the different areas of the business. In our case, however, front-end changes were unlikely and the data was needed immediately.
Set Up Your User Defined Variable
We want to grab the stock status for a product from this website’s product pages. Those of you who use Woocommerce might see some familiar markup in here:
Our stock status information is contained like so:
<p class="stock in-stock">In stock and ready for dispatch
The solution looks a little like this.
In GTM, head to “Variables”, and click “NEW” under “User Defined Variables”.
Give your variable a name (I named mine “Stock Status”). Then, choose DOM Element as the variable type and CSS Selector as the Selection Method.
This will work:
But here’s slight curveball! An out-of-stock message is rendered with a different class value:
<p class="stock out-of-stock">Out of stock</p>
Luckily, you can combine multiple CSS classes in a single User Defined Variable using a comma separator. In this case, using a comma separator says create a data object from HTML elements with either of these classes.
You can call for this variable in a GTM tag using double curly brackets like this:
Create a Custom Dimension in GA
At this stage you need to head to Google Analytics and create a hit-level Custom Dimension.
Here’s a useful how-to from Tom over at Moz: How to Measure Performance with Custom Dimensions in Google Analytics [Tutorial].
If you’re not sure how, here’s a helpful video:
Fire a Custom Dimension Tag in GTM
To fire a custom dimension via GTM, head to your Universal Analytics tracking tag. Expand “Custom Dimensions” under More Settings, and enter the index number and value of the dimension you’d like to set.
This is the All Pages report with my new Stock Status Custom Dimension selected:
Get some expert advice
As I mentioned before, you really should be getting your developers to construct a Data Layer rather than scraping your front-end. You should also have a proper data strategy, and really spend time thinking about the measurements in GA that could make a genuine impact on your business decision making.
I use Google Analytics on a needs / must basis, and while I can do some pretty cool stuff, it’s our Measurement team headed up by Tom Bennet at Builtvisible that you really should be talking to.