Accordion click event tracking

Hi, @pace,

What is the webpage URL with the accordion in question?

Thanks,

-Jay

All the pages have accordions I would like to track using google anlytics.
For instance https://nicereye.com/retouching-services/

Any idea if the plugin is compatible with accordion event tracking?

Hi @pase,

Does some variation of this work?

https://gist.github.com/jaygidwitz/fc706df1a9ff4e2ce0b2244757c9c0cb

This might need a little modification though.

Cheers,

-Jay

• This reply was modified 5 years, 9 months ago by jaygidwitz.

Thanks for getting back. I am trying to find an event tracking strategy and have a couple of basic questions.
1- Do I need to set up Google tag manager to track events?
2- It looks like each event would need its own snippet. Given that WP pages have different interactivity, where is the best place to add the custom code snippet?

Hi,

1. No need to set up the Google Tag Manager to track events if you have ExactMetrics set up.

2. You don’t need separate snippets for each event, if you use the snippet Jay sent above you will have a generic handler that uses the name of the clicked accordion title. Ideally, you would place the custom code in the footer to make sure the accordion loaded. Please note that the snippet might need some adjustment.

Thanks for the clarification. Then, is it possible to track which specific accordions are clicked?

Yes, please use this snippet: https://gist.github.com/mircian/f0e729f69180c133cd630d589517e0c0

This will add 2 types of events ( open and close ) and also include the text of the accordion element clicked. For example in the page you mentioned above you would get “Personal Demo” or “Still Photo Retouching” as the event label.

I am grateful for your help! I like to make sure I get this right to avoid adding incorrect data to the GA property. Can I add multiple ga(event conditions) in the same function?
for instance:

if ( typeof ga === ‘function’ ) {
ga( ‘send’, ‘event’, ‘Accordion’, action, Personal Demo );
ga( ‘send’, ‘event’, ‘Accordion’, action, Still Photo Retouching );
ga( ‘send’, ‘event’, ‘Accordion’, action, text On-set retouching );
ga( ‘send’, ‘event’, ‘Accordion’, action, Digital Asset Photography );
ga( ‘send’, ‘event’, ‘Accordion’, action, Custom Worflows );
}

The question is how to manage multiple accordion tracking with accordion labels that change in the short term.

If you use the snippet above you don’t have to change anything else. The text of the clicked element will be used for sending the event dynamically.
It will work for all the accordions because the text variable is grabbing the actual text of the clicked accordion element.

Thanks again! that’s amazing, the snippet can pull the label of the accordion. I tested it and it works great.
Does it make sense to try to track the accordion elements (the thumbnail, the heading, and the anchor link) by modifying the snippet?

Hi @photoshopace,

I’m not sure, what would be the purpose of that?

How would you take action on that data if you were to collect it?

My guess would be this would over-complicate things and at that point would be providing non-actionable data that wouldn’t be of assistance in improving the UX of the site for the users.

Thanks!

-Jay

• This reply was modified 5 years, 9 months ago by jaygidwitz.

Thanks for the feedback I will keep it in mind!
The goal is to figure out how to use the accordions to invite visitors to start a dialog. The approach is to have relevant information in the accordion with a link to a page with additional information and contact form.

Tracking the individual accordions and links allows insight into whether a specific accordion content is persuasive. Does this make sense?

I am in search of something similar, but it needs to work for tabs with unique IDs.
https://eagleriver.org/businesses/chanticleer-inn/#link_business

Basically, the client wants to see if the tabs are being used. Is there a variation of the above script?

Thanks.