Destination Digital

How to set up Google tracking on your website via Google Tag Manager from scratch

If you have a new website, you *must* set up Google tracking (other analytics tools are available of course…). No ifs or buts, you must. Doing it via Google Tag Manager is a little trickier than adding Google code directly, but it gives so much more flexibility further down the line, so here is a basic Google Tag Manager set up guide for you to get you on your way.

Knowing what your audience is doing, how much traffic is visiting and whether there are problems they are hitting makes Analytics a key tool that needs implementing as part of your set up something you need to give time and attention and budget to.

Google Tag Manager is a tricky tool to get your head around in order to set up tracking on your brand new website but it offers flexibility to the GTM account holder to insert code onto the website when, for instance, you find yourself post go-live looking at hefty fees from your web designer to make updates to the code on your website.  Having control of your own Google Tag Manager account means you won’t have to keep going back cap in hand to your designer each time you want to add a new app, a new piece of tracking or set up new conversion points on your website.

For any of you out there who have been solidly ignoring the coming of Google’s GA4 Analytics, making the switch to GTM whilst also adding GA4 tracking to your website is also a smart move to make.  Or it might be that you have lost access to your old Google account entirely, and need to start again – more on that topic here.

 

What do you need to set up Google Tag Manager?

You need three things:

  • A Google Analytics account with Admin privileges (old style Universal Analytics and/or GA4 Analytics)
  • A Google Tag Manager account
  • The ability to insert the Google Tag Manager code in to the <head> and the <body> of your website

 

First step. Set up Google Analytics GA4, and for now, the Universal Analytics tracking too

If you have a GA4 account and also want to add Universal Analytics because you are finding GA4 unfathomable, we wrote a blog here about how to do that.  GA4 will be the only option from summer 2023, but for now, we are finding there is reporting that is only available in Universal Analytics and so we are keeping a hold of that information for as long as we possibly can.

When you have your two accounts set up, you need to make a note of two IDs.

  1. The GA4 measurement ID which is the format of G-XXXXXXXXXX
  2. The Universal Analytics ITD which is in this format: UA-000000000-0

You can now proceed to step two.

 

Second step. Set up a new Google Tag Manager account

Super simple. You go here: https://tagmanager.google.com/  and then you click ‘create account’.

At the end of this process you will be given some code that looks a bit like this:

<!-- Google Tag Manager -->

<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=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-xxxxxx');</script>

<!-- End Google Tag Manager -->


<!-- Google Tag Manager (noscript) -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxxx"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

 

This needs adding to the <head> and the <body> areas of your website. Depending on whether you have a WordPress, a Shopify, Squarespace, Wix or another type of bespoke tech running your site, the method is different. You can do this yourself if there is a plugin or an app to help you, or you might need to enlist the help of your web developer or ask someone like us 👋 to help you get this in place.

Third step. Add GA4 and UA into Google Tag Manager

This is the part where you will end the process feeling like you are some sort of coding demi-god…

So. Adding GA4 to your Google Tag Manager account is done per the following steps.

 

You will be shown a page similar to the illustration above once you have set up a Google Tag Manager account.  First we need to set up Google tracking in both UA and GA4 versions of Google Analytics.

  • To do UA first, click ‘New Tag’ and then name this tag per your Universal Analytics ID.
  • Click Tag Configuration and select ‘Google Analytics: Universal Analytics’ from the featured list.
  • Leave the setting as ‘Track type’ of ‘Pageview
  • Then select ‘New variable’ from the ‘Tracking ID’ dropdown.
  • Paste your UA ID into the Tracking ID field and then click Save.
  • You will be returned to your Tag, where you now need to click ‘Triggering’. In the pop up that appears, select ‘All Pages’.
  • You will be returned back to your Tag again, where you can now click Save.
  • Next we need to set up GA4 tracking in a similar process. So again, click ‘New Tag’ from the homepage, and name the new tag your GA4 Measurement ID.
  • Click Tag Configuration and select ‘Google Analytics: GA4 Configuration’ this time from the featured list.
  • Copy and paste your GA4 Measurement ID into the field of the same name.
  • Leave ‘send a page view event when this configuration loads’ checked.
  • Click on ‘Triggering’ and select ‘all pages’ and then click Save.
  • You will then be returned to your Tag and then you can Save and return to the homepage again.

That’s it! UA and GA4 will now start to collect data on your website. So once the Google Tag Manager code is in place, you will be able to see traffic starting to show on your reporting dashboards.

 

Step three and a half. Add some basic tags.

There are a few basic tags that need setting up on the account, some of which function to show you in debug mode that ‘things are working’. So set these up next.

All clicks tag

This is useful for helping you debug changes in your account. As the name suggests, it gathers data on ‘all clicks’ on the page. This helps you make sure that the GTM code is installed correctly, but also helps you to find variables on the page for more advanced tag set ups.

Instructions for GA4

  • To set up a new tag, click New Tag and then name it ‘All Clicks’
  • Click ‘Tag Configuration’ and select ‘Google Analytics: GA4 Event’
  • Add your GA4 Measurement ID in the Configuration Tag field
  • Name the Event Name ‘all clicks on page’
  • Click on ‘Triggering’ and then choose the trigger of ‘All Clicks’
  • Click save.

Conversion linker tags

These are used to help tags measure click data so that conversions are measured effectively. If you have Google Ads and will be putting this into the account, you need to add this.

Instructions

  • To set up a new tag, click New Tag and then name it ‘Conversion Links’
  • Click ‘Tag Configuration’ and select ‘Conversion Linker’
  • Make sure that ‘Enable linking on all page URLs’ is checked.
  • Click on ‘Triggering’ and then choose the trigger of ‘All Pages’
  • Click save.

 

 

Fourth step. How to collect more interesting information from your website

You might be perfectly satisfied with the traffic collection you have just set up, but for most businesses there are a few common calls to action that you might want to track on your website. These include clicks on emails, clicks on telephone numbers, clicks to outside social media channels from your website, PDF downloads and submissions of forms.

So buckle up! We’re about to show you how!

 

4.1 How to track clicks on email addresses and telephone links on your website

If you have a website that doesn’t sell anything online, but that is to advertise what you do and encourages people to call you or email you, then it’s really useful to be able to track click activity on the various emails and telephone numbers you might have dotted about the website.

For this to work, you need to turn all your phone numbers and email addresses into clickable links. To do this, your web editor you just select an email address and make it link to the following (change the email address to the one you want to link to of course, otherwise we will be inundated with your emails!

mailto:info@destination-digital.co.uk

Here is how that works when you make an email into a link. Go on, click the below to see what happens!

info@destination-digital.co.uk

to do the same for your phone numbers, you need to select the phone number and create a link to a link that reads like this (again, your own phone number obvs):

tel:01629810199

which then makes the telephone a clickable link. If you are on a mobile device, this should then dial the number for you. Quite handy these days where more and more people are accessing websites on mobile.

01629 810199

 

Right! Now you are ready to start setting up clicks on those links via Google Tag Manager and either GA4 and/or UA.

Google Universal Analytics instructions

  • To set up a new tag for Telephone link clicks, click New Tag and then name it ‘UA – Telephone Link Clicks’
  • Click ‘Tag Configuration’ and select ‘Google Analytics: Universal Analytics’
  • Select from the ‘Track Type’ drop down the ‘Event’ option.
  • In Category, enter ‘Telephone’
  • In Action, enter ‘Click’
  • In Label click the button alongside the field and then select ‘Page Path’
  • Under ‘Google Analytics Settings’ select your UA ID from the drop down.
  • Then click Triggering, and then create a new Trigger by selecting the plus sign in the top right corner.
  • Name your Trigger ‘Telephone Link Clicks’ then click ‘Trigger Configuration’ and select ‘Just Links’ from the options you are given.
  • Select the checkbox ‘Wait for Tags’
  • Under ‘Enable this trigger when all these conditions are true’, selection ‘Page URL’ in the left hand drop down, select ‘Match Regex (ignore case) in the central dropdown and then in the field on the right type .*
  • Select ‘some link clicks’ underneath this.
  • Then use the drop down and select ‘Choose Built-In Variable’ and select ‘Click URL’.
  • In the field on the right add the string – tel:
  • Then click Save
  • On the Tag you are returned to, click Save again

 

Google GA4 instructions

  • To go ahead and set up the same for GA4 tracking create a new Tag again and name it ‘GA4 – Telephone Link Clicks’
  • On Tag Configuration, select ‘Google Analytics: GA4 Event from the tag types and then select your GA4 ID form the Configuration Tag drop down.
  • In the Event Name field type ‘Telephone’ then under event Parameters add a new row and add in ‘Click URL’ in the left hand field, and add the Value of Tel in the right hand field.
  • Click on Triggering and choose the Trigger you just set up called ‘Telephone Link Clicks’. Then click Save.

 

Repeat this process for email links, but obviously substitute the references in the above that mention ‘Telephone’ for ‘Email’.

 

4.2 Tracking clicks on outbound links, like your social media channel buttons

We will use the example of tracking a click on your social media buttons on your website. This is, effectively, an ‘outbound link’ so will work for any outbound link you would like to track. This is really useful if you need to feedback to anyone you are linking to, in order to prove how much traffic you have sent their way for instance.

 

Google Universal Analytics instructions

  • Click new Tag, name your Tag ‘UA – Facebook Clicks’ and then click through the Tag Configuration to select ‘Google Analytics: Universal Analytics’
  • Select Track Type of ‘Event’
  • In Category type Facebook
  • In Action type Click
  • In Label select Click URL
  • In Value select Click URL
  • Choose your Google Analytics account from the drop down
  • Then click ‘Triggering’ and add a new Trigger that you should call ‘Facebook clicks’
  • In Trigger Type, select Just Links and then select ‘Some Link Clicks’
  • Set the bottom three fields to ‘Click URL’ ‘contains’ ‘facebook’. This will pick up any clicks on any links that have the string ‘facebook’ in them. Eg: facebook.com and all the permutations, such as links to individual posts. Also if you write a blog and have the word ‘facebook’ in your blog post web address, it would count that too, so if you want to be more specific, then bear this in mind and get more specific with what you enter in this field.
  • Click Save to return to the home screen

Google GA4 instructions

  • On GA4, add a new Tag, call it ‘GA4 – Facebook Clicks’ and then select ‘Google Analytics: GA4 Event’ in the Tag Type list.
  • Select the GA4 account from the drop down, make the Event Name ‘Facebook’
  • Under ‘Event Parameters’ choose ‘Click URL’ and add a value of facebook, then choose the ‘Facebook Clicks’ trigger you just set up.
  • Click Save at the end.

Repeat this process for all your social channels, swapping out the names to suit the platforms, and adapt the process to other outbound web addresses you might want to track.

 

4.3 Tracking PDF downloads from your website

This is very similar to the above-described process, except that you hone in more keenly on the web address of the PDF to specifically pick up that web address if it’s one PDF in particular you want to track.

Google Universal Analytics instructions

  • Click new Tag, name your Tag ‘UA – PDF Downloads’ and then click through the Tag Configuration to select ‘Google Analytics: Universal Analytics’
  • Select Track Type of ‘Event’
  • In Category type PDF – or if you would like to track a specific PDF, then put a word in to help you identify it in particular
  • In Action type Click
  • In Label select Click URL
  • In Value select Click URL
  • Select ‘True’ under the Non-interaction Hit dropdown
  • Choose your Google Analytics account from the drop down
  • Then click ‘Triggering’ and add a new Trigger that you should call ‘PDF downloads’
  • In Trigger Type, select Just Links and then select ‘Some Link Clicks’
  • Set the bottom three fields to ‘Click URL’ ‘contains’ ‘.pdf’. This will pick up any clicks on any links that are PDFs. Alternatively, you can insert a unique part of the PDF’s filename to track just that PDF.
  • Click Save to return to the home screen

Google GA4 instructions

  • On GA4, add a new Tag, call it ‘GA4 – PDF Downloads’ and then select ‘Google Analytics: GA4 Event’ in the Tag Type list.
  • Select the GA4 account from the drop down, make the Event Name ‘PDFs’ (or give it a specific name as an alternative)
  • Under ‘Event Parameters’ choose
    • ‘Event’ with the value of ‘PDFs’
    • ‘Click URL’ and add a value of ‘Click URL’
    • ‘Click Target with the value of ‘Click Target’
  • Then choose the trigger you just set up for UA.
  • Click Save at the end

 

4.4 How to track form submissions from contact forms on your website

This one is the trickiest of all to set up. This technique can also be used if the above ‘Click URL’ trick for the PDF downloads doesn’t work.

Google Universal Analytics instructions

  • Click new Tag, name your Tag ‘UA – Contact Us Forms’ and then click through the Tag Configuration to select ‘Google Analytics: Universal Analytics’
  • Select Track Type of ‘Event’
  • In Category type Contact
  • In Action type Submit
  • In Label type ContactUs
  • Choose your Google Analytics account from the drop down
  • Then click ‘Triggering’ and add a new Trigger that you should call ‘Contact Us Form Submits’
  • In Trigger Type, select ‘Click – All Elements’
  • Then select Some Clicks
  • Set the bottom three fields to ‘Page URL’ ‘equals’ ‘[insert your contact us page here]’.
  • Add a new row using the small plus sign next to the row you just filled out.
  • Then use the drop down and select ‘Choose Built-In Variable’ and select ‘Click Text’.
  • Set the middle field to ‘equals’
  • For the third field you need to add the submit button text. Most of the time the submit button says ‘Submit’ on it, so you would insert that into this field. Sometimes though the button might say ‘Send now’ or ‘Get in touch’ or ‘send’.  Whatever your submit button says, insert that in this field.
  • Click Save to finish

Google GA4 instructions

  • On GA4, add a new Tag, call it ‘GA4 – Contact Us Forms’ and then select ‘Google Analytics: GA4 Event’ in the Tag Type list.
  • Select the GA4 account from the drop down, make the Event Name ‘ContactUs’
  • Under ‘Event Parameters’ choose
    • ‘Event’ with the value of ‘ContactUs’
    • ‘Click URL’ and add a value of ‘Click URL’
    • ‘Click Text’ with the value of ‘Click Text’
  • Then choose the trigger you just set up for UA
  • Click Save at the end.

 

Fifth step. Testing that it all works!

The next thing to do is to test your implementation. If you have followed all the steps above to the letter, you should have functioning tracking in place already.

There are number of ways you can test what you have put in place, including looking at the ‘live’ view in either Google Analytics under GA4 or Universal Analytics after you have published your workspace changes. In these two places you can see live click activity creating those events on your website tracking.

The better way of doing this is to test before you publish your Google Tag Manager changes live though.  To do this, you use the ‘preview’ button within Google Tag Manager to test before committing to going live with your changes. This is also helpful for going through the fixing routine if any part of what you have set up isn’t behaving as you would expect.

When you interact with the ‘Preview’ on GTM, you will be asked to hook up Tag Manager to your website by inputting your test URL.  If you have set up some new tracking on a particular page – set up especially for a new campaign for instance – then this would be the web address you would look at in particular. Otherwise, you can just navigate your website from the homepage.

Once you have inputted this, you will see your website a separate tab. We usually pull this tab onto a separate screen from the Google Tag Manager preview pane so that you can see tags being fired live as you click them.  The idea is that you click around on the email links, the telephone number links and perform some form submissions and link clicks in line with how you have set up your tracking.  You can check that the tags you just set up are firing correctly on your website as they will ping up into the ‘Tags Fired’ part of the Debug pane. Any tags not fired (because you didn’t do the clicking yet!) will remain in the part of the page labelled ‘Tags Not Fired’.

If you followed the instructions in this blog, you will recognize the various conversion events as they fire at the same time as you click them on your website preview mode.

If you can get them all to fire correctly, then you are good to go!

 

Sixth step. Hitting ‘Publish’ to get these changes to take effect

If you already have the GTM basic code on your website, the final step is to publish your ‘workspace’. You do this by simply clicking the ‘Publish’ button in the top right of your screen.

It makes sense to name this version appropriately so that you know what you did and why you published that version. Any further changes, when labelled correctly, can help you to understand what happened and when, and gives you clues if anything stopped working after you rolled out more changes to the account.  So take the time to fill out these fields!

 

What next? Get acquainted with GA4

If, like us, you have been dragged kicking and screaming towards using GA4 and *just don’t like change*, then the bad news is that its just tough luck.  Good old, trustworthy Universal Analytics is set to be laid to rest by Google on 1 July 2023. So we all need to drink the Koolaid and get with the GA4 programme. The alternative is to pay $150,000 a year for a Google 360 licence (billed in $12,500 a month increments to make keeping up with the payments ‘affordable’).

There quite literally is no better time to start collecting the data, getting used to the interface and generally going through the 7 Stages Of Grief at the demise of Universal Analytics.

We hope that this step-by-step guide has helped a number of small businesses to help themselves through this process to make it just a little bit easier.

 

Contact us

Obviously, if all of the above is a bit too much for you to process, get in touch and we can do this for you.  Just email us on info@destination-digital.co.uk or give us a call on 01629 810199 and we will sort out the rest for you.

 

A Short Guide on the Dos and Don’ts of Trending Audios

Posted 22.07.2024

A Day In The Life Of A Work Experience Student at Destination Digital. A Day-to-Day Journey Showing What I Got Up To

Posted 12.07.2024

Say Hello to Peak District Business Hub!

Posted 08.07.2024
contact us

If you’d like help with digital marketing, ads management, SEO, copywriting, websites, branding or social media management… or anything else related to the internet and digital, then get in touch with us. We’re a friendly bunch.

You can email us on info@destination-digital.co.uk or give us a call on 01629 810199 or you can use the contact form at the bottom of this page.