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