How To Track Top Navigation Menu Clicks via Google Tag Manager

In the dynamic world of online presence, understanding how users interact with your website is paramount for success. Enter Google Tag Manager (GTM), a game-changing tool designed to simplify the process of managing website tags and gaining valuable insights into user behaviour.

Picture this: your website’s top navigation, the digital roadmap guiding visitors through your digital space. Ever wondered which links are capturing the most attention? This is where the value of tracking top navigation clicks comes into play. With just a few simple steps, you can transform those clicks from simple actions into user insights, illuminating user pathways and paving the way for a website that captivates its audience.

First we’ll need to create a trigger..and then a tag. You might already know what these are (in which case you can skip to the steps below), but in case you don’t.

Google Tag Manager orchestrates data collection through its key components: triggers and tags.

Triggers:

• Initiators: Triggers drive data collection, specifying when it should occur.
• Configurable Conditions: Each trigger has customizable conditions, defining user actions or page events that trigger data capture.
• Granular Targeting: Triggers control data collection for specific interactions, from page views to button clicks, ensuring relevant and accurate data.

Tags:

• Data Collectors: Tags capture specified data according to trigger specifications.
• Diverse Functionality: Depending on configuration, tags collect visitor behaviour, track conversions, or inject code snippets for specific functionalities.
• Seamless Integration: Tags integrate with third-party services and analytics platforms (like GA4), facilitating data transmission and analysis.

Synergy in Action:

The power lies in the interplay between triggers and tags. Linking them ensures data collection at relevant moments, optimising performance and preserving user privacy.

Now…Let’s get started!

Step 1: Create a Trigger for Top Navigation Links

1.a. Access the Triggers section in your GTM workspace and click “New”.

1.b. Create a new trigger and select “Link Click” as the trigger type.

1.c. Enable the “Some Link Clicks” option.

1.d. Add a condition to target only events (clicks) on top navigation links, as follows;

1.e. We have used CSS selectors to specify the link click elements (e.g., .top-nav ). To find the HTML element specific to your website, head to your site, (we’ve used glowmetrics.com – our site as an example) and right-click and select inspect at the bottom of the dropdown.

1.f. This will open the inspect window.

1.g. If you want to change the area in which your inspect window opens, click the 3 dots in the top right corner of the inspect window and select from the “dock side” options, where you want it to be displayed (we find the bottom easiest to work with).

1.h. Now, we have to find the corresponding HTML element for our top navigation panel. To do this you can simply place your cursor on the navigation panel (or any other area you want to inspect). Alternatively, you can right click on the area and click “inspect” again. Either of these options should highlight the piece of code corresponding to that area (see below image), you may need to move your cursor around a few times to find the right line. For our site <nav> seems the most appropriate as it contains all the link click options in the top navigation bar.

1.i. So, now we can add nav into our trigger condition in Google Tag Manager (see below). You may notice I have removed the ‘<>’ signs from <nav> to signal the trigger should fire on all clicks under the navigation panel. I have also added an “a” (“nav a” – below).  Adding ‘a‘ after nav ensures a more robust trigger, this is because In HTML, the <a> element is used to create hyperlinks, or anchor links. The “a” stands for “anchor.” This element is commonly used to define clickable links that navigate to other documents, pages, or resources on the web, but we’ll not get into that now. 

1.j. Now we have our Trigger, we need to name it. We want this to be a simple and easily recognisable name, like “Top Nav Clicks”. This will help prevent confusion between triggers once more tags are added to your site. Also remember to click “Save”.

1.k. Your Trigger is complete :D. You should now be able to view it in the triggers section of your GTM Workspace. 

Step 2: Create a Google Analytics 4 Event Tag

2.a. Navigate to the Tags section in GTM and click “new”.

2.b. This window should open, click “Tag Configuration”.

2.c. Select Google Analytics as the “Tag Type”.

2.d. Next, Click “Google Analytics: GA4 Event”.

2.e. Now you want to add in your Measurement ID, this is a unique identifier for your web data stream (which is a website registered within Google Analytics). The format of a measurement ID in Google Analytics 4 is ‘G-‘ followed by a combination of numbers and letters, such as ‘G-PSW1MY7HB’. This can be found in your GA4 account. Here, we will also name our tag, we want this to be an easily recognisable name, similar to that of our trigger. GA4 Tag naming conventions stipulate that tags cannot have spaces or capital letters, as such we will space our words with underscores “_”, giving us the tag name “top_nav_click”.

2.f. Next, you may want to add some parameters. In GA4 parameters are additional pieces of data about a user interaction on a website and/or app, offering further details and context about the interaction. To do this select the “Event Parameters” drop down, then click “Add parameter”. For every additional parameter you wish to add after this, click the same button.

2.g. Click the “+” button beside the “Event Parameter” box.

2.h. We are going to be adding the “Click Text” (this will capture the text clicked by the user) and “Click URL” (this will capture the URL clicked by the user) parameters. NOTE: These will have to be added separately. However, the steps are the same. Here we will add the “Click Text” parameter.  Select the “Click Text” parameter.

2.i. Once added it will appear like this. Next, we must rename our event parameter using the same naming conventions as the event name. This gives us “click_text” – which should be typed into the event parameter box.

2.j. Next we need to add a “Value”, this is done in the same way as adding the event parameter. Click the “+” button beside “Value” and select “Click Text” from the menu. Your finished event parameter should look like this (see below). Note: You do not need to rename the parameter value. 

2.k. The Click URL can be added by selecting the “Add parameter” button and following the same steps.

2.l. Now we can name our tag. Once again, this should be an easily recognisable name indicating exactly what the tag is. We’ve gone for “GA4 – Top Nav Clicks”. Adding “GA4” at the start allows all GA4 tags to be listed together, making them easier to track down in the future. 

Step 3: Add the Trigger to the Tag

3.a. Click on “Triggering”.

3.b. Select the “Top Nav Clicks” trigger from the list.

3.c. The trigger has now been added to the tag, click “Save”. 

Step 4: Test your Tag

Before we publish this tag, we need to make sure that it’s working properly.

4.a. Navigate to the GTM interface and select “Preview”. This will open a new browser window.

 4.b. Here, insert your website URL, then press connect.

4.c. This will open your website and show tag assistant as active. Then click a link in the top navigation bar (this is how we test the tag we just created).

4.d. Next, go back to the Tag Assistant Tab and check if the “Top Nav Clicks” Tag appears under “Tags Fired”. If it does, this means your tag has been configured correctly! If not, there may be an issue, check your trigger, do some trouble shooting and try again. Here, it is also worth double checking how many times your tag has been “fired”.Make sure the number of times it’s been “fired” matches the number of times you have clicked the top navigation.

Step 5: Publish your Tag

Publishing your tag allows it to go live on your website and start collecting data!

5.a. Go back to the GTM interface and select “Submit”.

5.b. Click “Publish”.

Congratulations! You’ve now successfully set up top navigation click tracking in GTM, ready to collect valuable insights in Google Analytics 4.