How to Set Up Google Analytics on a Website – Guide for Beginners

How to Set Up Google Analytics on a Website – Guide for Beginners

One of the very first things you need to do after launching a website is to set up an analytics system. If you are new to analytics, then this article will help you.

Why I need analytics? You know about social medias. It shows the number likes, views, votes etc. Isn’t it? It helps to know how your audience react to your posts – this is analytics. Similarly, your website also needs a system to analyse and generate user metrics. So, an analytics tool helps you to gain insights about your website visitors and how they interact with your website.

So what it does? Analytics tool generates useful graphs, reports, and statistics about your visitors’ activity. Based on these, you can measure the success of your website and make necessary changes to enhance the user experience. Remember, the main purpose of any website – be it a business website or a personal blog or an e-commerce store – is to serve its users well.

Google Analytics is by far the best tool available today to do this job. Like many other Google products, it is also free to sign-up and use. It also offers a premium tool for enterprises. However, we will be looking towards the free version here.

If you are completely new to websites, you may still be wondering what are the uses of installing Google Analytics. So, before diving into the instructions, here are a few benefits it offers:

  • Know how many people visit your site today, yesterday, last month, this year etc
  • How many pageviews your site received in a given time period
  • Real-time analytics – users currently viewing your site
  • Page-wise metrics – which page are popular
  • What type of device your visitors use, what are the screen resolutions
  • Where the visitors come from – city, country etc.
  • Percentage of new visitors/returning visitors
  • Bounce rate – how many users quit soon
  • Event analysis – button clicks, form submissions, product purchase etc.
  • …and much more

Now coming to the setup process. There are mainly two ways to add GA to a site:

  1. Simplest Method – Directly adding the gtag.js to your site code.
  2. Advanced – Adding via Google Tag manager – The first method is perfectly fine as far as your tracking needs are only basic. But if your needs evolve and you need to multiple tags and event tracking, things get difficult to manage if you keep on adding code manually. In such a case, the Tag Manager can save your time. It can easily add additional tags without messing with the HTML of your site.

Simplest Method to Set Up Google Analytics on a website

This method completes in just three steps – (1) signup for GA, (2) add the tracking code to the HTML, (3) verify the working.

Step 1: Sign Up for a Google Analytics Account

Whichever method you choose, the first step is to signup for a GA account. Before that, register for a Google Account if you don’t have it already. After that, head over to https://analytics.google.com . You will be invited with a page describing the three steps mentioned above.

Now click on the Sign-Up button towards the right, which takes you to the registration page. Since we are looking to install GA on our website, select the website option. Ignore the Mobile App option for now.

In GA, you can add up to 100 websites or apps (properties) under one account. While registering for an account, you have to register a property along with it. Later you can add more. So, give an appropriate name for your account (eg., your personal name or company name), website (usually the website title) and the home page URL. Also, select an appropriate category for your website, the country, and the timezone.

registering for google analytics

Below that, you have the option to choose how Google can use your analytics data. I usually don’t bother about these and keep the recommended settings.

Finally, click the blue button which says – Get the tracking Id. You will probably get a popup asking you to accept the terms and conditions. Accept these and continue.

The registration part is now complete and you have arrived at the next page which displays the tracking code. It is called the Global Site Tag or simply gtag.js.

how to get google analytics tracking id

The code includes an Id in the form UA-XXXXXXXXX-X. This is your tracking Id.

Step 2: Adding the Code to your site’s HTML

Now you have completed the registration. But still, your website – living on your server – does not know that you have registered for analytics. So it will not send any data to Google. For that, you have to add the code you got above to all the pages on your website, preferably just below the opening <head> tag.

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-31952548-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-XXXXXXXX-X'); //Paste your tracking Id here
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Site</title>
</head>

If you are still not confident about editing the HTML, ask a developer to do it for you. Things are easier if you are using WordPress or similar content management systems. There can be ready-made plugins which insert the code by entering the tracking Id.

