How to track custom JavaScript event in Google Tag Manager?

Question

I have a custom JS event that fires when accordion panel is opened. I would like to track the opening as Google Analytics event with panel id as the event label.

Using the old non-GTM approach I would do it like this:

$('#my-accordion').on('down.zf.accordion', function(e, panel) {
  ga('send', 'event', 'accordion', 'open', panel.attr('id'));
});

But I would like to do this with Google Tag Manager and with as less changes in the code on page as possible.

So far I have created this in Google Tag Manager:

Trigger, type Custom Event that fires on 'down.zf.accordion'

Tag, type Universal Analytics with my tracking id, track type: Event (accordion, open, [probably a global JS variable that is set to panel.attr('id')?])

But the tag won't even fire when testing in the GTM preview. What am I doing wrong?

Answer 1

An alternate solution would be to use a Custom HTML listener tag that you could set to listen on your specified pages (eg. wherever you have an accordion on the page). The tag would look something like this, and require dataLayer events and values to be pushed:

$('#my-accordion').on('down.zf.accordion', function(e, panel) {
   dataLayer.push({
      'event': 'accordion open',
      'category: 'accordion',
      'action': 'open',
      'label': panel.attr('id');
   })
});

(Note that I haven't tested this out as I don't have access to Zurb foundation accordions - assuming that that's what you're using).

Your event tag could then be fired from the event "accordion open", and your event category, action, and label would be acquired from the dataLayer variables.