Track Events (clicks) using Google Analytics Script

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