Tracking button clicks in event widget using GTM

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ë

1 Like

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

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

1 Like

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

1 Like

Hi @Zoe_Robinson :wave:

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 :slightly_smiling_face:

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?

1 Like

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 :slightly_smiling_face:

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
);
1 Like

Yes, perfect, thanks a bunch! :smiley:

2 Likes

You are most welcome :wink: