Web Analytics is the act of measuring, collecting, analyzing, and reporting of web data to understand and optimize web usage.

In this article I used two Google tools to collect data and store the data in reports.

Project Introduction

In this project I will tell you how to track different web page elements and how to collect data to analyze user action and behavior on your website for web analytics.

The objective of this project is to provide you with a data tracking guide for web analytics so you can collect the right data in the right way and analyze it to get insights.

In this project I used the Samsung website as a sample to show you how to track different elements.

I used Google Tag Manager and Google Analytics to track data and create reports.

To connect GTM to websites that I don’t have access to their code, I  used a Google Chrome Extension called Adswerve to simulate the connection just for my device so I can work with it.

Before I start, I have to tell you that you must have knowledge and experience of working with GA and GTM to be able to understand what is going on.

If you are not familiar with GA or GTM I have articles on those which I will leave the links here.

Web Analytics Tools Used in This Project 

So as I mentioned earlier I used GTM and GA for this project.

I used GTM or Google Tag Manager to create tags, triggers and variables to collect data and I used GA or Google Analytics to see that data in reports.

I used GA version 4, since the Universal version will be down soon.

In the process of the project, first I created a new GTM account and then I connected to the website that I wanted to test.

After that I used Chrome inspection to check out the HTML and CSS codes, elements and attributes.

Beside that I used GTM preview mode or debug mode to dig more and check out click elements, ids, class and so on.

Next, I decided on what element  to track, so I created the tag and trigger, then I checked out the debug mode to make sure it’s working and finally I published the tag to see the data in GA.

What User Actions Can We Track On a Web Page? 

Using GTM you can pretty much track every action that users do in your website and application.

So here I provide a list of actions that you can track using GTM:

• Pageviews (When someone views a page)
• Element impression (When someone views a specific part of your web page)
• Element click (When someone clicks on specific part of your web page)
• Form submission (When someone submits a form)
• Video & audio play (When someone plays a specific video or audio)
• Text copy (When someone copies a text on your web pages)
• File download (When someone downloads a file on your web page)
• Social media share (When someone shares one of your articles)
• Page print (When someone prints one of your pages)
• Scroll (When someone scrolls on one of your pages)

For example you can track how many times users saw a product in your home page and how many times users clicked on it and using these two you can calculate the CTR or Click Through Rate of that product on your home page.

How To Track Common User Actions On Web Pages? 

OK, now you will learn how to track 5 common user actions on your websites.

These actions are:

• Pageviews
• Clicks
• Form Submissions
• Scroll
• Impressions

Pageview Tracking 

You can track pageview using 4 main variables, Page URL, Page Path, Page Hostname and Referrer. 

