How to track any event action with Google Analytics and Webflow

I use Webflow heavily at work and during the development of our new marketing site I ran in to an issue where Webflow's Google Analytics integration doesn't actually work!

After some investigation it looks like there's a difference in the script Webflow is using and the one Google Analytics now offers.

I couldn't find anything any documented fix through Google or the Webflow forum so I decided I'd find the solution through trial and error and share it as much as possible.

First you need to turn off Webflow's Google Analytics integration. Instead, paste your gtag.js script in to Webflow's 'Head Code' in the Custom Code section. You can find your gtag.js script by going to Google Analytics > Admin > Tracking Info (under your Property) > Tracking Code.

Then paste the following code into Webflow's 'Footer Code':

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

Now all that's left is to identify which items you want to track when clicked. To do that, go to the item in Webflow and add a Custom Attribute with the following format:
Name = data-gatrack
Value = yourEventCategory, yourEventAction, yourEventLabel

I hope people find this helpful!