Tracking open/close accordion as a GA event

You’ll need to add your own JavaScript code (probably to your theme). Something like this should work. You may want to change the Google Event values (e.g. category, action, label, etc).

const triggers = document.querySelectorAll('.js-accordion-controller');

if (triggers && triggers.length > 0) {
	triggers.forEach(function(trigger) {
		trigger.addEventListener('click', function(event) {
			const open = trigger.getAttribute('aria-expanded') === 'false';
			
			ga('send', 'event', {
				event: 'userInteraction',
				eventCategory: 'accordions',
				eventAction: open ? 'Accordion opened' : 'Accordion closed',
				eventLabel: trigger.innerText,
				eventValue: 1,
			});
		});
	});
}

First of all, thank you Phil.

I tracked the event directly in GTM, using these settings for the trigger:
Click Classes contains “c-accordion__title js-accordion-controller”
Page URL equals to <my page URL>

and these others for the Tag:
Type: Event
Category: Click
Action: Accordion click
Label: Click text <– this was written after the activation of the anchor option in the plugin

It seems to work fine but it still cannot track the openings and collapse.
Any suggestion for GTM options?

I have zero experience with GTM itself, so I won’t be able to give any guidance there. The code I provided above will track the opening and closing though.

When I tried to set up a custom tag, I got these errors:

Error at line 2, character 3: This language feature is only supported for ECMASCRIPT_2015 mode or better: const declaration.
Error at line 7, character 4: This language feature is only supported for ECMASCRIPT_2015 mode or better: const declaration.

• This reply was modified 3 years, 6 months ago by jocelyn72s.

What browsers are you supporting? That snippet uses some newer features of JavaScript, like const that won’t work in IE. I no longer support IE in any of my projects.

Maybe this will work better for you?

var triggers = document.querySelectorAll('.js-accordion-controller');

if (triggers && triggers.length > 0) {
	for (var i = 0; i < triggers.length; i += 1) {
		triggers[i].addEventListener('click', function(event) {
			var open = triggers[i].getAttribute('aria-expanded') === 'false';
			
			ga('send', 'event', {
				event: 'userInteraction',
				eventCategory: 'accordions',
				eventAction: open ? 'Accordion opened' : 'Accordion closed',
				eventLabel: triggers[i].innerText,
				eventValue: 1,
			});
		});
	}
}

Could you please send me the javascript function which returns the value of “aria-expanded”?
With this, I could setup directly a variable into Google Tag Manager.
Thank you again for your kind support!

There is no function that returns the value of aria-expanded. It is set at line 176 and line 201.

I solved the issue with the help of an italian developer of a GTM facebook group: https://www.facebook.com/groups/1683981325147575

This is the solution (maybe it can be useful to someone with the same problem).

TO track the open/close as event in GA (Google Analytics) with GTM (Google Tag Manager):
1- go to GTM and create a custom Javascript in the variables:

function() {
  var accordion = document.getElementById("{{Click ID}}")
  var status = accordion.getAttribute('aria-expanded')
  return status;
}

Save as “JS – Open/Close Accordion” (for instance)

2- create a new variable
Type: search table
{{JS – Open/Close Accordion}}
Input:
True–>Open
False–>Close
Save as: Open/Close Accordion (for instance)

3 create a new activator
Activator type: Clic – all elements
Activation by: some clic
Conditions:
Clic classes contains c-accordion__title js-accordion-controller
Page URL coontains [your URL]
Save as “Click on accordion” (for instance)

4- Create a new tag (Universal Analytics)
type: Event
Category: Accordion Click
Action: {{Open/Close Accordion}}
label: {{Click Text}}
Hit from non interaction: False
GA settings: your ga settings
Advanced: tag activation options –> One time per event
Refer to the activator you created on point number 3

5- Test & Deploy