A very common thing that I setup tracking for on a variety of pages for different companies is how their main menu is used across the site. The main menu is usually where most of your visitors will look at if the page they landed on didn’t really hit the mark. That’s if you’re lucky, otherwise they’ll just hit the back button at go back to what ever Google search that led them to you in the first place.

Sites usually invest some thought in the navigation and by that it’s of course important to measure how your site’s visitors will use it. In Google Analytics you can of course see how many of your visitors that looked at, say your Product Overview page. You can also see how many of them that came from, say the start page or a specific product page. But you can’t really see how many that used your sites navigation in order to from one page to another.

Luckily, you can set up tracking on that using Google Tag Manager in basically a few minutes.

The low down on what we need:

  • Find out if the click is within the main menu in the DOM.
  • If yes; get the menu element text and what page the users is currently on.
  • Create a trigger in GTM based that should fire if the click is actually in the main menu element.
  • Send an Event to Google Analytics whenever that Trigger fires.

Using JavaScript to find out if the click is within the menu

First, let’s create a Custom Javascript in GTM to tell us if the click is actually within the main menu element or not. The only thing you really need to check, and that will differ your code from mine is what uniquely identify your main menu in your code.

inspect-your-page-elements

Easiest way to do this is to right click on one of your main menu elements on your page and select “Inspect” or what ever looks similar to that pending your browser and/or language.

my-code

Above, you’ll see a snippet of the code that I’m using for the menu on this site. Once again, your code will differ from mine, so you have to look at your own site. What we can see from this code above is that my main menu elements are all residing under a div with and id=”menu”. On some occasions the menu is not wrapped in a div with an unique ID but rather a nav element, something you see that I have aswell, that contains the menu div.

If you do have a div with a unique ID, this is the Custom Javascript Function you’d have to create in GTM.

Let’s call this function; JS – Main Menu Click.

 

If you on the other side would have, say a nav with a class as a unique trigger, this would be your code:

Just make sure that you use # (hash) if you’re targeting an ID and that you’re using a . (dot) if you’re targeting a class. Standard CSS Selectors, which you probably already know.

Let’s have a quick look at that code, shall we?

  1. First of all I just declare a short hand for {{Click Element}} and saves it into a variable called ‘el’.
  2. Second, we’re using jQuery (which you must have loaded on your page, but who doesn’t 2016?) in order to check if the clicked element has a parent element that contains and ID (#) that equals to menu. The .size() in the end will return the number of elements that the query contains. Which will be 1 if it’s found, or 0 if it’s not.
  3. The if statement will then based on if the size() returns something (bingo, we’re inside the main menu navigation) return true, or if the click is outside the main menu navigation it will return false.

Now, the rest of the setup is a walk in park.

Our Trigger will look like this

We know that for a click to be counted as a main menu click, two things must be true:

  1. It has to be a link click. (Yes, there might be some very odd occasions where it’s not.)
  2. {{JS – Main Menu Click}} has to be true.

gtm-main-menu-click-trigger

That will give a Trigger that looks like above.

  • Name: Main Menu Click
  • Targets: Just Links
  • Enable When: {{Page Path}} matches RegEx .* (all pages, that is)
  • Fire On: {{JS – main Menu Click}} equals true

Simple as that.

!! UPDATE !!

Simo pointed out in the comments below that you can actually leverage on the built in CSS Selector instead of using the Custom JavaScript above. A simpler way of acquiring the same, but with a Trigger that doesn’t require the additional code/variable.

So, the Trigger configuration as follows.

  • Name: Main Menu Click
  • Targets: Just Links
  • Enable When: {{Page Path}} matches RegEx .* (all pages, that is)
  • Fire On: {{Click Element}} matches CSS Selector #menu a

!! END OF UPDATE !!

Finally, the Tag to send the data to GA

With our Variable and Trigger set, all we need is the Tag that will deliver the information to Google Analytics.

Just a standard Event configured as below.

ga-event-main-menu-click

Just save, and test your Container before publishing.

This will yield an Event that’s being sent into Google Analytics telling you what elements (items) in your Main Menu that people actually click, and drilling further down (Event Label) you’ll see on what pages your visitors are when they click specifik items.

Quick n’ simple. Now it’s your turn. Good luck!

Questions, just drop a line in the comments below.

Tell your friends...Share on Facebook11Tweet about this on TwitterShare on Google+3Share on LinkedIn15