English Posts

Track Clicks within Navigation Menu with Google Tag Manager

Tracciare i click nel Menù Navigazione con Tag Manager

In this post I’ll show you how to track the clicks on the navigation menu, thanks to the use of Tag Manager and Google Analytics.

Many websites have navigation menus within which there are several categories.

This makes navigation easier and often intuitive for the user.

As an analyst you will want to know if these categories, in addition to being present in the menu, are also clicked, so you can make decisions about their improvement.

Let me show you how you can implement this solution.

Inspect the page

My goal is to be able to measure how many clicks occur on the different categories within the navigation menu.

navigation menu

Thanks to the Click type trigger and using the CSS selector, I can activate the event by being able to read some specific HTML elements of the page.

Create the trigger

The first step is to create a new trigger with the following configuration:

  • Trigger Type: Click – Just Links
  • This trigger fires on: Some Link Clicks
  • Conditions: Click Element – matches CSS selector – #menu-menu.menu a
click link trigger

The final part ‘#menu-menu.menu a‘ will be different for each website and requires you to inspect the page.

In my case the value entered is written like that because the element I want to track (highlighted in green) is an attribute marked with the letter ‘a‘ and is a descendant of the id, which is indicated with the symbol ‘#‘, called ‘menu-menu‘ with class, which is indicated with the point ‘.‘, ‘menu‘.

inspect the page

So, since:

  • # indicates ‘id’
  • . indicates ‘class’
  • a is the ‘attribute’

The final writing will be: #menu-menu.menu a

Everything without space, except the final ‘a’ which has a space.

Save the trigger.

Create a tag

I create a tag to pass the information to Google Analytics.

Tag’ll have the following configuration:

  • Tag Type: Google Analytics: Universal Analytics
  • Track Type: Event
  • Category: Click Menu (you can choose the name you want to give to the event category you will see on GA)
  • Action: Menu (choose the name you prefer)
  • Label: {{Click Text}}

Remember to select the Google Analytics variable to send the information correctly.

event tag in gtm

Now associate the previously created trigger to the tag just set, in order to send the information to GA.

Final configuration:

tag and trigger in google tag manager

Save it.

Test it

Now we have to test the implemented solution.

The first test can be done in GTM, thanks to the Preview mode.

preview mode in tag manager

By clicking on one of the categories in the navigation menu:

click on the navigation menu

I can see if the tag activates correctly:

click preview in tag manager

By clicking on the tag, you can see what information is passed to Google Analytics and whether the trigger has been activated correctly:

information passed to analytics

Now we have to test it in Google Analytics

In the Real Time report we can see if the event is correctly processed or there are any issues:

real time report analytics

As you can see in the image above:

  • 3 are the clicks made in the last 30 minutes on the category, during the tests;
  • The ‘Click Menu‘ Event Category is collected, (it’s the I gave inside the tag in Tag Manager);
  • The Action and Label Events are also collected according to the values indicated above;
  • I created a Test view so as not to dirty the data in the main view;

Publish the version

If all the tests are successful made, we can publish the version so that we can make the changes live and start collecting data.

Clicking on the Submit button will open a new window, in which it is strongly recommended to indicate the changes made, in order to have a clear history for the future.

submit in tag manager

At this point…good analysis 🙂


You may also be interested by the following articles:

What are Folders in Google Tag Manager

Tracking Google Data Studio Dashboards with Google Analytics

How to implement Cookies with Google Tag Manager and Cookiebot

Schedule Emails in Google Data Studio

Find Query Parameters on Google Analytics

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *