This quick blog post was created to track accordion tabs. Now, I understand that every site has a different HTML structure, but this post will give you an idea on how to track your accordion tabs via a tag manager.
The objective is to track OPEN and CLOSE Event each time when a user interacts with the tab.
This is how OPEN accordion tab will look like.
Hence there are two conditions set in Google Tag Manager based on the above screenshot.
CSS Selector used for Open event
The below CSS selectors are used as a trigger to map Accordion Open Event:
.sow-accordion-panel:not(.sow-accordion-panel-open) .sow-accordion-panel-header, .sow-accordion-panel:not(.sow-accordion-panel-open) .sow-accordion-panel-header *
CSS Selector used for Close event
The below CSS selectors are used as a trigger and map Accordion Close Event:
.sow-accordion-panel.sow-accordion-panel-open .sow-accordion-panel-header, .sow-accordion-panel.sow-accordion-panel-open .sow-accordion-panel-header *
Let’s understand the CSS Selectors one by one:
– Selects the element that does not have “.sow-accordion-panel-open”
– will get activated when a user clicks on the tab.
– will cover all the elements under the div element. We are using this selector because Open/Close is initiated through this div, hence we want to trigger an event each time a user interacts with the div.
Steps were taken in Tag Manager:
1. Create a trigger type- All Elements. Make a condition where “Click Element” matches CSS Selectors created above, “CSS Selector used for the close/open event”
Repeat Step-1 process with Accordion Close trigger as well.
2. Create a Tag and map to the above trigger
While I was working on this tracking, I was not able to trigger an event, so one of my colleague from GTM community pointed out that I was doing a spacing error, so whenever you are using a CSS selector use spacing like this:
- there must be a space before *
- also, space before .sow-accordion-panel-header