In this guide, you’ll learn how to write your own event tracking implementation plan. Yes, actually write the code and instructions that you can pass on to your developer to implement or even implement yourself.
Analytics is truly a case of garbage in, garbage out.
If you don’t have an event tracking set up, you won’t know much about what your users are doing on your website or mobile app. That means you’ll struggle to make the kinds of decisions that can grow your business.
If you can’t trust your tracking setup, you can’t trust your data. If you can’t trust your data, you can’t make decisions. Or worse, you’ll make the wrong decisions.
Analytics tools were traditionally used by statisticians or developers. Many of the platforms are not too far removed from writing code yourself. Some of the more advanced platforms, like Mode Analytics, actually do require you to write code.
When you’re a non-technical user, finding the data you need is just too hard. Even if you’re lucky enough to have an analyst on your team or in your company, it’s like going to a car mechanic and trying to imitate that noise you heard your car making.
Analytics is like a foreign language and you don’t even know the right way to ask for what you need.
It doesn’t help that as B2B software sold primarily to the numerically gifted, well, I guess it’s no surprise that the platforms tend to look ugly.
Urchin Tracking Software – the precursor to Google Analytics.
Like anything else that’s ugly and complicated, it gets ignored or pushed to the end of the list.
But you can’t do that. Analytics is too important.
Here are some real-world examples where analytics has helped me grow one of the 70+ businesses I’ve worked with:
I couldn’t have done any of the above without a solid analytics tracking setup. Data is the lifeblood of any business that wants to grow.
Because we know how frustrating event tracking can be, we documented the best possible way to deal with it. And this guide has quickly become the most invaluable resource we have.
Now, we’re sharing it with you.
Download a free PDF version of our Event Tracking Setup Guide!
⇒ Download Event Tracking Setup Guide ⇐
Let’s start with the basics – what’s event tracking, what to track, and why. If you’re a more advanced analyst who already knows this stuff, feel free to skip straight to the code implementation.
Event tracking is following what a user does on your website. This provides you with valuable insight into every single step of your prospect and if there are any obstacles on their way to finalize their process.
So, if you don’t have event tracking parameters set up properly, you’ll miss on that data, thus struggling to make decisions that can grow your business.
Back in the old days of the web, if the user wanted to do something, anything at all, they had to load a new web page. Adding a product to your shopping cart? New web page. Purchasing a product? New web page. Signing up to an email list? New web page.
All of the analytics providers that grew up in this era were built on this premise; they recorded ‘page views’. To see how many purchases or email signups they got, they’d just simply check how many people visited the page that came after those actions, the ‘confirmation page’.
This no longer works for most businesses.
You can add a product to the cart on Walmart.com without going to the cart confirmation page. You can sign up for a newsletter on Men’s Health without redirecting too. Sites with Stripe integration even allow you to pay for goods without reloading the page. And on mobile, it’s a whole different story: mobile-first analytics platforms like Mixpanel don’t even record page views, they record ‘events’.
An event shown on analytics is any interaction occurring on a website or mobile app that is triggered by a user’s action. This includes a whole bunch of things from clicking a button to signing up for a newsletter to buying a product. Even page views themselves are events!
There are a few common hits that Google Analytics track:
You can call your events and variables whatever you want. However, please remember that this is a Garbage In, Garbage Out situation, just like we discussed with UTM parameters. Misspellings and mistakes can’t be corrected afterward; your data for that time will be forever corrupted. If you don’t name your events in a useful way, you’ll struggle to pull the right types of reports, you might miss data or overinflate it.
Internally at Ladder, we try to stick to this naming convention:
Note: If you’re tracking an eCommerce transaction, you can leave this blank. Use the Revenue in your Ecommerce reports to see how much action is worth.
Note: Parameters from eventCategory, eventAction, eventLabel (optional, but recommended), and eventValue (optional) will be displayed in your reports. That’s why a consistent naming is a key here.
So, it looks like this:
dataLayer.push({
'eventCategory' : value_for_Event_Category,
'eventAction' : value_for_Event_Action,
'eventLabel' : value_for_Event_Label,
'eventValue' : value_for_Event_Value,
'event' : 'EventName'
});
For example, if you fire one signup event as:
dataLayer.push({
'eventCategory' : ‘Registration’,
'eventAction' : ‘Complete’,
'eventLabel' : ‘Homepage form’,
'event' : 'RegistrationEvent'
});
And a different one as:
dataLayer.push({
'eventCategory' : ‘Signup’,
'eventAction' : ‘Submit’,
'eventLabel' : ‘landing page’,
'event' : 'SignupEvent'
});
You’ll have to remember to include both ‘Submit’ and ‘Complete’ actions in your weekly signups report. You might have used ‘submit’ for your Contact Us form, which isn’t signup and would inflate your numbers. As your marketing gets more complex and you have team members come and go, this knowledge (and therefore the data) can easily get lost.
The best practice is to use the same convention for the same (or similar) actions. This way, for example, you can easily look in Google Analytics and pull a report of all similar actions aggregated. For example, selecting the ‘click’ eventAction and reporting on clicks by eventLabel. Or select the ‘variation 1’ eventLabel and seeing all the eventActions associated.
For example:
dataLayer.push({
'eventCategory' : ‘Registration’,
'eventAction' : ‘Submit’,
'eventLabel' : ‘Home-Var_A’,
'eventValue' : 10,
'event' : ‘RegistrationEvent’
});
Then, within Google Tag Manager, you can set this up so that the values get passed into Google Analytics and any other tag that you need to set up.
There are a couple more cool features of Google Tag Manager you can explore:
To keep all your naming conventions consistent, and make sure you haven’t forgotten to track any key actions, I find it helpful to create what I call a ‘CRUDS map’.
CRUDS stands for Create, Read, Update, Delete, and Search.
These are the fundamental building blocks of any object on a website. So, for example, an ‘Account’ is an object, which can be created, read (viewed), updated, deleted, or searched for.
The main product you’re selling on your site will also tend to have these properties, for example on AirBnB a listing can be created (a host adds a property), read (someone views the property page), updated (they update the details of the listing) or deleted (the listing gets removed).
Even a ‘Session’ can be thought of as having been created and deleted, though there won’t always be a perfect mapping. For example, here is a CRUDS map for the Ladder Planner.
There are a million ways you can choose to name your events, and your needs will naturally evolve as your marketing gets more complex. This is not a ‘one and done’ type of task; you’ll always be improving it.
My advice is: don’t overthink it. To paraphrase General George S. Patton: a good tracking plan violently executed today is better than a perfect tracking plan executed next month.
Copy and paste the analytics tracking code into the ‘head’ section of your website. It has to go on every page of your site. If that sounds complicated, don’t worry – it isn’t. All modern websites are built using templates (which means the developer just has to copy and paste it once).
The important part is this bit:
ga('create', 'UA-XXXXX-Y', 'auto');
When you copy code from within Google Analytics, you’ll have your ID there. This is what tells Google that it’s your website that’s sending the information.
You won’t be able to collect any personally identifiable information like favorite websites, phone numbers, names, etc. Also, if you won’t turn on the option to collect data about demographics (which Google Analytics recommends to do by default), you won’t receive this information as well.
Whenever someone visits your website, it sends an event hit to Google Analytics. Then, every time a user interacts with content on your domain i.e. clicks on a button, scrolls down or up, fills a form, goes to a subpage, etc., Google Analytics records them as hits.
If you want to set up event tracking on Google Analytics, this is what you'll need to do. When someone visits your website, a snippet of JavaScript code on your website ‘fires’; sending that information to your analytics platform. That piece of code will look something like this:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
This bit of code is important as it shows Google the domain that’s sending the information:
ga('create', 'UA-XXXXX-Y', 'auto');
And this bit tells Google Analytics that someone viewed a page:
ga('send', 'pageview');
This basic code gives you a lot of functionality. It allows you to segment your users by all the following variables:
All of that is recorded automatically by Google Analytics.
It also allows you to set up pageview-based goals; if your users land on a ‘confirmation’ page after purchasing, you can designate that page as a ‘goal’ and work out the conversion rate.
However, not every important action happens on a specific ‘confirmation’ page. For that, we need an event tag that fires after the head tag.
Go to your website, take each important action a user would take on your site. Which ones didn’t drop you on a new page? To track those actions, you need to add an event tag.
The code to track these events is below:
Event 1
ga('send', {
hitType: 'event',
eventCategory: 'videos',
eventAction: 'play',
eventLabel: 'fall campaign'
});
Event 2
ga('send', {
hitType: 'event',
eventCategory: 'checkout',
eventAction: 'complete',
eventLabel: 'blue sweater',
eventValue: 37
});
This first event tells Google Analytics that someone played the fall campaign video. The second one tells you someone completed the checkout process, (i.e. made a purchase) and you made 37 bucks. So far, so good; you (or your developer) just need to add this code to the handful of events in your funnel stage, and you’re tracking your whole funnel in Google Analytics.
However, life is never that simple.
What if you start advertising on Google Ads and Facebook, and need to add their tracking code to your website? Google Ads just needs the event tag, but Facebook needs the head and the event tag. Now, your setup looks like this:
It’s a little bit more complicated, but not too difficult so long as your developer set them all up correctly to fire at the same time, and doesn’t accidentally miss a one-off when making changes to that page.
So, Facebook and Google Ads are working well, and you want to expand to Twitter and Bing ads…
…and maybe Google Display Network
…plus your buddy told you to try Pinterest ads
…then a sales rep at Adroll sold you on retargeting but you want to test it versus Perfect Audience
…and you read in a blog post that SumoMe works to collect emails
…and you heard that Mixpanel was a better tool than Google Analytics.
..but you’re also interested in collecting qualitative information with something like Hotjar or Qualaroo
…and you need to add Klaviyo code to your website for email retargeting.
Before you know it, you end up with this set up:
What are the chances that your developer sets all this correctly? Will they all be firing off the same rules? How likely is it that they won’t miss one tag off accidentally next time they edit this page? How will firing all these tags slow down your page loading speed? Could one of these tags misfire and stop your page from loading?
All these problems only get worse as you grow and your marketing gets more sophisticated.
Rather than hand-code every single tag that you need, you only have to add the tag manager code once in the head and fire the event tag once when something happens. Google Tag Manager will then send that information to all of the other tags that you need to send it to.
As well as making things easier for the developer, who now only has to remember one tag when they make changes to the page, it makes it easier for you too. You can now add new tags that fire off the same rules as the other tags, and you can do it yourself, instantly, without a developer, product manager, or product release in sight.
And it’s pretty easy.
The code for this is really similar to the code you need to set up Google Analytics:
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
The event code is similar as well:
dataLayer.push({
'attribute1' : ‘value_for_attribute_1’,
'attribute2' : ‘value_for_attribute_2’,
'event' : 'event-name'
});
Note: the attributes part is fully customizable; you’re not limited to using eventAction, eventLabel, etc used in the Google Analytics tag (though it would help, if you’re planning to push this information into Google Analytics via Tag Manager).
If you haven’t read our post on Marketing Funnel Analysis, I recommend it at this point. Once you read it, you’ll know that successful analysis relies on the ability to segment your users. This can get very advanced, particularly for larger enterprises, however, we only need to start with one segment: the stage in the buying cycle.
Marketing funnels help you make sense of a big mass of user data, showing the worth of a user on each stage of your funnel.
It’s simple enough; to build a model like this, you need to fire events for each of these funnel stages. Then you can track the number of people who reach each stage, work out the conversion rate between stages, and then work backward to derive how much a user at each stage is worth to you.
It seems pretty basic, but 90% of businesses I talk to do not have a good model of their business like the one above. It’s essential to make any marketing decision confidently, so let’s walk through how to set this up.
It’s easy to get carried away here. I get it, you want to track everything. My advice is to start with a minimum viable tracking solution first (i.e. the bare minimum to track your funnel), then build on that solid foundation over time as needed. Otherwise, you risk spending hours of your time (and developers time) and getting half-baked, over-complicated solution that your team will rarely look at.
Tracking is never a ‘one and done’ activity; it’s a process that will evolve as you grow and get more sophisticated.
So how do you decide what funnel stages to track?
This isn’t possible to track (at least not in your analytics package) because it happens on other sites. When you run ads you get an ‘impression’ and ‘reach’ count, and Google even gives you the numbers for SEO, but you should ignore it for this guide.
This one is really easy; every analytics platform tracks the number of people who visit your site or app by default. No additional tracking is required though you may want to store additional variables/attributes regarding this user for more advanced segmentation (we’ll cover this later on).
This is the most important stage to get right. This is the first sign of intent from the user, and most marketing activity will be focused on driving people to this goal. Most commonly, it’s a collection of an email address or creation of an account, but can also be a view of a key page on the site (i.e. a product or pricing page).
This can mean a lot of different things depending on your business, but it should only relate to the event where people pay you money, or you’ll get in trouble with this metric. If that event happens offline (for example a B2B business with a long sales cycle), there are ways to link it back (which we’ll discuss later). If it doesn’t happen at all (i.e. you’re a startup that isn’t focused on revenue right now) I suggest you make a strong assumption to use as a placeholder.
For advertising based startups, this is easy: how many people come back and allow you to show ads? For B2B, also easy – it’s the upsell revenue minus the lost revenue from customers that churned. For e-commerce and other business models, this number might be very low. But it’s still important to measure so you can work out your lifetime value. For example, printer companies lose money on the sale of the printer but make it back when they sell you ink every few months. If they weren’t tracking retention, they wouldn’t be able to afford their user acquisition costs. Depending on your product, this may or may not be possible to track within analytics, but you do want to have a good estimate of this number.
It’s probably the hardest metric to track. You’re probably getting a ton more referrals than it’s possible to measure by conventional means. My best recommendation is to focus on a tangible action (like sharing on social) and then make a best guess estimate of what that share is worth (based on how much traffic you get from social shares, and how much that traffic is worth to you). I’ll explain this more in detail later.
The important thing is that you only track economically meaningful events, and that precede each other. Meaning that if a user can skip a funnel stage, that stage shouldn’t be in your funnel (or should be combined with another action).
For example, on AirBnB the main action on the home page is to search. However, I can scroll down and click into one of their content pages, and choose a listing from there, without searching. Or maybe I came in from SEO directly to a destination page. If AirBnB included the ‘search’ action in their funnel, their numbers would be off; some users would book without searching, so the numbers would be skewed.
A better ‘activation’ metric for AirBnB would be creating an account, as you have to do that to make your first booking; you can’t skip that step like you can search. Alternatively, a view of a listing page could also work; this is particularly useful as it’s a more meaningful metric when looking at existing user engagement (who created an account maybe years ago).
Now I’m not saying AirBnB shouldn’t track searches; searches are a great indication someone is interested in the product, and it’s economically valuable. I’m just saying that it shouldn’t be the first thing they track or part of the main funnel model they build. It’s likely they have a separate funnel just for people who search, but that’s a level of complexity you won’t need at first.
As discussed, apps are more dynamic than websites and therefore aren’t typically built around ‘pages’ that you can deep link into. Therefore, mobile analytics packages are typically built more around ‘events’ than pages. Though Google Analytics does work with events and on mobile, mobile app developers tend to use mobile-focused analytics vendors.
Note: inserting code into an app should be done by a developer. The app or its newest version will go live only once you update it in the App Store/Google Play, not like with the website where it’s live the second you put it to the production version.
Even if you do have deep link pages within your app, the Apple app store doesn’t pass referrer information or UTM parameters! This means you can’t see what campaigns drove your app users or how users coming from different marketing campaigns behave. You also can’t drop a user directly into a deep link page. Even if someone shared a specific page with them, once they install the app, they land on the generic homepage with no context as to how to get to the page they needed. As well as being bad for tracking, it’s poor user experience.
There are several different tools that solve one or both of these problems, but we’ve seen the most success with Branch.io. The tool ‘fingerprints’ (records information about) a user that clicks on a marketing link, and then recognizes that user once they install and open the app. They can then push that information into an analytics platform (for example Localytics) and/or land a user on the right deep-link page (for example, if they came via a friend sharing a link to a specific page).
It’s time to dig into the code that you’ll need to implement to set up event tracking. I’ll focus specifically on walking through the most popular use cases we’ve run into; from the most basic setup (Unbounce page) to the most advanced (Mobile app – coming soon).
If you aren’t familiar with the basics of JavaScript, this guide may seem a little alien to you. However, you should just be able to send this guide to your developer and they’ll know what to do. If you do want to learn a bit more about doing it yourself, Codecademy’s course on how to build an interactive website should teach you enough of the basics.
Let’s start with the easiest example; a simple Unbounce landing page.
This is easier than most tracking implementations because there are only two actions to track:
So let’s get started.
I’m going to assume you already have a page (or multiple pages) ready to track. If you don’t know how to build a page, I’d recommend you check out this Unbounce workshop.
For this guide, I’ll use the minimalist Boxee Green template.
Step 1 – prepare your Google Tag Manager code.
Once you log in, you’ll see your ID (GTM-XXXXXX) in the top navigation bar, click it to get your code.
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Step 2 – Click on the ‘JavaScripts’ section.
Paste in the Google Tag Manager code. Change ‘Placement’ to ‘Head’. Name the script ‘Google Tag Manager’. Save the Code.
Step 3 – Go back and click on the Form Confirmation Dialog page.
Step 4 – Click JavaScripts and do the same.
Step 5 – Head over to Google Tag Manager.
Step 6 – Click into Tags and add a new tag.
Step 7 – Name the tag, add a Universal Analytics tag, and fill in your Google Analytics ID. Now, add a Page View Track Type and a trigger on ‘All Pages’.
And that’s it!
Unbounce automatically does the rest for you. Even though no actual new URL loads when someone submits their email, Unbounce pushes a ‘virtual’ page view when the Form Confirmation Dialog page pops up. We’ll see this in a second.
Checking it worked
To put this live and check it’s working, publish both the Unbounce page and the Google Tag Manager changes. Then visit the page. If you head to Google Analytics and click into the ‘Real Time’ section, you can see yourself surfing the site!
Just to double-check, you can also try out ‘Preview’ mode in Google Tag Manager, by clicking the down arrow next to ‘Publish’ and click Preview.
You can see what is firing from Google Tag Manager on the bottom of the page.
To test the form, you can add a plus sign after your Gmail address (but before the @gmail.com) and sign up with a unique email (if you have a welcome email set up, it’ll still go through to your normal email inbox).
Even though the formatting isn’t great, you can see the tag firing in preview mode on the Form Dialogue page there too.
Finally, if you go to Real-Time > Content you can see the actual page URL you were on. This is the ‘virtual’ pageview we were talking about earlier.
The full URL path looks like this:
/tracking-blog-post/a-form_confirmation.html?email=youremail+test@gmail.com
So to track this as a ‘Goal’ in Google Analytics, it would contain ‘form_confirmation’.
You could have just added the Google Analytics tracking code directly in the Unbounce script editor (which in itself, is a kind of tag management system).
However, that approach doesn’t scale. If you now want to add Mixpanel, Intercom, SumoMe, HotJar, Facebook Conversion tracking, and many other tools and analytics pixels, you’d have to add them all one by one into Unbounce.
This wouldn’t be too much of a problem, but what if you’re also using these scripts on your main website, blog, and in several other places? You might forget a tag or make a mistake.
Keeping everything in Google Tag Manager makes it easier to see what’s firing (and why), and it decreases the chances of a mistake.
To add a new pixel, say for example the Facebook Website Retargeting code, it’s as easy as adding another tag off the same ‘all pages’ trigger (this time as a ‘Custom HTML’ tag).
You don’t even have to log into Unbounce – you can publish it live to the site directly from Google Tag Manager.
Sure, this doesn’t look like that great of a benefit considering how easy it is to publish within Unbounce. But for those who need an IT ticket, approval from a product manager, an hour of developer’s time, and a release date window two to12 weeks in the future to get something live on your site, this ability is mind-bogglingly useful!
The in-built capabilities of Google Tag Manager are pretty powerful.
Say you don’t want to add a tag to every page of the site, but ONLY to the Form Confirmation Dialogue page. For example, adding a ‘conversion’ event, in this example for Facebook. You can do that pretty easily, just by modifying the trigger.
This is what the Facebook conversion event looks like:
<script>fbq(‘track’, ‘Lead’);</script>
There are a lot of different options, and you can even create your custom ones, but ‘Lead’ will do for now.
In Tag Manager, you need to add a custom HTML tag as you did before, but this time, filter the trigger so that instead of ALL pages, it only shows on the ‘form_confirmation’ page (just like you saw in the live content report, and set up in Google Analytics Goals).
Step 1 – Set up the trigger.
Step 2 – add the custom HTML to fire on that trigger.
Step 3 – Publishing and hitting preview again, you can check if it worked the same way you did before.
Your Facebook Retargeting pixel is working, but the Conversion event isn’t firing. Good start.
Facebook Lead Conversion is firing on the popup as expected.
What if you didn’t have a confirmation page at all? For example, you wanted to track clicks on the social share buttons.
That’s pretty easy too with Google Tag Manager.
Step 1 – find the element ID. Right-click on the button and click ‘inspect’.
This might not mean too much to you if you don’t code, but it’s not that difficult if you ignore all but the one piece you need: the ID.
Here you can see that the button has a unique ID – “lp-pom-button-37”.
Step 2 – add click id targeting to Tag Manager, by going to ‘Variables’ clicking ‘Configure’ and adding ‘Click ID’.
Step 3 – set up a trigger that fires when that ID is clicked.
Step 4 – set up a Google Analytics event.
Step 5 – check via Google Analytics Real-Time.
Note: you check this via Google Analytics Real-Time, because this click refreshes the page, and therefore you don’t see the event happen quick enough in Google Tag Manager preview mode to check it’s working.
This doesn’t just work for the social buttons, but you can also use it on the main CTA button or any button for that matter. You just need the ID:
…and you don’t even need the ID.
You can also use the Text of the button, in this case, “GET NOTIFIED”, the URL (i.e. track all clicks that lead to a certain domain), or even the element class (all buttons with the ‘lp-pom-button’ class). Be careful with that last one that you’re not firing events off clicks on buttons you don’t want to track, that have the same class.
What you’ve learned so far is pretty powerful. Using a combination of only these methods, you can add pretty much any JavaScript tool, analytics software, or track any event you need.
You saw earlier how Unbounce was making it easier for you by pushing a ‘virtual’ pageview when the Form Confirmation Dialogue page was popped up. What if they weren’t? You’d have to find another way to fire the conversion event.
This is how you can do this:
<script>dataLayer.push({'event' : ‘UnbounceSignup’});</script>
You need to go back to Unbounce, to the Form Confirmation Dialogue page, and add this. Even though this is extra work, it’s the only way to be 100% sure your event will fire.
This method, rather than relying on pageviews, is what most modern web developers use to fire their analytics events – particularly those working on websites where the majority of user interactions DON’T reload the page.
It’s pretty easy to add a trigger for these events. Just create a ‘custom event’ trigger and match the name to what you added to Unbounce (or your developer added to your site).
From there, you can add your event tag as normal.
You kept this simple and just fired a simple event name, then added more context for the event manually in Google Tag Manager. What if you wanted that context to be added at the code level and pushed through Google Tag Manager into your other tags?
⇒ Download Event Tracking Setup Guide ⇐
For example, Unbounce is built for A/B testing. What if you want to know which variation was shown to the user before they signed up?
Luckily, Unbounce provides this as a variable on the page that we can access. If you (after clicking ‘inspect element’) click on ‘console’ and type ‘window.ub’, you can see the variables Unbounce pushes to the page.
You’re interested in variationID, and you can pull that info into the event, as a variable.
If you go into Variables within Google Tag Manager, and pick ‘JavaScript variable’ and type in “window.ub.page.variantId”, you now have this as a resource to add to your tags.
To use this in a tag, you just need to put it in curly brackets, like this “{{Unbounce Variant ID}}”.
And voila – you’re tracking the variant ID directly from the page.
Again, this looks like extra work right now, but if you were A/B testing 10s or 100s of variations, you’d very much like to not have to code each one manually.
Of course, this is just the beginning.
You could, for example, push any of the other Unbounce variables into our tags, like page name.
You could push the URL into your tag:
Or really anything your developers can hard code for you.
You can take a couple of actions to avoid repeatedly adding these scripts every time.
For example, you could drop the eventCategory and eventAction down to the code level, rather than having multiple triggers in Google Tag Manager.
<script>
dataLayer.push({
‘eventCategory’: ‘Signup’,
‘eventAction’: ‘Submit’,
‘event’: ‘SignupEvent’
});
</script>
Note: when adding multiple variables, each but the last needs to have a comma after.
Add the right code (plus values) into Unbounce.
Add the variable for eventCategory.
Add the variable for eventAction.
Note: these are both ‘dataLayer’ variables because you’re ‘pushing’ them to the dataLayer.
Incorporate into the actual event send.
Now, you never have to set up another event in Google Tag Manager again for Unbounce. You can just fire the Google Tag Manager tag with the naming convention you want, and it’ll pass through Google Tag Manager to Google Analytics (and the other tags you have set up). This is a good practice to adopt, particularly when working with more complex, self-hosted websites and working with your developers.
We’ll go into more detail here when we talk about eCommerce stores, but common use of ‘variables’ is to pass the transaction value whenever someone makes a purchase. That’s something you couldn’t possibly hard code yourself unless you can pull it from the page.
To never forget your Google Analytics ID, you can store this as a ‘constant’ variable!
Create a ‘constant’ variable.
Use the variable to fill in your Tracking ID.
Another time-saving feature is Unbounce’s Script Manager. It allows you to automatically fire the right events on the right pages, based on domain.
There are also more direct integrations with Google Tag Manager and Google Analytics to save you more time.
The major benefit I’ve found is not forgetting to add your script to that new page you launched. If it’s on the same domain, it’s automatically added.
Combined with the power of Variables, you can save yourself a lot of duplication and time.
ProTip 1 – Capturing UTM parameters along with email as hidden form fields.
Although Google Analytics can show you which marketing channels drove leads, it can’t tell you what leads specifically it drove. It’s against Google’s guidelines to record any personally identifiable information about those leads (i.e. email address) in your analytics.
Additionally, if you have a long sales cycle, particularly if much of it happens offline, you’ll struggle to attribute the final sale you make to the right marketing channel.
To solve this, you need to capture the UTM parameters when a user signs up using the hidden form fields feature in Unbounce.
Step 1 – click on the email input and click ‘edit form fields’ on the right.
Step 2 – click on ‘hidden field’ and change the name to (exactly) ‘utm_source’.
Step 3 – add utmmedium and utmcampaign in the same way, then hit done, save the page, and republish.
…and that’s it. Unbounce makes it easy for you by automatically looking into the URL for the UTM parameters, then adding them to a hidden form field. This means they’re captured alongside the email in the database when the user submits.
You can test this by adding your made-up values for UTM parameters to the link when you visit the page and seeing if they end up in the database.
http://unbouncepages.com/tracking-blog-post/?utm_source=test-src&utm_medium=test-med&utm_campaign=test-cam
From Unbounce you can push that information into any CRM (via WebHooks and Zapier if you don’t see the one you use here).
This is a great way to build trust between marketing and sales. Seeing the marketing source right alongside those leads in the database, makes it hard to argue about who drove that lead.
I mentioned earlier that Unbounce automatically pulls the parameters from the URL and adds them to the form for you. If you aren’t using Unbounce, pass this post along to your developer and they should be able to figure out how to code this behavior on your site.
If your website has multiple pages, or a user comes back multiple times, you’ll lose the UTM information. The solution is to store the UTMs in a cookie or local browser storage, until the user finally signs up, at which point pull the data back out and use the hidden fields trick.
Again, this will take some development work, but the flexibility to be able to use your own attribution rules and being 100% confident in the data is quite valuable.
Regardless of what blogging platform you use, the process will largely be the same.
Step 1 – log into your Ghost CMS.
Step 2 – click into ‘code injection’ and paste your Google Tag Manager code.
If you read the first step-by-step guide in this post on Unbounce Pages, you’ll notice this section looks like a simplified version of Unbounce’s script manager. Almost every CMS or platform has its own space where you can add tracking code. You just need to find it or override it if there are limitations (which we’ll see in the Shopify guide).
Step 3 – add the Google Analytics tracking code.
Nice and simple, just like adding it to Unbounce.
Any professional blogger will tell you that building an email list is key. It allows you to continually communicate with your audience, remind them to come back for new content, and helps you build your traffic over time. Naturally, you’ll want to track how many signups you’re getting.
A tool called SumoMe offers, among other things, ‘List Builder’ and ‘Scroll Box’ which are excellent ways to increase your email conversion rate.
To implement, it’s as simple as adding one line of code.
<script src="//load.sumome.com/" data-sumo-site-id="b078079d9a476c7c12d02f76a29b38b2e973681602a05d50ff1ca4a1d20952e1" async="async"></script>
To track signups, just like Unbounce and Ghost, they’re giving you a place to put your tracking code. However, it’s a little clunky as you have to add it for every single individual popup. Below is an example.
You’ll notice there’s a place for when the popup is shown, as well as one for when someone submits their email. This is helpful because you can work out your show rate (% of people who see the popup) as well as your conversion rate (% who submit their email when shown the popup). To differentiate these, I pushed the events as ‘sm-show’ and ‘sm-signup’.
To add a bit more context, I also pushed two variables, ‘sm-label’, the name of the popup, and ‘sm-app’, so I could compare for example whether List Builder or Scroll Box is more effective.
The next step, if you’re following along, is to add those variables in Google Tag Manager so you can use them.
Next, you create the trigger that will fire on email submit.
Thanks to this setup, rather than create a different Tag for every single new email popup, you can just pass those variables into one.
I’d repeat the above for ‘sm-show’ and as long as I remember my Google Tag Manager code when making new popups, I should never have to modify my Google Tag Manager setup for SumoMe again.
…wait there’s just one issue. One of my SumoMe tools, Smart Bar, doesn’t capture email addresses, it drives clicks out to my website. How do I track that?
If we remember back to the Unbounce guide, we can track clicks on an element, given its ID, Class, or Text. Well, if we right-click on the button, and click ‘inspect element’, we can see that the button has a ‘class’ of ‘sumome-smartbar-button’.
I didn’t see an ID, and rather than use the text, which can change, this class looks like a surefire bet to track all Smart Bar button clicks.
Just like before, you should pull in the click class variable, then only firing the tag when it matches.
Again, you can do the same to track social shares, another SumoMe app.
Triggering based on the sumome-share-client-share class seems to be best.
Set up the tag. Push the ‘text’ as a variable so you can see what CTAs work best.
Why stop at shares and clicks to your website? Why not track all outbound clicks. It’s very useful to see:
To do this with Google Tag Manager, it’s pretty easy.
Step 1 – set up a trigger on all link clicks.
Note: Avoid ‘waiting for tags’ unless you must measure 100% of clicks because it can significantly slow down loading times and hurt user experience.
Step 2 – configure the Click URL variable.
Step 3 – add the Google Analytics event firing off the click-out trigger you created.
By adding the click-out URL in the Event Label, you can track which URLs you’re sending the most traffic to. Additionally, add a value of 1 to the firing of this event, which will automatically allow you to see how many events you’ve fired in the ‘event value’ field.
If outbound clicks are worth something to your business, you might want to dynamically add this value via a hard-coded variable. You could also incorporate a lookup table to stop competitors from prying sensitive information like how much your affiliates pay you per outbound click.
It can also be helpful to track how far someone reads down a page. While we haven’t implemented this on our blog yet, Optimize Smart put together a few good solutions for doing this, which your developer should hopefully be able to understand.
It’s important to understand that any event you fire decreases your bounce rate. This is a good thing. Normally, you have no idea what percentage of those ‘bounces’ were true bounces, i.e. they left without doing anything. By tracking clicks out to other sites and tracking scroll depth, you can see how many engaged with your site, and adjust your content/traffic strategy accordingly. If you don’t want these events to count against bounce rate, simply set ‘non-interaction hit’ to True in the Tag configuration.
What if you want to provide some context about a user’s behavior, but it didn’t necessarily want to fire an event every time? For example, if a user has shared on social in the past.
That’s where Custom Dimensions come in.
First, you have to set one up in Google Analytics. It can be at the ‘hit’ (pageview) level, or per session or user.
You then make a note of the dimension index, in this case, 2 (you only get 20, so use sparingly).
It’s as simple as adding our custom dimension to our SM-Share event, and you’re golden. Now, you’ll be able to split any of our traffic in Google Analytics reports by whether they have shared or not.
It’s not all about quantitative tools. Google Tag Manager can help you add qualitative tools too. For example, running surveys, seeing where people click or scroll, and even recording their screens. SumoMe has its heatmaps (see where people click) and Content Analytics (see how far they scroll) tools.
SumoMe Content Analytics (scroll depth)
SumoMe Heatmaps (click patterns)
It’s pretty much the same process to install any such tools. Here’s how to install Hotjar, another tool with heatmaps, surveys, screen recording, and more.
Hotjar Screen Recording
Hotjar Heatmap
This is how polls look like in Hotjar.
If you’re interested in surveys/polls specifically, check out our post on Qualaroo, which is a more advanced tool we recommend in this space.
ProTip 2 – wipe UTM referrers.
If you’re savvy, you’ll notice the UTM system isn’t perfect. If you come through a Google Ads campaign, but then you share your URL with someone (complete with UTM parameters), Google Analytics will attribute both of you to Ads, inflating the marketing numbers. This is a big issue when you’re seeing a lot of share activity on your site. Luckily, it can be solved by wiping the referral information once you’re done with it.
Note: Buzzfeed, the king of shareable content, does something similar to the basis for their proprietary Pound analytics tool.
WordPress is the most popular CMS in the world. If you’re looking to add tracking to a WP blog, I’d first recommend you read the above Ghost guide we put together, as 90% will be the same.
The major difference? Plugins.
For almost any major marketing technique, tool, or platform, there’s a WordPress plugin. Installing Google Tag Manager is as easy as installing this plugin by DuracellTomi.
Right out of the box, it not only adds the Google Tag Manager code to every page of your WordPress site, but it also builds a basic Data Layer for you.
Want something a little more customizable? Try Header and Footer, a script injection plugin.
SumoMe? One-click integration with the plugin they built for WordPress Users.
The point is that whatever you need to accomplish in WordPress, there’s probably a plugin out there that helps you do it.
If not, you can always edit the theme manually. If you go this route, make sure you know what you’re doing – it’s really easy to screw up your site by changing the wrong thing. I’d recommend finding a good midrange WP developer on Upwork to make any manual changes.
If you want more flexibility than Header and Footer, but without the risk of messing up your site by coding it manually in the theme, try something like the Code Snippets plugin instead.
If you read the Unbounce, Ghost, and WordPress guides above, you’ll already know 80% of what you need to know for a Shopify Tag Manager implementation! Even better, the other 20% is done for you by Shopify.
Just like the other platforms, it has a place to paste your tracking code on the conversion page.
But, you don’t have to worry about that for Google Analytics has a direct integration (including advanced eCommerce tracking – though remember to turn it on in Google Analytics Admin).
Note: you need a Shopify ‘Plus’ account to be able to track revenue.
Just like WordPress, Shopify has its app store, which makes more advanced integrations (we recommend Google Shopping, Justuno, ReferralCandy, and Klaviyo) super easy.
One thing I would consider, however, is an A/B testing software. On Unbounce. this was built in, and on the blog platforms, there wasn’t much to test. However, with eCommerce, you can test changes that directly impact revenue and track those changes using Google Tag Manager. To learn more about A/B testing, check out this post on Shopify or read our A/B testing guide.
Optimizely has direct integration with Shopify, but it’s not too difficult to implement manually.
Note: it is not advised to implement Optimizely within Google Tag Manager as it can affect the performance of your tests by showing a visible ‘flicker’ as the content loads.
Go to Online Store > Themes > Edit HTML / CSS > theme.liquid.
Then, paste Optimizely in the ‘head’ part of the document. Just like SumoMe, it’s one simple line of code, example below:
<script src="https://cdn.optimizely.com/js/7684081522.js"></script>
In order to report on revenue in your tests, you can also push a revenue event into Optimizely. This can be done in Google Tag Manager, or in the ‘checkout’ space for tracking code in Shopify we saw earlier.
<script type="text/javascript">
var optimizely = optimizely || [];
var revenueInCents = {{ subtotal_price | money_without_currency }} * 100;
optimizely.push(['trackEvent', 'conversion', revenueInCents]);
</script>
I highlighted the piece in double curly brackets because if you follow along, you should recognize what this is by now: a variable. Yes, just like Google Tag Manager variables, Shopify has its own variables they make available on the page.
You can do the same thing to push revenue into Facebook, so you can report on revenue directly from your Facebook ads manager, saving you time digging around in Google Analytics.
<script>
fbq('track', 'Purchase', {'value':'{{ total_price | money_without_currency }}','currency':'USD'});
</script>
But there’s more than just revenue. For example, you could reconstruct the entire advanced ecommerce tracking object and push it into Google Tag Manager, if you didn’t want to do it via Shopify’s integration. This would allow you to push that information into more than just Google Analytics, without relying on there being a native Shopify App integration with the platform you want to use.
<!-- Checkout Page GTM -->
<script>
dataLayer.push({
'orderId': {{ order_number }},
'productValue': {{ total_price | money_without_currency }},
'productId': [{% for item in line.items %} {{ item.sku || item.product.id }}, {% endfor %}],
'orderItems': [{% for item in line.items %} {
sku: {{ item.sku || item.product.id }},
price: {{ item.product.price | money_without_currency }},
quantity: {{ item.quantity }}
}{% endfor %}]
});
</script>
Now that might be pretty scary and complicated, but don’t worry. For a relatively small fee, you can find talented Shopify developers on Upwork that live and breathe this stuff and can do it for you. You only have to do it once and you’ll have solid data from then on, so it’s worth it.
What if you don’t have a Shopify site with all these integrations and pre-baked variables?
If you have a custom eCommerce site, take a look at how Shopify does it first, then ask your developer (or an Upworker) to write their custom version for your website.
So long as they can make the variable values you need to track available on the page, it can be pushed into Google Tag Manager, and from there, into any other platform.
With the right combination of Variables and Events, you can truly track anything!
With a little knowledge of how websites work, a little knowledge of code, and a lot of trial and error, you can use Google Tag Manager to pull information right out of the web page and into your tags!
DOM means ‘Document Object Model’, and it’s simply just a representation of how the website is put together. All you need to know is that every element on the page can be referenced by ID and Class. This was mentioned earlier in the Ghost guide for tracking Smart Bar clicks. You can also access whatever is in the URL, by pulling the document ‘window.location.href’, as you did earlier in the Unbounce guide.
Let’s take the Best Buy website as an example.
If you take a look at this Acer Chromebook page, what do you notice?
Well, the word Acer is right there in the URL.
http://www.bestbuy.com/site/acer-14-chromebook-intel-celeron-4gb-memory-32gb-emmc-flash-memory-sparkly-silver/5203000.p?skuId=5203000
Is this a pattern? If it isn’t consistent, you won’t be able to use it.
It looks like it is: the brand name is always in-between “site/” and a dash “-”. Using regex*, you can pull that variable from the URL and use it as a variable in Google Tag Manager.
Note: regex is a tough subject and I won’t cover it here, but you can usually hash something together by methodologically testing different combinations.
What else can you see in the URL? There’s something called the “skuId” – that must be the product ID. This appears twice, and it’s harder to grab the one at the end with regex (unless you write it carefully, you’ll grab anything else at the end of the URL), so let’s go for the first one.
http://www.bestbuy.com/site/acer-14-chromebook-intel-celeron-4gb-memory-32gb-emmc-flash-memory-sparkly-silver/5203000.p?skuId=5203000
You can also see that, although they appear in different places in the URL depending on the brand name, the word ‘Chromebook’ is always there in the URL. This isn’t ideal, as you’d have to write a ‘contains X’ rule for every category you wanted to tag. However, if you’re doing a special Chromebook sale, this might be worthwhile.
You could also write a regex rule for memory, emmc flash, etc.
You’ve got quite a lot, and that’s just from the URL. What else can you get from the page itself?
Quite a lot more.
For starters, the name helpfully has a unique id “sku-title”.
Pulling this out as a variable is very similar to the click text trick used in the Unbounce guide. However, you need to do a little more digging to get the value you need.
To get this value, switch over to the console and type the following code:
var name = document.getElementById("sku-title").textContent;
name;
Here it is.
“Acer – 14″ Chromebook – Intel Celeron – 4GB Memory – 32GB eMMC Flash Memory – Sparkly silver”
To use this in Google Tag Manager, you just need to add a Custom JavaScript Variable, and you can then use that like any other variable in the tags.
function () {
var name = document.getElementById("sku-title").textContent;
return name;
};
Note: you have to wrap the code in a function, and make sure it returns a value to make it work.
URL also gives you anything with a unique ID.
Model Number
Reviews
Price
Note: the last two were classes rather than IDs, but they look unique so you should be fine. You need to modify the code to say getElementsByClassName(“example”)[0], which gets the first element with that class in the document (in case there are multiple).
Pretty powerful right? I’ll leave you with one last clever one.
To check if the user is logged in, just check what the text of the sign-in button says.
var loggedIn = document.getElementsByClassName("user link-text")[0].textContent;
loggedIn;
This approach isn’t perfect. All it takes is for one developer to change the ID or Class of an element and your tracking is broken. It could be days before you even notice and that data is lost forever if it isn’t captured at the moment.
Even though it’s pretty satisfying to be able to work around the development team’s busy schedule, or save yourself some budget, it’s best to use this only as a temporary workaround.
⇒ Download Event Tracking Setup Guide ⇐
As mentioned, this post is a work in progress. I hope you’ve enjoyed what we’re written so far – I’d be happy to take any feedback, changes, or additions you think would be valuable. I plan to keep adding new guides as I get the time to create them.
So far, these are the most requested:
Any others you can think of? Dying to see one of the above? => Leave the comment below!
In this guide, you’ll learn how to write your own event tracking implementation plan. Yes, actually write the code and instructions that you can pass on to your developer to implement or even implement yourself.
Sign up to our newsletter to stay up to date with all the latest movements in the field.
More from Ladder Blog
The art world is being disrupted by generative AI, and artists aren’t happy. Generative AI models like DALL-E, Midjourney, and Stable Diffusion were trained by scraping millions of images from the internet, without permission. Artists claim this violates copyright, while the companies training these models argue this falls under fair use.
Read More →In the world of digital marketing and data-driven decision-making, creative testing is a pivotal tool in achieving business growth. Gone are the days of relying on gut feelings or guesswork; now, business decisions are powered by data-validated insights, meticulously collected, analyzed, and validated. This transformative process empowers businesses of all sizes, from established enterprises to budding startups, to thrive in an ever-evolving digital market. This article looks at the practical applications, challenges, and innovative transformations associated with creative testing, offering you valuable insights and actionable strategies to implement in your own digital marketing efforts for achieving growth and success.
Read More →
