Tracking Mouse Middle-Clicks Using Google Analytics & GTM

While tracking clicks on your links, you don’t want to miss somebody clicking and opening a new tab with the mouse middle button. By default, middle-clicks cannot be tracked by Google Analytics event tracking. This tutorial explains how you can do that.

Have you checked out our previous tutorial on tracking link clicks and button clicks using Google Analytics and Google Tag Manager.

However, as mentioned in that article, middle-click with the mouse button cannot be tracked by any existing GTM variable.

Today, most people open additional pages on your site by middle-clicking the link. They do this for call-to-action links also that you want to track. If you are not tracking middle-clicks and right-clicks, you are missing a lot of data.

You need to have a custom setup to track middle- and right-clicks. So, how do we do that?

Prerequisites

• You should be using Google Tag Manager to implement Google Analytics.
• Basic knowledge of JavaScript (jQuery) is good.
• You have already identified the links or buttons you want to track, and they are all uniquely identifiable with an ID or class attribute.

This tutorial deals with the datalayer, which is the interface used by your website to communicate user activity to Google Tag Manager. For instance, an action such as a click is recorded in the datalayer and pushed to GTM in order to create events, fire tags, etc.

We will see how to implement a basic JavaScript code in the datalayer to record middle-click and right-click on specific links. We will pass the recorded data to a GTM trigger and then fire the GA tag on that trigger. Let’s get started.

Step 1: Enable click-related variables on GTM

Go to “Variables” and click “Configure”. Scroll down here to find click-related variables and enable them all as shown in the following image.

This is to ensure that we can pass any click-related data to Google Analytics.

Step 2: Create a datalayer tag in GTM for middle-click and right-click

Go to the “Tags” section in your Container Workspace and click “New”. Here, name the tag appropriately and select the tag type as “Custom HTML”. Put the following code into it.

<script>

if (window.jQuery) {  
  jQuery(“a”).mousedown(function(event) {
    if (event.which == 2)
       dataLayer.push({   "nonleft.href": this.href,
                          "nonleft.text": this.text,
                          "nonleft.id": this.id,
                          "event": "nonleft.middle"});
    if (event.which == 3)
       dataLayer.push({  "nonleft.href": this.href,
                          "nonleft.text": this.text,
                          "nonleft.id": this.id,
                          "event": "nonleft.right"});
  });
}

</script>

Let me explain what this code does.

It tracks two types of clicks with your mouse button—right-click and middle-click. It also passes three important parameters to the datalayer—the link URL (nonleft.href variable), link text (nonleft.text), and the ID of the link (nonleft.id).

These parameters can in turn be passed to GA. Also, this code works only on hyperlinks and not any other object, such as a button.

Note: If you wish to track another HTML element, such as a button, change the code “jQuery(“a”) to add additional elements. For instance, “jQuery(“a, input”) to add the “input” or “submit” element, which can be a button.

Step 2: Increase the priority of the middle-click tag

Under the Tag Configuration, click “Advanced Settings” and under “Tag firing priority”, put 1 as the priority of the tag.

This is to ensure that this datalayer tag is fired before any other tag. It will make sure that any middle-click or right-click event is already available for use by any other tag. After setting the priority, save the tag.

Step 3: Test the tag

Now, get into the Preview Mode by clicking the “Preview” button at the top. Open your website in a different tab and wait for the Preview & Debug pane to load.

Now, simply middle-click a link on the page and see whether the new event “nonleft.middle” has been triggered. All the variables associated with the middle-click or right-click events will also be listed in the Variables tab.

Step 4: Create the new firing trigger for middle-clicks or right-clicks

So far, we have only created a custom HTML tag to push middle-click and right-click events to the datalayer and GTM.

Now, we will create and configure a trigger that can actually fire a Google Analytics tag for a right-click or middle-click event.

Go to “Triggers” and click “New”. Name the trigger and under “Trigger Configuration”, and select the trigger type as “Custom Event”.

Put the event name as “nonleft.middle”. This has to be identical to the variable in the custom JavaScript code we saw earlier.

Step 5: Narrow the focus of the trigger

You don’t want to trigger the tag for all middle-clicks, do you?

To trigger only for certain links, select the option “Some Custom Events” and put in a condition to fire the trigger.

Take a look at the image below. We are using the value of the nonleft.id variable to limit the triggering.

Step 4: Create the GA event tag to track middle-clicks

Now, we will need to create the GA event tag to track the middle-clicks.

If you already have a tag for that, we only need to have it fire for the new nonleft.middle and nonleft.right events.

In order to create the tag, click “New” under Tags, name the tag, and then click “Tag Configuration”. Here, click “Universal Analytics” and select the Track Type as “Event” and fix all the other information as shown below.

In order to select Page URL and Click URL options, click the “+” button next to the variable.

“Click URL” variable is one of the default GTM variables we enabled in the Step 1 above.

Step 5: Set the firing trigger

Ensure you select the correct Google Analytics settings variable and then select the firing trigger under “Triggering” option. After selecting it, save the tag.

Step 6: Test the trigger

In order to test the trigger and see if it is tracking properly, let’s get into the Preview & Debug pane of GTM. Click the “Preview” button and open the website in a different tab.

Here, middle-click the link that you have set up and see if the GA tag is firing properly on the Preview & Debug pane.

If you see something similar to the image above, you are almost done with your tracking.

You can also verify that your data is properly captured by going to Google Analytics real-time events dashboard.

Step 7: Submit and publish the changes on GTM

Remember that you are still in GTM Preview mode. You need to get back to GTM and submit the changes for the tracking to be live.

Conclusion

You should have the middle-click reports available on your GA dashboard in a day’s time.

Ensure that you have this tracking setup done on all key CTA links and buttons on your website. It will make sure that you don’t miss the click event data on these links.