Google Tag Manager 101 Part 8 - CSS Selector

20/07/2017

This is Part 8 of Google Tag Manager 101. To start at the beginning of the series, click the link below.

The most important page on your website is your home page. For our website, just over 50% of traffic lands on the home page and for some sites that I work on, over 80% of visits start on home.

When a new website is designed, typically multiple people within the company agonise for hours over which areas of the company should receive the most promotion on the home page. They talk about how to feature their content - carousels, promo boxes etc - and about every aspect of the design of the page, the layout, the font, the colours.

Eventually some sort of agreement is reached and the new website is launched with much fanfare. If 17 people used up 300 hours between them discussing the home page then in my experience nobody at all will spend any hours at all analysing the performance of the home page once the website is launched.

So what sort of user actions should you track on the home page? In my opinion, record as many discrete events as you can.

Having Google Tag Manager collecting events such as carousel clicks will give you valuable data on what is working - and more importantly, what isn't working. If the home page displays 6 images with links on a carousel with a 5 second delay between them and the order of the images never changes then clicks will be rare on images 4, 5 and 6. People aren't going to wait for the full cycle of the carousel to complete.

If you do have a carousel for promotions as well as the same item featured on promo tiles, then your website visitors can reach your main promotional pages in 3 different ways from the home page - via a carousel click, via a promo tile click or via the main navigation. By tagging the carousel click and the promo tile as events, you will know which of them was most effective at gathering clicks from the home page.

After the website has been live, you will be able to construct a report showing first click behaviour on the home page and this will enable you to make changes to gain more conversions.

One issue you may find when tagging clicks on tiles is that behaviour can be inconsistent. The tag works fine when someone clicks on the words on the link of the tile, but not when they click on the image or the background.

An example of this is on a local clothing website called Sisters and Co. On their home page, they have many tiles that link to their clothing collections and so how do you know which of those promotional areas are generating most clicks?

The section called "WHAT ARE YOU LOOKING FOR?" has 5 separate tiles linking to different types of collection. What we want to do is send an analytics event whenever one of them is clicked. The event will record that a click was made in that area of the page and the URL that was visited.

Using Google Tag Manager Preview, we are able to see what is recorded for the gtm.click and gtm.linkClick events for a click on the tile image and a click on the tile words. As you see below, only one of the example (gtm.click on the Words) indicates that it is in the "Looking" area of the page. Using gtm.linkClick, there is no way of knowing the area of the page.

gtm.click on the image. gtm.linkClick on the image

gtm.click on the words gtm.linkClick on the words

So what method can we use to "record every click in the Looking area of the page"?

Apologies, but now it is time to get a little more technical. Using Chrome, right click on the Jacket image and Inspect. The code looks like this

Each of the images is in a div with a class of "looking{n}" where {n} is the position on the page (1-5). If you care about knowing when each position is clicked, then you can build a trigger for each image by looking for each div. If all you want to know is that one of the images is clicked then you can move to a higher level div as highlighted. All of the image divs are contained in a div with class "looking-for-con". We can build a trigger for this div as shown below. 

The key is to use "matches CSS selector" and then the text is a dot followed by the name of the div followed by a space and *. So in this case it is

.looking-for-con *

If you follow this process exactly then this trigger will fire every time that area is clicked and you can build a tag to send the event to analytics.

Watch out for the next article and please send comments via the form below or message me on Twitter

Written by Nick Baker