Using Google Tag Manager (GTM) with dataLayer object !

Event Tagging or Tracking is the best way to know the user actions on your website. For example, how many times user has clicked on a particular link\button or downloaded a form or submitted the feedback etc. This helps in knowing your end users as well as improving your website as per the user actions.

Google Tag Manager (GTM) is a very powerful tool for tracking the events using dataLayer object on your website. To understand the basics of GTM please visit the google links- OverView |  DevGuide

Here we are going to cover how to setup a website for GTM and implementing dataLayer object to tag events on the website.

Setting up GTM account and creating Containter

  • Visit https://tagmanager.google.com and login with your google account.
  • Now click on Create Account-

  • Enter a relevant Account Name and click on continue-

  • Enter a relevant Container Name (as a best practice name the container as the website name) and select Web option as shown below and click on Create

(A container contains all the tags for a specific website)

  • Accept the agreement and then a pop up with script installation instructions will appear. Copy and paste both the scripts on your website as per the instructions.

  • The account and container is successfully created.

Below video demonstrates the above steps-

Creating Tags, Triggers and Variables for tracking

  • Variables

First create the required variables for capturing the event details fired from the website. Go to the Variables tab and click on New. Enter the details as below- (Variable Name can be any string)

Event Action 

Event Category 

Event label

Also make sure the Built-In Event variable is enabled as below-

  • Triggers

Go to the Triggers tab and click on New. Now fill the details as below-

Save the details.

  • Tags

Go to the Tags tab and click on New. Enter the details as below-

Save the changes.

Once all the above steps are complete, container must be manually published. A version is created each time the container is published.

There is a Publish option at the top right corner of GTM dashboard.

A version is created and is published to the live site.

All the changes from GTM dashboard are now complete.

Now to fire the event from the website, create a dataLayer object and push it through script.

DataLayer is a JavaScript array which is used to store and send information to Google Tag Manager container.

So add the below script to the section of page which you want to track in GTM. For example, to check how many times user has visited the Contact Me page, add the below script to the ContactMe page-

<

p style=”padding-left: 30px;”><script>
dataLayer.push({
‘event’: ‘eventTrigger’,
‘eventAct’: ‘ContactMe-Click’,
‘eventCat’: ‘ContactPage’,
‘eventLab’: ‘Contact’});
</script>

There are 4 variables inside the dataLayer array. (You can create any number of variables as per the requirement)

The event variable should contain the exact value which was provided while creating Trigger in GTM.

The other 3 variables are the variables created in GTM. Any relevant values can be provided for these variables.

Once this script is added to the page, each time user will visit ContactMe page, this event will be tracked in the Google Analytics report-

This is just a basic implementation for understanding the flow. There are several other options and ways for implementing GTM which can be explored and used.

Thanks for Checking out !

Please share, like and comment.

Categories
Comments
All comments.
Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.