Step 3: Verify that the tracking is working

Lastly, we have to verify that Google Analytics is correctly processing the visits. For this, visit a page on your site from any of your devices. Simultaneously, check the Real-Time reports on the Analytics dashboard.

Here I have made a visit from my mobile. That’s what the green bar says – 1 active user from a mobile visiting the home page.

Real-Time Report - Analytics

After testing, you may no longer need to log your own visits. I will discuss the different methods to filter out self-visits in a later post.

Advanced Method: Using Google Tag Manager

Maybe you need to add other tools like Adobe Analytics besides Google Analytics. Tag Manager integrates it easily without the need to edit code. Moreover, adding event tracking is also easier.

In the long run, Tag Manager is beneficial as it helps you to manage multiple things from a single dashboard offered by Google.

So these are the steps to integrate Google Analytics via Tag Manager:

  1. Create an account in Analytics
  2. Create an account & a container in Tag Manager
  3. Create a container (container here means the website you want to track)
  4. Add the tag manager code to your website (yes, you have to deal with the code, but only for the first time)
  5. Set up a variable to store your GA tracking Id
  6. Add the built-in Google Analytics tag
  7. Preview & Hit the Publish Button

Step 1: Create an Analytics account

The process is already described in the previous method. Refer to it.

Step 2: Create a Tag Manager account

Head over to https://tagmanager.google.com. You can use the same Google Account to sign-up. On the next page, give a name for your Account. Similar to the account in GA, you can manage multiple websites under one account.

Register for Google Tag Manager

Step 3: Create a Container

Containers in tag manager are almost synonymous to properties in google analytics. Enter the URL of your website as the container name. Choose Web & click the Create button.

Creating Container

Step 4: Add the Tag Manager Code to the site

After creating the container, you get a box on the next page with the code pieces you have to add to your site. Luckily for GTM, you have to do this once for all. The GTM code takes care of all the subsequent tags you might want to add in the future.

Installing Google Tag Manager
<!doctype html>
<head>
    <!-- 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-XXXXXXX');</script>
        <!-- End Google Tag Manager -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Site</title>
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <!--Rest of the Code goes here-->

</body>
</html>

Step 5: Set up a Variable in Tag Manager

Now let us connect the GA Property to GTM Container. For this, go to the Variables Section and create a new user-defined Variable. Choose Google Analytics Settings as the Variable Type.

Fill the Tracking Id field with the tracking Id you created in the first step.

Also, give a name to the variable – GA tracking Id. Let us leave other fields as it is and click Save.

The new variable is ready to use and appears under user-defined variables.

Adding user-defined variable in Google Tag Manager

Step 6: Add the Google Analytics Tag

Navigate to the Tags section and click New. Select Google Analytics – Universal Analytics as the tag type. It is one of the integrations available in GTM right out of the box.

On the next section, under tag configuration, select the variable – GA tracking ID – we have created in the previous step.

Below that, set the trigger to All Pages. This tells GTM to load the GA tag for all page views.

Adding Tag in Google Tag Manager

Step 7: Preview & Submit the Changes

Before finalizing the changes you have made, GTM allows you to live preview and verify the changes.

Click the Preview button to enable the Live Preview mode. Now if you visit your site on another browser tab, you can see a new console at the bottom.

If everything is done correctly, you should see the name of the Tag listed under Tags Fired On This Page section.

Preview Tag Manager

Now come back to the the GTM dashboard and click Submit. It prompts you to give a version name. Give an appropriate name description about the changes we have made. Finally, hit the Publish button.

Now if you visit the site, you should see it in the Real-Time report section of Google Analytics.

Conclusion

So that’s how to integrate Google Analytics with or without using the Tag Manager. It works for any type of website – be it a static site, WordPress, or a custom web application. Now should you use the Tag Manager? In my opinion, it is worth the effort to learn it and use it.

Still having problems integrating Analytics to your website? Tell about it in the comments.

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *