Recently, I was asked by a client to track accordion open and close on their WordPress website. Sometimes, you might not have access to CMS except Google Tag Manger, so it is a great way to use JQuery as a custom HTML tag.

Here is the code that you can use ( Not Final Version- Look below for Final Version):

<script>
jQuery('h4.vc_tta-panel-title').click(function() {
if(jQuery(this).parent().parent('.vc_tta-panel').hasClass('vc_active')){
//contraction
var linkText = jQuery(this).text();
ga('send', 'event', 'accordion CLOSE', 'click', linkText);
}
else{
//expansion
var linkText = jQuery(this).text();
ga('send', 'event', 'accordion OPEN', 'click', linkText);
}
});
</script>

Obviously, this will depend upon the structure of your HTML. So, let’s break this down.

'h4.vc_tta-panel-title'

This will grab the title of the accordion panel under heading 4.

.parent()

This parent()method selects the immediate parent of the targeted element. You can also use parents() method, you will notice that it is in plural form of this method.This method allows us to select the parent elements from the immediate, up to the root of the document, unless aselectoris specified as the argument. For further reading, you can read this excellent guide.

hasClass('vc_active')

This determines whether any of the matched elements are assigned the given class.

var linkText = jQuery(this).text();

The variable linkText will grab the text of the link. Please note to use the click function and use $(this) or you will grab all the links pertaining to the page that have class or ID you have selected.

This method will work, if you insert this code into your theme footer.php file however, this method will not work in GTM. This is because each time custom events are sent by ga() function, GA ‘create’ command creates a tracker variable something like this:

ga("create", "UA-XXXXXXXX-Y", {name: "gtm0123456789", allowLinker: false});

Hence,this particular command will get ignored by Google Tag Assistant or Developer Debug Tool.

This particular solution is contributed in stackoverlow:

You can fire Universal Analytics event from the code with the tracker name. However, each time GTM loads the tracker name is changed. So, the solution is changing the tracker name dynamically each time when GTM loads.

var trackerName = ga.getAll()[0].get('name');
ga(trackerName + '.send', 'event', { eventCategory: 'category1', eventAction: 
'action1', eventValue: 0 });

Hence, the final GTM Accordion Expand/Open code will be:

<script>
jQuery('h4.vc_tta-panel-title').click(function()

{ if(jQuery(this).parent().parent('.vc_tta-panel').hasClass('vc_active')){

//contraction
var linkText = jQuery(this).text();
var trackerName=ga.getAll()[0].get('name');
ga(trackerName + '.send', 'event', 'Accordion CLOSE', 'click', linkText);
}
else{
//expansion
var linkText = jQuery(this).text();
var trackerName=ga.getAll()[0].get('name');
ga(trackerName + '.send', 'event', 'Accordion OPEN', 'click', linkText);
}
});
</script>

Please note, this code will depend upon your HTML structure.

You may also like: