Setting Up Google Tag Manager For Your Website

In this post, we will learn to intrigrate Google Tag Manager in a website.

Posted by Author At June 26th, 2016

We all love google analytics right? Oh yes, It’s simply great. Just copy the script it gives and add it inside thetag and all the web/app metrics we need would be available in the analytics dashboard. It’s very convenient, easy and great solution, but it has much more to offer than what we see. And to set them up and use, every time you change something for say event tracking: each time you change something with your tracking, you  edit and update the script in the website.


Basically, we might need  as many  such scripts if we’re considering other third party analytics tools such as google analytics. But what if we could handle all these metrics acquisition that occurs inside website in an one central place? There comes Google Tag Manager. One of the greatest advantage of using google tag manager is that you don’t need to add any other tracking scripts into your website, since it supports almost all analytics tools that are in the market. There are more we can do with google tag manager, from tracking a button click to the form interaction, most clicked link to many more. These are the topics for another post, however in this post, I’m going to guide you through the basic setup of google tag manager, we will learn to create custom variables and setup the tag manager for basic tracking of google analytics.

 

Before We begin, let's make an account with google tag manager at the first place, go to https://tagmanager.google.com/ and sing in with your google acccount.

  1. First input account name, in my case it’s The Creative Road
  2. After clicking continue, you will be required to input the container name, you can put your site name or url string in the box.
  3. Now choose the container type, if it’s a website, choose web, in case of mobile app, choose the respective platform. (In this post, we follow the web container).
  4. Create the container. Copy the code.

I suppose you already have google analytics code in the head of your html, however you will not need that once you put google tag manager code. Now let’s paste the container code just after thetag, and you can remove the google analytics script from the head section of your website.

So let’s set up google analytics basic tracking, but before that, it’s good to set up some user defined custom variable which comes of our most use inside the Google Tag Manager UI. Those variable can be like Google Analytics Universal property, since they will be widely used inside GTM, and it’s inconvenient to manually put its value every time. So let’s create a custom variable named {{googleanlyticsProperty}} or simply {{gaNumber}} or anything else of name you like:

  1. Go To Variable
  2. Click on New
  3. Choose a variable type “Constant”
  4. Now put the GA-Universal code from your Google Analytics account to the value box.

Cool, You just set up a custom variable in GTM.

Now let’s integrate the google analytics tracking from GTM UI. Click on Tags : And New, a following screen will appear:

    1. Now choose Google Analytics as a product.
    2. Choose tag type, Universal Analytics.
    3. Click continue, configuration tag input fields will appear.
    4. Select the custom {{gaNumber}} custom variable which represent our GA-Universal code from the drop down.
    5. Click on ‘Enable Advertising Feature
    6. Select Track Type ‘Page Views’ and click continue, you can see the advance options, but let’s leave them now for now, we’re just focusing on basic uses.
    7. Now we come to most important part, “Fire On”, where we tells script where and when to fire, so let’s choose in “All pages”, since we need the information about the pageviews of every pages inside our website in Google Analytics.
    8. Now Save the Tag .

There will a red publish button in the header navigation, When you click on that, a preview & debug option will appear in the model box, click on preview, now go to your website a GTM console will appear, showing the events that occurs in the website. For now we do have a trigger that will be fired every time we visit a page, so it’s supposed to be fired once we refresh the page.

If you saw the tag "Fired" in the debug screen, then you successfully implemented the procedure. Now you will be successfully able to see the page view metrics inside your Google Analytics Tool.

 

One of the best thing about GTM is that it always let you decide when and where to fire the tag, giving you the full privilege of accessing your desired metrics. In the next post we'll get a bit messier and integrate a content group feature of google analytics into google tag manager.


Posted Under