Chapter 04

How to Track a Menu and Logo

By Anna Tomalik

The menu is a gateway to your website. A clearly organized menu helps visitors navigate smoothly to the information they need. But how to design it properly? The best way is to put together a menu you think will work well and then see how people interact with it. As soon as you collect a significant amount of data with menu clicks, you can redesign the original menu and keep tracking the effects.

In this chapter, we’ll show you how to set up menu tracking. We’ll start by checking the CSS attributes for menu elements.

Finding the CSS attribute of menu elements

The website menu usually consists of a textual menu and logo. Each of these elements has different CSS attributes, so we’ll have to locate each of them separately.

To find the CSS attribute of your logo, follow these steps:

  1. Open your website and find the logo.
  2. Right click on the logo and click Inspect or Inspect Element, depending on the browser you’re using.
  3. Look for a class or ID CSS attribute. For example, the code could look like this:
<div class="logo_container">
                    <span class="logo_helper"></span>
                    <a href="https://sales.piwik.pro/clearbank/">
                        <img src="https://sales.piwik.pro/clearbank/wp-content/uploads/sites/33/2019/04/clear-bank-logo-2.png" alt="Clear Bank" id="logo" data-height-percentage="54" data-actual-width="140" data-actual-height="21">
                    </a>
</div>

From lines of code, we can pull out the class="logo_container" used for the <div> section with logo. 

To find the CSS attribute for a textual menu, follow these steps:

  1. Open your website and find the logo.
  2. Right click on the menu element and click Inspect or Inspect Element, depending on the browser you’re using.
  3. Look for a class or ID CSS attribute. For example, the code could look like this:

<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="https://sales.piwik.pro/clearbank/about-us/">About Us</a></li>

From this piece of code, we can take out the class="menu-item" used for each <li> section for the menu item.

When we know the CSS attributes for a logo and textual menu, we can define tags and triggers that will track the whole menu.

Setting up logo tracking in Tag Manager

First, we’ll set up tracking of the moments when a visitor clicks a logo.

To set up a tag for tracking a logo, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the left-side menu click Create new tag.
  3. Name the tag.
  4. Select Piwik PRO Custom Event tag and click Save.
  5. Set category as Menu item. You can use another name depending on the framework you use for organizing events in your reports.
  6. Set action as Logo.
  7. Set name as a {{ Page Path }} or {{ Page URL }} variable. This way Tag Manager will pull out information about the page where the logo was clicked.
  8. When done, click Save.

To set up a trigger for tracking a logo, follow these steps:

  1. Open a created tag for tracking a logo and scroll down until you see Tag triggers.
  2. Click New trigger.
  3. Name the trigger.
  4. Select the Click event type for the trigger (on small-size screens click the drop-down menu).
  5. In Trigger conditions, set the condition for the tag to fire. For our example, we’ll use the condition Click element is a child of logo_container.
  6. When done, click Save for the trigger and click Save for the tag.

Before we move on to check if the tag and trigger are working correctly, we’ll set up tracking for the textual menu.

Setting up textual menu tracking in Tag Manager

Now, we’ll set up the tracking of moments when a visitor clicks any textual menu item.

To set up a tag for tracking a menu item, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the left-side menu click Create new tag.
  3. Name the tag.
  4. Pick Custom asynchronous tag template and click Save.

Before we code in the custom tag, we’ll create a trigger for it.

To set up a trigger for tracking a menu item click, follow these steps:

  1. Open a created tag for tracking a menu item and scroll down until you see Tag triggers.
  2. Click New trigger.
  3. Name the trigger.
  4. Select the Click event type for the trigger (on small-size screens click the drop-down menu).
  5. In Trigger conditions, set the condition for the tag to fire. For our example, we’ll use the condition Click element matches .menu-item>a. The .menu-item>a piece tells the trigger that we want it to fire whenever someone clicks a link >a from the class .menu-item.
  6. When done, click Save for the trigger and click Save for the tag.

Now we’re ready to drop a few lines of code into our tag. We’ll use the following script:

<script>
    var label_of_clicked_element = {{ Click Element }}.textContent;
      _paq.push(['trackEvent','Menu item',label_of_clicked_element,{{ Page Path }}]);
</script>

The script will go into the Tag HTML Code field.

At this point, you probably need some explanation of exactly what this script does. Well, it’s pretty much the same script as the one we used for tracking buttons with various button names.

The first line of code — var label_of_clicked_element = {{ Click Element }}.textContent; — defines a variable which holds data about the text used in the clicked element. For example, when the clicked menu item is a Product, the variable will capture and remember the text.

The second line of code — _paq.push(['trackEvent','Menu item',label_of_clicked_element,{{ Page Path }}]); — sends information about the event to Analytics. In our example it transfers the following data:

  • Category: Menu item.
  • Action: label_of_clicked_element (That’s our defined variable).
  • Name: {{ Page Path }} (A variable that pulls out the page path where an event occurred).

As you may have noticed, we used the category name Menu item both for a logo and textual menu tag. This way we are combining data about logo clicks and menu item clicks in one category, which helps organize the analysis of the entire menu in Analytics.

Checking the setup in debug mode

With tags and triggers in hand, we can move on to testing if they work using debug mode in Tag Manager.

To use debug mode, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the top-right corner click Debug.
  3. Your website will open in a new tab with debug mode running.
  4. Toggle the Prevent page reload option. This will freeze the page so that when you click a logo or menu item a new page won’t open.
  5. Click the logo or menu item and see if the tag was fired.
  6. When you’re happy with how the tag works, go back to Tag Manager and publish the tag.

Viewing menu tracking in a report

Once tags start collecting data you will see them in an event report in Analytics (Menu > Analytics > Actions > Events). As we’ve already mentioned, we organize logo and menu items tags under one category, Menu item. For an action name we use Logo or the text on a menu item, for example, Product or About Us. And for a name we use the page path. Here’s what our report will look like when applying this construction.

When setting up menu tracking for your website, remember to spot the right elements from the CSS attributes and think ahead about the framework you want to use for your event report. Then put all the bits and pieces together, wait for a significant amount of data, and experiment with the redesign. By looking at how people interact with your menu you’ll see what’s important for them, and you’ll learn what to put up front and what to “hide” at the end. All this helps the user achieve easy navigation.