Event tracking with the new gtag.js

Hey guys

Seems like the event tracking stopped working after google introduced the new gtag.js any idea how I can continue tracking events?

Thanks

I don’t know about gtag.js (which is specially purposed for webshops), but the new version for ‘normal use’ is ga.js (there is a switch in the settings/integrations page of Webflow). You can implement it almost as in the ‘old’ way as described in: Google Analytics event tracking for buttons in Webflow

but you need to change the code in the footer to:

<!-- Start of Google Analytics Event tracking code -->
<script>
  $(document).ready(function() {
    $(document).on('click', '[data-gatrack]', function(e) {
      var $link = $(this);
      var trackData = $link.data('gatrack');
      if (!trackData) { return; }
    
      var trackParams = ['send', 'event'].concat(trackData.split(','));
      ga.apply(null, trackParams);
    });
  });
</script>
<!-- End of Google Analytics Event tracking code -->

need more data on this

i’ve tried following those instructions exactly, and used the code from this post

no events being triggered in google analytics

any help?

I’ve been attempting to fix the same problem: trying to record events in google analytics from webflow.

I’ve managed to find a solution by doing the following:

  • Don’t use webflow’s google analytics integration under their ‘Integrations’ tab. Instead, paste google’s Global Site Tag (gtag.js) into your site’s <head> tag (under webflow’s ‘Custom Code’ tab).

  • Paste the following code into the ‘Footer Code’ section of webflow’s ‘Custom Code’ tab:

      <script>
       $(document).ready(function() {      
         $(document).on('click', '[data-gatrack]', function(e) {
    
           var $link = $(this);
                   var commaSeperatedEventData = $link.data('gatrack');
                   var eventParams = commaSeperatedEventData.split(',');
    
                   if (!eventParams) { return; }
    
                   eventCategory = eventParams[0]
                   eventAction = eventParams[1]
                   eventLabel = eventParams[2]
    
                   gtag(
                       'event',
                       eventAction,
                       {
                           'event_category': eventCategory,
                           'event_label': eventLabel
                       }
                   )
             
         });
       });
       </script>
    
  • Go to an element you want to track an event on (like a form button), and add a ‘Custom Attribute’ with the following format: Name = data-gatrack Value = yourEventCategory, yourEventAction, yourEventLabel

3 Likes

@alexvale, thanks alot for sharing this !

@alexvale how can you add a “Name” custom attribute to a form button? Looks like this is not possible (anymore?)…

Thanks for your help!!

@marky when you click the ‘+’ button under Custom Attribute it will come up with a popup that looks like the image below. There should be 2 fields, ‘Name’ and ‘Value’.

1 Like

Thanks for this solution, @alexvale!

I’ve implemented it but can’t tell if it’s working. How would you go about testing to see if it works?

Here’s what I’ve done:

  1. Added gtag.js script to site head

  2. Added your code to site footer

  3. Added data-gatrack attribute to my test button

  4. Checked GA Events

  5. Tried using GA Debug and Event Tracking Tracker Chrome extensions, but couldn’t figure out how to test for successful tracking
    image

What am I missing? :man_facepalming:
And how would you go about testing?

Thank you for this Alex. Worked like a charm.