Integrate Link Tracking for Google Analytics and Mixpanel into your website

October 9, 2016

This article shows your how to add Google Analytics tracking and Mixpanel tracking to your Webflow site.

1. Add relevant scripts to your site

Visit Google analytics.js 

Or if integrating Mixpanel, visit their help site.

2. Give your links IDs and track each link

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>

2a. Or set up a global click handler

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 = $'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