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!
Step 1: Go to your Webflow Dashboard > Click on More Options “...” on your desired project > Click Settings.
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.”
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!
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.
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:
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.