• Page URL : returns a string containing the full URL of the current page without hash fragment (https://www.alishafaghi.com/article?parameter=true)

• Page Hostname : returns a string containing the the hostname of the current page (www.alishafaghi.com)

• Page Path : returns a string containing the relative path of the current page (/article)

• Referrer : returns a string containing the URL of the page which brought the visitor to the current page (https://www.alishafaghi.com/blog/), from /contact-us

So let’s say Samsung wants to see how many users check out the Galaxy S22 model’s page.

Here is the page url of this Samsung smartphone model:

https://www.samsung.com/uk/smartphones/galaxy-s22/

So in order to track this page and collect data we can use Page URL or Page Path.

These are the steps to track specific pageviews.

1. I checked out the link to see which variable I should use, since it’s quite long and I have no idea which path will lead to, I chose the Page URL variable to be more safe.
2. I created the GTM tag for GA4 and also I added a parameter to find out the referral page of this pageview using the Referrer variable.

Note: the event name you enter here will show up in your GA4 events report.

3.Then I created the trigger using the Page URL of the page.

4. Next I test and debug it.

As you can see, the tag I created just fired.

5. Lastly I publish the changes so I will be able to check out data in GA4, here it is.

Click Tracking 

You can track any click on web pages.

It can be clicks on CTAs (Call To Actions) or even clicks on sliders, menu and any other clicks.

Just like the Pageview Tracking, you need to be familiar with click variables, so let’s take a look at all click variables.

• Click Element – returns an HTML element that was the target of an auto-event action; this object is retrieved from the gtm.element key in dataLayer
• Click Classes – returns a string contained in the className attribute value of the auto-event element
• Click ID – returns a string contained in the id attribute value of the auto-event element
• Click Target – returns a string contained in the target attribute value of the auto-event element
• Click URL – returns a string contained in the href or action attribute value of the auto-event element
• Click Text – returns a string contained in the textContent / innerText attribute value of the auto-event element

So depending on the situation, you can use any of these variables to track clicks.

I’m going to show an example and in this case I will be using the Click element and CSS selector, which is one of the best ways to track clicks.

Let’s say Samsung wants to measure the number of clicks on a specific CTA on the home page.

Here there are the steps to track clicks:

1. First I will use Google Chrome inspect to find the element using the CSS selector.

So this is the CTA that I want to be able to track.

And here is the element inspection of the CTA.

I dig in codes to find a specific class or id or even URL that’s unique to this element and I will use it to tell the GTM when to fire the tag for this element.

So once I find what class or id I’m gonna use to track this element, I will test it here on inspect area.

I’m going to use the URL target of the CTA.

So I used ahref attribute of the <a> element, so I copied this from the code.

URL target of the CTA: “/uk/tvs/all-tvs/?neo-qled”.

On the right side I will click on the plus sign to use CSS selector and use CSS selector rules.

I searched the element that I want to track using this selector:

CSS selector type: a[attribute*=value].

This selector selects every <a> element whose href attribute value contains the substring “value”.

So, this is how I tried to find the CTA using the URL and the CSS selector in the inspection area:

CSS Selector I created to target the CTA : a[href*=”/uk/tvs/all-tvs/?neo-qled”].

To make sure that this way I only select the element that I want to track, I tried to change its background color style just to be able to make it different from other elements and check out if any other elements changes too. It worked and the only element that changed was the one I was hoping for.

So now I changed the color style of the Buy Now CTA to black and white.

By the way you can check out the list of CSS selectors here:

https://www.w3schools.com/cssref/css_selectors.php

2. Next I created the tag and trigger.

3.Next I test and debug it before I publish it.

So it worked and I’m ready to publish it.

4. I published the tag and I will check out the GA 4 dashboard to see the event.

Here in the GA 4 event section we can see the event for clicking on the CTA.

So this is  how to track clicks on a CTA.

Form Submission Tracking 

To track form submissions we need to know variables that will help us, although form variables are exactly same as click variables but I have list them below:

• Form Element
• Form Classes
• Form ID
• Form Target
• Form URL
• Form Text

The first step in form tracking is to know what type of form we are dealing with.

Some forms will lead you to another page after you fill it up and some others will just show you a message on the same page.

Depending on what type of form you are planning to track, you can use different variables.

In this example I want to show you how to track a form using form id.

So let’s say Samsung wants to measure how many people filled up this form.

Here is the link to the form:

https://www.samsung.com/uk/b2b_forms/why-samsung-contact-us-form/

Here are the steps to track this form.

1. First I used Google Chrome inspect to check out the form id and to see whether it’s unique or not! 

As you can see the id is unique so we can use it to track this form.

Note: you should talk to developers to make sure that there aren’t other forms in this domain with the same id, although I will show you how to  make sure that even if there are other forms with the same ids in other pages, this event measures only this form.

2. Next I created the tag and trigger in GTM.

I created a tag for GA4.

In creating the trigger, I used the page URL to make sure that the trigger fires only when the form with the specific id in a specific page gets filled up.

3. Next I test and debug it and it’s working so I published the event I just created.

5. Finally I published the tag and check it out 

Scroll Tracking

Using GTM and GA4 you will learn how to track how well a user scrolled a page.

First, let’s see the scroll variables.

• Scroll Depth Threshold : returns a number with the value of the scroll tracking threshold that was crossed (e.g. 25 for 25 percent or 25 pixels, depending on which the trigger is configured with).

• Scroll Depth Units : returns a string with ‘percent’ or ‘pixels’, depending on which threshold type the trigger is tracking.

• Scroll Direction : returns a string with ‘vertical’ or ‘horizontal’, depending on which direction is being tracked with the trigger.

I used the Scroll Depth Threshold to track user scrolls, so every time a user scrolls in a page I can see in GA4 how many percent of the page user scrolled.

These are the steps to track scrolling pages.

1. First I create the tag and trigger.

To see how many percent the user scrolled, in the parameter section, I added the Scroll Depth Threshold variable and also I added the page URL to see which page the user scrolled. 

Since I wanted to gather scrolls on all pages, I just used the Scroll Depth variable on all pages and also because I wanted to track the vertical movement I chose the vertical scroll depth and specified the percentage that I want it to track.

2. Next I test and debug it in preview mode in GTM and you can see that the tag fired and it’s working.

3. So I published the event and I checked in the GA4 dashboard to see the details.

You can see the event and the parameters I set to find out more about the scroll event.

We can see the scroll depth and the page scrolled happened there.

Impression or Visibility Tracking

This time you will learn how to track what users see before even clicking on anything, using this data and click tracking data you will be able to calculate CTR of each element on your web page.

Let’s say Samsung wants to know how many users see this section on this page (https://www.samsung.com/uk/trade-up/ ) daily.

First, we need to check out the visibility variables on GTM:

• Percent Visible: returns a number with the percentage of visibility for the element whose visibility is being tracked (e.g. 50 if half of the element is in the viewport).

• On-Screen Duration: returns a number with the total cumulative time (in milliseconds) that the element has been in the viewport when the trigger fires.

1. In the first step I tried to find out how to track the element.

Just like the Click Tracking, I used a CSS selector to find the element on the page and tried to find a way to target only this element.

So first I inspected Chrome and found its section.

Then I used a CSS selector to specifically target this section.

All I didi is I right clicked on the element and in the copy section I chose the copy selector.

Then to make sure that the address is unique, in the CSS selector on the right, paste the address and change its background to red, to see if any other element changes too.

As you can see only this part is red so I can use the selector address to track this section.

2. Next I created the tag and trigger for the GA4 event.

Since I want to check out the duration of time each user took to see the element, I used this variable to measure it.

Next, I configured the trigger which was a bit tricky.

First, as I mentioned earlier I used a CSS selector to track this element.

I wanted to track this element every time a user sees it in a pageview so that’s why I choose, “Every time an element appears on screen”.

The next thing which is quite important is how  many percent of the element should be visible in the user’s browser that counts as a view? I choose 50%, so if 50% of the element is visible to the user, the trigger will fire.

Lastly, you can define a time that the user needs to spend in order for the trigger to fire. So I chose 1000ms which is 1 second, it means the user must at least wait 1 second or the triggers won’t fire.

So to sum up, the way I configured the trigger, the trigger will fire only if the user sees at least 50% of the element for 1 second.

One more thing, I added the page URL to make sure this triggers only fires for this section on this page.

3. Next, I test and debug it and as you can see it’s working.

4. Finally I published the tag. I check out the GA4 dashboard to see the data.

ou

Alright, so in this section we saw how to track common user action on web pages.

Next you will learn how to track any user action that might be specific to your website and business.

How To Track Any User Actions On Web Pages Using GTM’s Advanced Feature?

I love this part of the article. ?

In this section you will learn how to track anything you might need to track.

It can be tracking user’s search, tracking actions of a specific segment of users, tracking different audio or video play and so on.

To be able to track anything, I used GTM’s advanced feature called Data Layer or  DL.

If you don’t know what DL is and want to know more about GTM, you need to read the article: Google Tag Manager Guide .

To use DL we need to be able to create measurement plans and have some technical information too, also in the process of implementing the project we need to work with a developer.

Steps to use Data Layer for tracking data

1. Create a measurement plan: by creating a measurement plan you are specifying what you are looking for and which data you want to collect.
2. Decide on how to pass data to DL: next you need to decide how to pass data to DL, usually you need to create a document for the developers of your website and explain to them when to pass data to the data layer. You need to copy the variable you specify in the measurement plan and paste it in .push data layer java script code and give it to your developer and explain exactly when to run the scripts.
3. Extracting data from DL: once the data gathered in DL, you need to create variables to be able to use those for creating tags and triggers, so that you can see the data in GA4.

Here is an example to see what actually happens when we want to use DL to track data.

I’m not going to create a real measurement plan (beasuse that takes a while) but just to show you, I created a sample measurement plan.

Data Layer Example 

Measurement plan

Objective: Let’s say Samsung wants to check out the performance of a website’s search engine and see how well it’s performing.

KPIs: In this step I defined some KPIs to track and be able to measure the performance of the search engine in the Samsung website. Since I want to track how well the search works, I need to be able to track these data:

• The search term that user enters 
• The result that user sees
• The result that user chooses
• The rank of the result that the user chooses

Using this data I will be able to check out what the user searched, what results are presented to him and what result the user chose.

Next, I need to name each item as a variable and give those to the developer in the form of the data layer javascript code.

Data Layer code:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'event name',
 'Parameter 1': 'parameter 1 name'
 });
</script>

It’s necessary to have event section in the script code above and I need to provide an event name for the data layer, here I provided the event name and the list of parameters names:

• Event name = “SearchEngine”
• Parameter 1 :  The search term that user enters  = “KW_Searched”
• Parameter 2 :  The result that user sees = “Search_Result”
• Parameter 3 :  The result that user chooses = “Result_Chosen”
• Parameter 4 :  The rank of the result that the user chooses = “Result_Rank”

The script code that I will hand to the developer:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'SearchEngine',
 'KW_Searched': '', //return the search term of user when he searched    something
 'Search_Result': '', //list the search result showed to user when search happened
 'Result_Chosen': '', //pass the option that user chose
 'Result_Rank': '' //pass the rank of the option that user chose
 });
