Track Events (clicks) using Google Analytics Script

This is a simple script to track events in your Google Analytics account.

If you want to track a buttons clicks, give the button a class ga-event and add the following attributes:

  • data-event-category = “Website Leads”
  • data-event-label = “Book A Demo”

NOTE: Change Website Leads and Book A Demo to whatever you want to call these. Create different names for however you want to segment the events.

You must be using Google Analytics script for this to work - so the integrations page should look like this

image

And finally, paste the below piece of code in the footer code of your site settings.

<script type="text/javascript">
  //GA Event Tracker Script. Licensed under MIT. Free for any use by all. Written by Paul Seal from codeshare.co.uk

  // Get the category, action and label from the element and send it to GA. The action is optional, because mostly it will be a click event.
  var trackClickEvent = function () {
    var eventCategory = this.getAttribute("data-event-category");
    var eventAction = this.getAttribute("data-event-action");
    var eventLabel = this.getAttribute("data-event-label");
    var eventValue = this.getAttribute("data-event-value");
    ga('send', 'event', eventCategory, (eventAction != undefined && eventAction != '' ? eventAction : 'click'), eventLabel, eventValue);
  };

  // Find all of the elements on the page which have the class 'ga-event'
  var elementsToTrack = document.getElementsByClassName("ga-event");

  // Add an event listener to each of the elements you found
  var elementsToTrackLength = elementsToTrack.length;
  for (var i = 0; i < elementsToTrackLength; i++) {
    elementsToTrack[i].addEventListener('click', trackClickEvent, false);
  }
  
</script>

You can track as many buttons as you like. The results will appear in your Google Analytics dashboard under Behaviour > Events and also under Real Time > Events

For example

8 Likes

Thanks @Diarmuid_Sexton . This is just perfect for clients who don’t want to use Google Tag Manager and still want to track in GA some events.

Hi @Diarmuid_Sexton ! first of all thank you for sharing. I did it step by step but it’s not showing in my GA events. Could you help me? It’s very important for me to track the home page buttons but I am kind of new here…
Do I have to change anything inside your script?
this is my website: https://www.liv-fit.shop/

Can you share the read only link?

How to get your project’s read-only link? *

Hi, @Diarmuid_Sexton,

Thank you for sharing this. I think I’ve followed your steps correctly but I’m not seeing any results in my GA.

here is my read-only link

I have only used the code on the button you see when you first land on the site and the navigation.

any help would be greatly appreciated!

You need to be using Google Analytics I think and not Gtag. Can you check and confirm?

Thanks for your quick response,

I have linked to my Google Analytics through the below

1 Like

Turn off Gtag and publish again and see does that work.

I’ve removed Tag Manager from my site, but theres still nothing coming through to GA

ok, sorry - I can’t help you anymore right now - i’ve to look at this for a site of my own in a while - i’ll send you the link so you can compare once ready.

That’s okay,

I’ll keep looking into it myself and let you know if I find an answer.

Thanks for your time

So, you need Google Analytics turned on - but you need Gtag turned off like below

image

Can you try that again and confirm as I’ve just looked your site and it’s got Google Tag Manager on.

@Diarmuid_Sexton THIS IS AWESOME!! THANK YOU SO MUCH, I got it working for buttons!

Now I am trying to do the same for Tabs (using a different event category name and label) however it’s not registering in GA :confused: Any Ideas??

Can you theoretically track anything onclick as long as you reference data-event-category in the custom tag?

Cheers,
Will

Yes, I reckon so. You just need to add the attributes and class to each element you want to track.

Let me know you get it working.

1 Like

This is cool and better than trying to track events using Google Tag Manager.

BTW, I’m working on a simple tool to track events (clicks, form submissions etc) on Webflow sites, do take a look if you’re interested :slight_smile:

1 Like

@Diarmuid_Sexton You rock, thanks for this! I followed your directions, but it’s weird, the Event Tracking Tracker chrome extension shows the events tracking, but even after waiting for hours, the events still aren’t coming through to GA. I made sure and gtag.js wasn’t toggled on. Thoughts?

Hi all! I’ve tried this but am not seeming to get any results. I’m trying to track the download button clicks, currently only have it setup in the top two buttons in the hero. Any thoughts??

https://preview.webflow.com/preview/5xfest?utm_medium=preview_link&utm_source=dashboard&utm_content=5xfest&preview=8c47af994a2e934791421d8194c91ea5&mode=preview

I’m having trouble seeing the events in GA also. It looks like they’re being sent to GA - I can see the requests in Chrome DevTools. But GA doesn’t show them up in the dashboard.
Anyone work that out? I would like to attach a screenshot but the forum won’t allow me as I’m a new user :roll_eyes:

actually, if I go to GA > Realtime > Events - they show up in there.

So perhaps it takes a while for them to filter to the GA > Events section in the dashboard.

@Meirion That’s right, you won’t see them in your dashboard unless you customise it. By the way, the Real-time section will only show events that happened within the last 30 minutes. If you want to view events older than that you can go to Behaviour → Events.

@Sam_Schwinghamer1 are you still having issues?

1 Like