In this post I’ll show a method to track Accordion clicks in Google Tag Manager. This will allow you to see what sections within an accordion users are expanding and looking at.

What is an Accordion?

An Accordion is ‘graphical control element‘ that allows users to expand and collapse sections of information on a page. The advantage is that you can fit more information onto a page, and the user has the choice of whether to expand each section or not.

Below is an example of an accordion with four sections of text that can be expanded.

How to Track Accordion Clicks in Google Tag Manager

So on my website, a WordPress plugin Stackable allows me to add Accordion blocks to my pages very easily.

Once they’re added, we can use Google Tag Manager (GTM) preview mode to see how we might track these.

If we use GTM preview mode we can see that if we click to open one of the accordion headings it registers as a Click in GTM. If we look at the Variables we can see that Click ID is equal to ‘ugb-accordion-1__heading’ and Click Text is ‘Which US state has the most tornadoes?’.

This will influence how we set up the trigger and tag to track these types of clicks.

Creating the Accordion Click Trigger in GTM

First, let’s create our Accordion click trigger.

We’ll set it up as follows;
Trigger Type: Click – All Elements
This trigger fires on: Some Clicks
Fire this trigger when an Event occurs and all of these conditions are true:
Click ID > contains > accordion

We can name it ‘ Click – Accordion Click’.

Creating the Accordion Google Analytics Tag in GTM

The next step is to create the tag that will send the accordion clicks to Google Analytics.

We first choose to create a Google Analytics – Universal Analytics tag type.

Next we should create our tag as follows;
Track Type: Event
Category: Click
Action: {{Click ID}}
Label: {{Click Text}}
Non-Interaction Hit: True
Google Analytics settings: Your GA tracking variable
Firing Triggers: Click – Accordion Click

We choose ‘Click – Accordion Click’, the trigger we previously created as our firing trigger.

We can name this tag ‘GA – Accordion Clicks’. What you name it will depend on your GTM naming conventions. This is to ensure consistently in your GTM container. In my container any Google Analytics tags begin with ‘GA’ and then the tag name. You may prefer a different method of naming tags.

Seeing if the tag is firing using GTM Preview Mode

The next step is to make sure the tag is firing correctly using Google Tag Manager’s preview mode.

If we open one of the accordion sections we can confirm that the tag is firing correctly.

Confirming if the Accordion Click Event is appearing in Google Analytics

To confirm the information is appearing correctly in Google Analytics we can check in Real-time > Events. Choose an unfiltered view of your website to make sure your own clicks are included.

If we click on the various accordion sections they should reflect in real-time events. Below we see the Event Actions are registering as well as the Event Label.

What’s the benefit of tracking accordion clicks?

The benefit of tracking Accordion clicks is that it allows you to see what information is important to your website visitors. Depending on what pieces of information they click on, you can expand or remove various sections from your page as they might be very relevant or not relevant at all to your visitors.

If you’d like to know how to measure your accordion clicks in Google Data Studio, read my post on the topic.

I hope you enjoyed this post, and know a bit more about how to track Accordion clicks in GTM.

If you liked this article you might like my other blog posts.

Or you can follow me on Twitter!