</script>

Passing data to Data Layer

Next, I will hand the script code that I provided and I will explain the details on the document and also I will meet with the developers to explain the details in the meeting too.

Then after the technical team let me know that everything is set, I will test and debug the process.

Extracting data from Data Layer

Lastly, once I’m sure that everything is working, I will need to create variables to extract data from the data layer.

In GTM, you will need to go through these steps to create new variables.

So, let’s say you decided to create a variable for parameter 1 :

Go to Variables > click on New on User-Defined Variables section > click on Variable Configuration > on the right, choose the Data Layer Variable > in the Data Layer Variable Name field, enter the name of parameters you entered in the DL script code (in this case (KW_Searched)  > CONGRATULATION! You just created a data layer variable.

From now on you can create tags and triggers based on these new DL variables.

Also, I created variables for other 4 parameters too.

Next, I want to be able to see the data for this process in GA4.

So I will create a tag and trigger to pass the extracted data from DL to GA4.

I entered the name of the event exactly the same as the one I entered in the script : “SearchEngine”, and I added all the parameters too with corresponding DL variables that I created earlier.

To create the trigger, in the trigger list I used the custom event option and I named the event exactly the same as the event in the script code: “SearchEngine”.

Now, I will simulate passing data to DL using Google Chrome Console, to show you how it works.

So, I copy the script code of DL and paste it in Chrome console and I run it.

I filled the parameters here manually just to show the result in GA4.

Next, I will use GTM preview mode to see the event and parameter passed to the Data Layer.

As you can see, these are the event names and parameters we ran in the Chrome console.

In the summary section you can see the event name and if you click on it you can see the reset of parameters.

Since we already created the variables, tags and triggers, we can check the data in GA4 now.

You can see the Search Engine report on the event list.

If you click on the event, you can see the parameters and the values.

And if you click on the search parameter, you can see its value.

In this example, you can see that the user searched “S22” and 3 results were shown to him: “S series” , “S23”, and “S22”.

The user chose the ”S22” option which was in the third rank, it means that the search engine should be optimized because what the user searched doesn’t exactly what he saw and what he chose beachuse the “S22” result was not in the first place on search options.  

So, in this way I can track how the search pattern works on Samsung website.

This is how you can track every user action in a web page, using Google Tag Manager (GTM) feature called data layer and Google Analytics (GA4) for web analytics.

Conclusion

In this article I talked about different methods of tracking different user actions in web pages and how to collect the data to analyze it. These steps are crucial to implement a successful web analytics process which can help businesses to increase sales, decrease expenses and speed up the growth.

In this article I used Google Tag Manager or GTM and Google Analytics 4 , to show you how you can track user actions, collect data, store data, analyze data, extract insights and create reports to make data driven decisions.

References 

These websites have comprehensive information about the Data Layer and I also used some of this information.

https://developers.google.com/tag-platform/tag-manager/web/datalayer

https://www.analyticsmania.com/post/datalayer-push/

https://www.analyticsmania.com/post/what-is-data-layer-in-google-tag-manager/