How to track clicks in sidebar or in any element with Google Analytics

Why should you track these metrics in the first place?

My answer is, if you want to improve your website in order to grow your audience, leads or sales, you need to know how every part of your website is performing and make decisions based on facts instead of personal preferences and guessing.

You might love the design of your site. The sidebars, content sliders, images, all of it. Maybe it’s the best you’ve ever seen. Or maybe you hate it, doesn't matter.

You are not the target audience of your website.

Decisions based on personal preferences and opinions rarely correlate with what actually works for the visitors.

So it's best not to get attached to anything on your website. Be prepared to question everything. Keep asking things like:

• What is the purpose of that element?
• Are people actually clicking the links in it?
• If not, should we ditch it?
• Is it hurting conversion my rates?
• How do mobile users interact with the it?
• And so on...

In order to get better, constantly track how every part of your site is performing and change things that are not working. Sometimes you need to do a little bit of extra work to do this, but it's well worth the effort.

This brings us to tracking click events in you sidebar or inside any element. This is not possible out of the box in Google Analytics, but you can do it with the help of Google Tag Manager, without wrangling with code.

So here's how to set up custom event tracking:

Step 1: check the class or the id attribute of the element you want to track

Open a page containing an element you want to track, right click on the element/area and select “inspect element” (works out of the box in Chrome and Firefox).

In the opening panel you can locate the class or id of that element by hovering your mouse over the elements. For example here a sidebar has a class “sidebar”:

Copy the class or id for later use.

Step 2: Login to Google Tag Manager and create a trigger

If you haven’t used Google Tag Manager before, you will be prompted to create an account for your site (you can create accounts for all of your sites anytime later on). Add your site information and embed the tracking code to your site according to the instructions.

Once you’ve created the account,

1. head on to Variables down in the left hand menu and
2. click Configure to enable the Click Element in default variables

In the opening view activate the Click element:

Then head out to Triggers and create a new trigger. Give it a descriptive name and select type “Just Links” from under “Click”:

Configure the trigger with following settings:

1. Enable wait for tags
2. Enable check validation
3. Add a filter where you want the trigger to fire, in my example here the page url has to contain “/news/”
4. Select “just some links” and select conditions: click element that matches CSS selector which is “.yourelementclass a” for targeting all links inside element which has a class “yourelementclass”. If you have an element with an id, type “#yourelementid a”

Step 3: Create a tag and connect it with your trigger

After saving your trigger head out to the tags and create a new tag. Configure the settings:

1. Select universal analytics to tag type
2. Add your GA tracking ID
3. Set track type to Event
4. Give a descriptive event category and action (which you will see in you Analytics)
5. For label you can select {{Page Url}}
6. Select TRUE for the non-interaction hit if you don’t want event tracking to interfere with your bounce rates (if you don’t want to count it as a bounce if a visitor doesn’t click a link in the sidebar and fire the trigger)