November 29, 2020

How to Track Webflow Button Clicks on Google Analytics

Chart with arrows pointing up and down
SECTIONS
  1. Configuring Webflow Settings
  2. Setting up events on Webflow Designer

Webflow is a rising website builder, popular for its no-code format and easy-to-use setup. (In fact, we at Lido use it for all of our website- and CMS-related needs!) 

Because it’s newer than alternatives like WordPress, however, sometimes Webflow lacks straightforward functionality to integrate with other platforms. You may have noticed, for example, setting up click events on Google Analytics for your Webflow site can be difficult. We’ll take you through a step-by-step way to easily complete this!

Keep in mind: a Webflow project and a Google Analytics account are necessary for this tutorial! 


Configuring Webflow Settings

Step 1: Go to your Webflow Dashboard > Click on More Options “...” on your desired project > Click Settings.

Menu on Webflow with Settings option highlighted
Menu that appears once "..." is clicked.


Step 2: Click on the Integrations tab. Under Google Analytics, make sure you have a Google Universal Analytics Tracking ID installed. Next, disable the Use global site tag toggle so it’s set to “NO.”

Integrations tab, specifically the Google Analytics section, on Webflow Project Settings
Integrations tab on Webflow's Project Settings.


Step 3: Click Save Changes.

Step 4: Switch to the Custom Code tab. Under the Footer Code, paste the following code to configure the Custom attributes:


<script type="text/javascript"></script>

  //GA Event Tracker Script. Licensed under MIT. Free for any use by all. Written by Paul Seal from codeshare.co.uk


  // Get the category, action and label from the element and send it to GA. The action is optional, because mostly it will be a click event.

  var trackClickEvent = function () {

    var eventCategory = this.getAttribute("data-event-category");

    var eventAction = this.getAttribute("data-event-action");

    var eventLabel = this.getAttribute("data-event-label");

    var eventValue = this.getAttribute("data-event-value");

    ga('send', 'event', eventCategory, (eventAction != undefined && eventAction != '' ? eventAction : 'click'), eventLabel, eventValue);

  };


  // Find all of the elements on the page which have the class 'ga-event'

  var elementsToTrack = document.getElementsByClassName("ga-event");


  // Add an event listener to each of the elements you found

  var elementsToTrackLength = elementsToTrack.length;

  for (var i = 0; i < elementsToTrackLength; i++) {

    elementsToTrack[i].addEventListener('click', trackClickEvent, false);

  }

  


Step 5: Click Save Changes.

Now that the settings are adjusted, you should be ready to create events in the Designer!

Setting up events on Webflow

This section should be repeated as many times as you want with as many events as you desire! We’ll take you through how to create an event associated with a clicked button, but you can repeat the same steps for other elements and actions (i.e. clicking links, selecting text fields, etc).

Step 6: Open up the Webflow Designer > Select desired page for event > Select desired element to trigger the event. 

(As mentioned above, we’ll be selecting one of our buttons.)

Step 7: On the Style tab, under the Class Selector, enter the Class ga-event

Class Selector on the Style tab of the Webflow Designer. Has tag ga-event.
Class Selector on the Style tab of the Webflow Designer.

Step 8: On the Element Settings tab, we’re now going to enter your desired custom attributes. You can select one or more of the following as the Name: data-event-category, data-event-action, data-event-label, data-event-value. (Each corresponds with the Category, Action, Label, and Value fields on Google Analytics, respectively.)

You will also enter the Custom Value depending on how you want the event attribute to be assigned. Here’s an example of our set-up:

Add Attribute pop-up on Webflow with Name and Value filled in
Add Attribute pop-up on Webflow with Name and Value filled in
For our home button, we have data-event-category set to “Website Leads” and data-event-label set to “Main Home Button”.



Make sure to remember these settings (or have them available) as you set up Goals on Google Analytics!

Step 9: Publish your changes, so Google Analytics can now start tracking the events! You’ll be able to see them on Google Analytics under Behavior > Events for general tracking and/or Realtime > Events for live tracking.

Suscribe to get more data and analytics tips!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.