Google Analytics event tracking for buttons in Webflow

Design help General
8

Hey guys, one workaround to this for the time being is to use the custom code feature to wire up an event handler.

First, give your link some unique ID in the Settings tab:

Then go to your site’s Dashboard, go to the Custom Code section, and add the following example code in the Footer Code section:

<script>
  $(document).ready(function() {
    $('#my-unique-link').on('click', function(e) {
      _gaq.push(['_trackEvent', 'Lightbox', 'Open', 'Microsoft Project']);
    });
  });
</script>

If you have a lot of these all across your site with different parameters, you can create a common handler that keys off of allowed custom attributes, like so:

First add a data-gatrack attribute to the links you want to track. You can call it whatever you want, but it should start with data- and it must match the script (shown below) exactly.

Then add the following more-generic click handler to the Footer Code of your site:

<script>
  $(document).ready(function() {
    $(document).on('click', '[data-gatrack]', function(e) {
      var $link = $(this);
      var trackData = $link.data('gatrack');
      if (!trackData) { return; }
    
      var trackParams = ['_trackEvent'].concat(trackData.split(','));
        _gaq.push(trackParams);
      });
  });
</script>

Note that attribute names here are case-sensitive, so if you set your custom attribute to something like data-gaTrack and don’t update the script to reflect that, it won’t work.

14 Likes