Tracking button clicks in event widget using GTM

[Zoe_Robinson]

Hi folks
I need to be able to track clicks on my ‘book tickets’ buttons in my event widget but cannot find any help docs or posts about this. I’m sure it is possible and has been done already so I’m very hopeful someone can help me out.

* Link to the page with the widget in question:

I have google tag manager installed and can use this to track but I don’t know how.
thanks
Zoë

[Max]

Happy to see you’ve decided to join us @Zoe_Robinson

Please let me check it with our dev team. I’ll get back to you once i receive a response from them

[Zoe_Robinson]

Thanks Max - this is really important to be able to do so I look forward to hearing back.

[Max]

Hi @Zoe_Robinson

Here is the code for tracking clicks on Get Tickets button via GTM:

if (!dataLayer) {
	return;
}

document.addEventListener('click', (e) => {
	if (!e.target.closest('.eapp-events-calendar-button-link')) {
		return;
	}
	dataLayer.push({ event: 'get-tickets-button-click' });
});

Just add it to the Custom JS field on the Settings tab of your widget’s settings and let me know if it worked

[Zoe_Robinson]

Thanks Max, I have added the code and validated. It is not firing the tag in GTM and no event is being pushed through to GA4 in real time view. Is there something else I need to do? How should I set up the GTM trigger to capture this?

[Max]

Here are the steps you should follow:

Log in to your GTM account, choose Triggers and click New

Then click Trigger Configuration and choose Custom Event

Add the event name from the code (Custom JS) to the Event Name field and save changes

In your case, it’s get-tickets-button-click.

Choose any name for the trigger

Please try it out and let me know if it helped

[Max]

In case you’d like to track clicks via Google Analytics, you should use the code below (should be added to the Custom JS field):

function sendEvent(config) {
  if (typeof ga !== 'undefined') {
    ga('send', 'event', {
      eventAction: config.action,
      eventCategory: config.category,
      eventLabel: config.label,
    });
  }
  if (typeof gtag !== 'undefined') {
    gtag('event', config.action, {
      event_category: config.category,
      event_label: config.label,
    });
  }
}

document.addEventListener(
  'click',
  function (event) {
    const button = event.target.closest('.eapp-events-calendar-button-link');
    if (button) {
      sendEvent({
        action: 'click',
        category: 'Elfsight Event Calendar Widget',
        label: 'Get Tickets Button',
      });
    }
  },
  true
);

[Zoe_Robinson]

Yes, perfect, thanks a bunch!

[Max]

You are most welcome