Event tracking with the new gtag.js

Design help Custom code
1

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

2

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 - #27 by WFHelp_FF

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

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?

4

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
5

@alexvale, thanks alot for sharing this !

6

@alexvale how can you add a ā€œNameā€ custom attribute to a form button? Looks like this is not possible (anymore?)ā€¦

Thanks for your help!!

7

@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ā€™.

image
image514Ɨ554 26.5 KB

1 Like
8

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

    Screen Shot 2021-07-15 at 2.28.09 PM
    Screen Shot 2021-07-15 at 2.28.09 PM1758Ɨ632 75.2 KB

  2. Added your code to site footer

    image
    image1468Ɨ844 105 KB

  3. Added data-gatrack attribute to my test button

    image
    image2430Ɨ2006 267 KB

  4. Checked GA Events

    image
    image3838Ɨ2004 491 KB

  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?

9

Thank you for this Alex. Worked like a charm.