Track Events (clicks) using Google Analytics Script

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

Just checked again and it seems to be working! Thank you SO much! :slight_smile:

1 Like

@Diarmuid_Sexton this solution worked perfectly with the older version of GA. I implemented it without fail on 6-7 sites, so thank you for posting.

The new GA does not generated UA IDs. Instead it generates a Google Tag Manager ID like the example attached.

Do you have a solution for the new Google Tag Manager ID?

Many thanks!

I don’t. I would research how to track clicks in Tag Manager. I think it’s quite simple.

Here’s an article I found - Google Tag Manager Button Click Tracking Guide – Loves Data

Looking for this thread and the solution for me was google tag manager.
I used this approach

I hope it works for you all.

Cheers,

1 Like

@Giu_Vicente your video is great! Do you have one for GA4? Or does this work as well?

Solution for GTM and without creating events within the GTM-Container itself

Hi all. I’ve found myself in the same spot as many of you: using GTM and trying to get that tutorial/script working. My requirement was, that it works dynamically without the need of creating specific events in the GTM container itself. After some tries I’ve found a good solution with minimal changes to the initial tutorial:

Step 1: You don’t need to use the Google Analytics Integration. You can use the default GTM script in the header (and also the noscript in the footer).

Bildschirmfoto 2021-08-30 um 17.34.23

Step 2: Use this new script.

<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");
    dataLayer.push({'event':'generic_event','eventCategory': EventCategory,'eventAction': EventAction,'eventLabel': EventLabel});
  };

  // 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>

Please note:

  • What I just changed is I added a dataLayer.push instead of the ga('send'….
  • I write the eventName with a static value “generic_event”. You can also make that value dynamic by using a variable.
  • I removed the eventValue for myself as it is not needed in my case.

Some screenshots with the results in the dataLayer:

Bildschirmfoto 2021-08-30 um 17.52.14

Bildschirmfoto 2021-08-30 um 17.52.21

Bildschirmfoto 2021-08-30 um 17.47.55

Hope this can help some others out! Happy tracking :wave:

2 Likes

I tried to implement a few of the solutions above, but ran into issues, so I thought I would contribute my solution. There were 3 main problems I ran into:

  1. The events would not actually be recorded in GA
  2. It required manually adding a class name to work
  3. Required adding meta data to each element to get event context

My solution automatically adds click event tracking to all anchor tags, and collect context information from the page and appends to the event. it also uses the newer gtag implementation of GA (you have to toggle it on in the Webflow settings). Finally I also updated the javascript style to be more modern and not leak into the global namespace.

I wrote a blog post about it with more details: https://medium.com/@grahammcnicoll/automatically-track-click-events-from-webflow-in-google-analytics-15fbe6834df5

Here is the JS code:

<script type="text/javascript">
(()=>{
  // automatically track all anchor click events:
  // also track all elements that have this class
  const trackClassName = "ga-event";
  // page context class detection (change if needed):
  const topNavLinkClass = "nav-link";
  const footerLinkClass = "footer-link";

  const trackClickEvent = function () {
    const eventCategory = this.getAttribute("data-event-category") || this.classList.contains(topNavLinkClass) ? "topnav" : this.classList.contains(footerLinkClass) ? "footer" : "";
    const eventAction = this.getAttribute("data-event-action") || "click";
    const eventLabel = this.getAttribute("data-event-label") || this.href;
    const eventValue = this.getAttribute("data-event-value");
    if("gtag" in window) {
      gtag('event', eventAction, {'event_category' : eventCategory, 'event_label' : eventLabel, 'value' : eventValue});
    }
  };

  // Find all anchor tags
  let elementsToTrack = document.getElementsByTagName("a");
  if (trackClassName) {
    elementsToTrack = [...new Set([...elementsToTrack, ...document.getElementsByClassName(trackClassName)])];
  }
  // Add an event listener to each of the elements you found
  elementsToTrack.forEach((el) => {
    el.addEventListener('click', trackClickEvent);
  });
})();
</script>

The script is backwards compatible with the above implementations, including support for ‘data-event-__’ and using the ‘ga-event’ class name. If you don’t define any of the above, however, it will default to adding some more useful information. If the click has an ‘href’, it will be used for the event label. If you have a common class name for your links in certain sections (which seems to be common with webflow templates) you can define them in the script to be used as the event categories- in my code I used two, topnav and footer.

Hope this helps.

1 Like