5 Steps To Tag Your Own Website With Custom Event Tracking

20 minutes

Learn how to evaluate your Shopify store and add new event tracking via Google Tag Manager in less than an hour to unlock amazing insights.

Brad Redding

Brad Redding is the Founder & CEO of Elevar. Specializing in analytics, tracking, GTM, and conversion optimization.

Let’s now go through an evaluation process to take to your own site, allowing you to extract insights on what users are doing onsite, and applying this to your own conversion optimization strategy.

Brad Redding:

Now, let’s walk through the process of taking all of the knowledge that we have on the power of events, how triggers work, how we can utilize variables inside of our events, and put that into use on your own site. I’m going to walk through a five step process that you can take to evaluate your current site, the questions that you want to answer, tagging your site, QAing it, and publishing it, so you can start extracting insights on what users are doing on your site and apply that to your own conversion optimization strategy.

Step number one. First, we need to build the list of events, or ultimately questions that you are trying to answer. For example, we’re looking at  Allbirds here, a Shopify store. Let’s say that you’re running Allbirds and you wanted to know a little bit more about how users are interacting with their navigation. Are they using the different sub navigations? Are they using your image call-outs? Let’s look at the product page. What are users doing on the product page? Let’s say you’re evaluating a size chart, or you wanted to redesign the size chart. How many people are clicking and interacting with a size chart? Are people that utilize the size chart, are they converting better or worse than others? How about your swatches or what percentage of users that view product pages are interacting with your image gallery carousel?

These are all questions for your own site that you’ll want to start asking. We all have unique features and characteristics about our site. You really have to dig in when you’re thinking about how to optimize your own site, how to move that needle of going just a few percentage points on conversion rate. What are some of the things, some ideas that you’ve had that you’ve wanted to change? What are some features that you’ve wanted to remove from the site because you hate them, you think that it’s not helping users convert? Create those lists of questions. And there’s really no right or wrong way to create a list of events that you’d want to track, but here’s a very basic example. We’re just creating a list of navigation. I want to understand how many people are clicking on my navigation. Not only that, but what are they clicking on? Is conversion rate between men and women and all the sub categories underneath, how do the conversion rates change between those? Are there some navigation items that no one’s clicking on that we could potentially just remove because it’s a distraction?

Looking at the product page, a couple of examples here. The image gallery, right click, right and left image gallery click. Are people interacting with a size chart? This is a very, very basic example, whether you’re using a spreadsheet or you keep it all in your head, that you can take, take this process and apply it to when you’re starting to think about those questions and answering them in your head. Write them down, come up with that process so we can start tagging.

As we’ve seen before inside of Google Analytics, there is an event action, an event category, which is, again, our big bucket. We have our big bucket for event categories, and then ultimately our event label, which we stated our default is for page URL. Before we can actually start tagging our site, let’s say that you had somebody to tag your site months ago or years ago, or you’re coming into a new account and there are numerous events inside of Google Analytics. You might want to just pause for a minute and not start tagging right away because some elements might be tagged already. There are a few different options or ways that you can take to help evaluate a site to see is it tagged already? Are there events firing? There’s three ways you can actually look at this process. So, this is our second step of what is tagged on our site today.

The easiest place to start is going into Google Analytics and into our events, and we can start looking at our event actions. This is an okay way to look at it. If you weren’t the one that created these event actions previously, they may not make sense. If you’ve jumped into a new Google Analytics account before, and you’re trying to decipher what the event actions, the naming conventions mean that someone else created, most of the time, if you’re like me, I have no idea and it’s really hard to break that apart, and understand what an event action that someone created means to them versus me.

The second option that we can take to understand what is currently tagged on our site today is actually just putting Google Tag Manager into preview mode. You can put Google Tag Manager into preview mode and then we can click through the site, and ultimately we can see what triggers are firing, as we’ve looked at previously in the previous videos on the debug panel that’ll show the different events that are firing for us. 

The third way, which is really, I would say, the most foolproof way is using another Chrome extension, which is the Google Analytics Debugger. This requires minimal knowledge, technical knowledge, even though it’s a little bit scary when you open this up for the first time. But the GA Debugger is a little tool that will track any hit that’s sent to Google Analytics. Not only is this very helpful for evaluating what is tagged today, but it’s also helpful when you’re debugging other Google Analytics issues, or just trying to understand how the data is coming out from your potential variables that you’ve applied to tags.

