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.

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

Image 1.1. Enabling Click-Related Variables

Image 1.1. Enabling Click-Related Variables

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>
Image 2.1 Datalayer tag to track middle mouse click

Image 2.1 Datalayer tag to track middle mouse click

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.

Image 2.2: Middle-click event in datalayer

Image 2.2: Middle-click event in datalayer

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.

Image 2.3: Custom middle-click trigger on GTM

Image 2.3: Custom middle-click trigger on GTM

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.

Image 2.4: Activating trigger for only certain links

Image 2.4: Activating trigger for only certain links

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.

Image 2.5: GA event tracking tag for middle-click

Image 2.5: GA event tracking tag for middle-click

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.

Image 2.6: Selecting middle-click trigger

Image 2.6: Selecting middle-click trigger

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.

Image 2.7: Middle-click tracking tag being fired

Image 2.7: Middle-click tracking tag being fired

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.

Image 2.8: GA real-time events view

Image 2.8: GA real-time events view

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.


Lenin VJ Nair

Lenin Nair has years of experience in marketing for software and technology domains. He is a certified specialist in marketing and enjoys exploring new ways to market products and services for small and medium businesses. He enjoys reading, writing, traveling, and ideating. He holds an MBA in marketing and a bachelor's degree in IT.

4 Comments

Daniel · November 16, 2018 at 2:18 pm

Hi Lenin, great articles (I read the 4th now, really appreciate it)
Besides that you have a strange sort of the steps (1,2,3,4,5,4,5,6,7), it does not work for me. When I do the step 3 I see “gtm.click” but not your mentioned “nonleft.middle” but I cannot find any mistake. Did you forget anything to mention?

    Lenin VJ Nair · November 16, 2018 at 6:06 pm

    Hi Daniel, thank you for the comment. To answer your question, in order to have the nonleft.middle action, you need to enable the datalayer push as in the step 2. nonleft.middle is a custom element, not something given by GA/GTM by default.

    Lenin

Arash · November 22, 2018 at 3:27 pm

I got this error
Error at line 4, character 10: Parse error. Character ‘“’ (U+201C) is not a valid identifier start char

    Lenin VJ Nair · November 22, 2018 at 3:39 pm

    Hi thank you for the comment, Arash. I believe the error is due to some character mismatch. The double quotes need to be used for the “non-left.push” variable. Please check and make sure of that.

Go ahead & share your thoughts!

%d bloggers like this: