Analytics, UI Development

Data Layer for analytics implementation

What is data layer?

It is a JavaScript object we create to obtain certain data and information for analytics. The data, in general, includes information about events or variables, the number of clicks on a certain link. This type of information helps the people to do analysis on different aspects as most viewed or most liked or most purchased. This analysis will be aided for the betterment of the site.

Many tools are available for the analytics in the market. Out of which Google Tag Manager and Adobe Launch are pretty famous.  However, Google Tag Manager is free of cost and Adobe Launch comes with a subscription fee. Here in TA Digital we use both tools based on client requirements.

Lets get back to what is its purpose in UI.

 How to implement?

To begin with its not as complex as it sounds. Its just a simple JavaScript code. We just fetch the required variables based on the requirements. For this illustration I’ll be using the reference of TA Ascent website ‘https://ascentb2c.tadigital.com/content/ascentreference/home-page.html

Lets consider a scenario

In the above site we have a multiple pages, as of the requirement we have to analyze the page the user is in.

step 1: We add a .js file to the directory lets call it ‘dataLayer.js’. In this file we create a global object so that we can send data to it from around the files.

 

step 2: In the object, we add what all components we need before hand so that we can push the contents from other codes to them in the later steps.

 

page name: page name is the name of the site that is displayed on the browser tab.step 3:  The main code snippet to fulfill the requirement can be as follows:

  • //for the page name
  • page url: Page URL is the url of the page in the site.

    //for the pageURL

     

  • siteSection:  site sections are the sub-pages which are directed from the homepage. We can extract these from the page URL .

     

Now we have all the attributes required as per the scenario. All we have to do now is push these values to the global object we declared earlier. It goes something like this:


  •  

The complete code should look like this:

 

Let’s see how its reflected on the website.

Now we have successfully created a dataLayer which contain the information of the page we are in. We can check it in the console as shown in the screenshots above. This information with the global object will be used by the analytics team.

More Info

There are plenty of other scenarios which may include:

  • User info : It contains the login status or user name
  • Purchase info: This contains the purchase status, cost of the purchase, taxes, discount, etc.
  • Product info: product price, color, ratings, etc.

Some of the data is needed when the page is loaded. So sometimes the “document.ready” works and sometimes we have to write the “.push()” directly in the ajax calls and sometimes directly at the source of the data. While other kind of data is obtained after certain trigger points mostly onClick();

Hope this is useful to the one who is reading this.

About The Author