In this case, we have our console open, our GA Debugger extension is on right here, and I’m just going to click on a few elements here. In this example, let’s click on the women drop down and you’ll see a bunch of things fired down here. And if that interaction that I took triggered an event, you’ll actually see, you can actually see the event action, event category, event label. You can see the location, the analytics ID that it was sent to. This is the easiest way that I find to understand what is tagged on a current site. Now, if you have thousands of pages, then this might not be the best way. But if there are a few key features or a few key areas that you want to determine, if it’s tagged already, this is the easiest way to do it. And as long as it’s going to the analytics account that you’re set up for, then all of your questions on what’s tagged should be answered for you.

Now let’s look at an example of something that’s not tagged and how that would look. We have our review stars here blow the price. I’ll just click on this and you’ll see, we do not have an event that fired. This a very basic example, if my two questions were: do I have an event tagged for people clicking on navigation, and do I have an event tracking people that click on review stars? Yes, to navigation, no, to the review stars. Again, those are three ways that you can understand how and what is tagged on your site today.

Step three, let’s look at the event builder that is going to simplify the process for you to go through and create click and visibility based tags. The event builder that you see here, we have three different trigger types that we can create. We have a click, a visibility and a page view. I’m going to show a few examples of the click and visibility tags that we can create, and that really should cover 90% of the tracking that you might want to add to your site. As I select the trigger here, you can see my mouse now has a little overview on the site. And if we wanted to track how many people were clicking on the size chart, then what I can do is simply hover my mouse over the size chart. Double click it, you’ll see our CSS selector is automatically grabbed for that, and now we can go through and complete my event name, event category, event action, and event label.

Let’s walk through one more example here. Let’s actually look at…if you notice the CSS selector here is still the selector from the size chart. And now let’s say we wanted to track how many people are actually clicking on the review stars. I’m just going to hover my mouse over here, grab that element, you’ll see the CSS selector updated. Now, at this point, if I wanted to create the event, GA event, view stars click, and we’ll select our event category of product page, event action, review stars click. Leave our event label, and now we can save an event. One other thing to call out here in the event builder is, as you can see, we had the different triggers, the CSS selector is automatically grabbed for you. I’m filling out the event name, so the event name, our event category, event action, event label. This is really, if we look at the tag inside of Google Tag Manager, this is what it looks like inside of Google Tag Manager. And ultimately it’s sending data into this report within Google Analytics.

This is automatically creating that trigger for you as well. And there are a few options in here that you can use to help simplify. If you wanted to tag the review clicks across all product pages, but you wanted to be sure it didn’t fire on potentially other collection pages, if you had review stars. You can actually set a rule here, instead of having the trigger on all pages, we can do specific pages only, and this accepts a rayjects pattern, which I’ll just put products here. We want this particular event to fire on all of our product pages, so we’ll save our event.

And now let’s go through an example of a visibility tag. We talked through a few different examples of navigation and the product page, click based ones. But as you can see on the desktop view, and more so on mobile, Allbirds has quite a bit of content here on their site to really try to give that user the full experience of the product. And they have this really great area here, the benefits of wool loungers, and these are cool icons. They’re talking through some of the benefits and how they really try to pitch that to the customer, but none of these are clickable. I can’t click on the machine washable or any of these to understand how it works. But I want to understand if this, and if users that ultimately see and potentially digest the benefits of the loungers, is that helping their conversion? Does that segment of users convert more than people who don’t scroll all the way down on the page to view this?

This example, we’ll do a select trigger of visibility, and I’m just going to hover over this element and we can see the PDP benefits selector was automatically captured. Do GA event, PDP benefit visible as our event category, product page, event action, PDP if it visible. Mind my spelling. Event label, leave as is, and now we’ll save event. At this point, we have two tags that I’ve created. You’ll see these have not been in board yet. So, now I’m going to go through and import these events to Google Tag Manager. We can see our progress of the tags and triggers that I’ve imported up in the top right. Once we see our two tags have been imported here, let’s just pop over to our Google Tag Manager account. You can see this is our workspace that we’re connected to. Let’s just refresh. And now we can see the two tags and triggers have been automatically created.

Let’s take a look at the review stars, since we set a custom trigger on this. We have a review stars click event. You can see all the data is automatically filled out. By default, we set all tags to a non interaction head to true. We’re not impacting bounce rates. We can see our Google Analytics ID that we configured. And now let’s look at the trigger, the trigger, we have our click element matches our CSS selector and the way that this is created as we’re nesting down. So, we’re grabbing anything that might be nested underneath a parent element. And you’ll see, we have our page URL matches rayjects of products. It’s all done automatically for you. It’s ready to go.

Now we’ll just look at the visibility trigger. Do we have our PDP benefit visible? This event’s been created. Here’s our trigger. Element visibility. This is all completed for you. 

I do want to go back and just restate what we’ve talked about in a few previous videos of our event label. So, the reason why we always recommend applying page URL to the event label, or somewhere in your event category action label, is for a few reasons. One let’s look at our event action report, just example report. And this is pulling main navigation clicks, and we can see all of our different main navigation clicks here. And each one of these has conversion rates and revenue, etc., that are associated to that. But let’s say we wanted to understand what pages, the shop by designer click, what pages are driving the most navigation clicks. We can add our secondary dimension of page. Great. Now we have our event action, and now we have the page. But you can see we lost all of our conversion data. Let’s try going to our pages report. We have our pages report and you’ll notice one big difference here, when you’re looking at the page report, you’ll see the explorer here. You have the events, site usage and that’s it. And our standard report, you’ll see we have an event, site usage and e-commerce. Our event actions that we’re sending to Analytics, these are session based events, we can attach conversion revenue, etc. Our pages are not the same hit type. And we can’t actually attach revenue or conversion rate to our page hits.

And we can see this, if you look at landing pages versus just your page report in Google Analytics. Landing pages, you can have conversion rate. Your general page report, you do not have conversion rate, you have to rely on page value. If we’re not sending any values with our hits, which is pretty common, then trying to understand what pages are driving the most clicks to that navigation element that we talked about really is impossible, unless you are applying that page URL into the event label field. It’s something that’s easily overlooked, and especially if you get that question or you’re asking yourself, “I want to know how many people are clicking on this particular navigation item on this page and what’s the conversion rate for that?” Very important that inside your tag, that you maintain the page URL being sent as an event label.

Step four. Let’s say you’ve gone through, you’ve built your list of events that you want to track here. Looking at the spreadsheet, you filled this out, then you’ve gone through and you’ve evaluated what’s tagged on your site by using the GA Debugger Chrome extension. You understand how to use the event builder, you’ve configured your container and set your Google Analytics tracking ID. So, step four is actually going through the process on a page by page basis, whether it’s your product pages, your collection pages, your homepage. Just step through the process on a page by page basis and create all of your tags at once. You can see by using the Chrome extension here, you can make this process a very quick one, where you don’t have to be going back and forth between Google Tag Manager and the site. You can jump into your collection page here. You can start tagging your different elements, save your events, and then when you’re ready have all of your events here that you can import in bulk and they’ll all be created for you.

Step five. This is the easy part. We have all of our tags created inside of Google Tag Manager. Now we can put this into preview mode. We can go through with GTM debugger enabled on the front end, and we can validate by just clicking through the elements that these tags are firing. And you can actually use the GA Debugger again, as well, if you wanted to go through, test your tags with your GA Debugger enabled. With Allbirds, we don’t have access to their GTM account, so I can’t show the GTM debugger enabled on their site. But hopefully from the other trainings, you recall how that works. But you can see here, I just clicked on navigation and we’ll be able to ultimately validate that the event actions are firing.

So, that’s the five step process of getting you started to go through and tag your site. Again, really, as I mentioned previously, it’s not necessarily the act of creating the tags that’s the most difficult process. It’s thinking about what questions do you want to answer and how are you going to apply those answers to your conversion optimization strategy? Because if you see a feature or something that you have on your site today that’s getting a lot of interaction, but it has a significantly lower conversion rate, then test removing it or test replacing it with something else or move it around on the page.

Google Tag Manager Lessons: