How to Setup Google Analytics Tracking Code for your Web App

Hello and welcome to a brief, very brief, article explaining step-by-step how you can get the tracking code setup for your web application, now that you have your Google Analytics (GA) account sorted. Don’t have your GA account sorted? Read this article to get that done first.

First a Bit of Theory

Let’s cover what on earth this tag is about and why it needs to be implemented properly. As soon as you have a GA account, you have access to a little piece of code called The Site Tag. Now this tag is written in the coding language HTML which just happens to be the same language your developer used to build your website. This makes it simple for your tag to be inserted seamlessly into the code of your web pages. The tag must be in the code so that while your web page loads, it is loaded. Once it is loaded as a part of your web page, it can send an event (AKA a data point) to your GA database. You then view many of these data points all together in Google Analytics and see trends and patterns made up of thousands of these data points.

Imagine it like this… you have an Amazon Alexa in your house. It is plugged in to your electricity because that’s what powers your house just like HTML power your web app. It just sits there being boring until a very particular thing happens. For Alexa it is someone saying “Alexa.” For your tag it is someone landing on a web page of yours. Alexa tells you the answer to your question whereas your tag sends a little package of data to your database. The end. Am I making this simple and easy to understand?

How to do this thing

There used to be one way and one way only: copying the tag from your GA settings page and pasting it directly into the HTML code for your site header.

Right now there are so many helpful tools to get this right for you. But we’re dealing with web applications in this article so you won’t have a third party tool to use. You will have a team of developers. Let the devs handle the HTML but you will need to send them the code and instructions.

To get your code. Follow this step by step guide:

  1. Navigate to Google Analytics (www.analytics.google.com) and open your Settings Menu highlighted below.

2. Click on Tracking Info, as highlighted below.

3. Click Tracking Code and the next screen will show you your code! Easy right? It’s the HTML bit under the heading Global Site Tag (gtag.js).

4. Now all you need to do is click anywhere in the block of code to highlight it. Copy it by right clicking and selecting copy or hitting keys cntrl + c on your keyboard.

5. Paste this code into a document or email and send it to your devs. Here are the instructions that go along with it:

  • Copy and paste this code as the first item into the <HEAD> of every web page that you want to track.

Could it be more simple? I know, not really.

Why must it be pasted into the head? To be honest, it doesn’t have to be. It will work no matter where it is put. Putting it as the very first thing in the head of the page makes sure you start tracking before your page is even fully loaded. This means you can see data on bounce rate and page load time which can help you to troubleshoot if your page is not as successful as you want it to be.

And that’s it… come back form more in our next issue next week.

Leave a Reply

%d bloggers like this: