How can I add custom tracking code from Google to the "Book Online" button on the front page of my Webflow website?
- Assign a unique ID or class to the "Book Online" button in Webflow.
- Use either custom JavaScript or set up a GTM Click Trigger and Tag to send an event to Google Analytics when the button is clicked.
- Publish your site and verify tracking using Tag Assistant, GTM Preview, or GA4 Realtime Reports.
To track clicks on your "Book Online" button in Webflow using Google tools (like Google Analytics or Google Tag Manager), you need to add a custom tracking event. Here's how to do it depending on whether you're using Google Tag Manager (GTM) or Google Analytics directly.
1. Identify or Add a Unique ID or Class to the Button
- Open your Webflow Designer.
- Select the "Book Online" button.
- In the Element Settings panel (D), assign a unique ID (e.g.,
book-online-btn) or a Class (e.g.,book-button). - Make sure it's identifiable and won't be used elsewhere to avoid conflicting events.
2. Add Custom Script for Event Tracking
- Go to Project Settings > Custom Code.
- In the Footer Code section, paste your tracking snippet.
- Here's an example for Google Analytics 4 (GA4):
```js
<script>
document.addEventListener('DOMContentLoaded', function () {
var bookBtn = document.getElementById('book-online-btn');
if (bookBtn) {
bookBtn.addEventListener('click', function () {
gtag('event', 'click', {
'event_category': 'Button',
'event_label': 'Book Online',
'value': 1
});
});
}
});
</script>
```
- Replace
gtag(...)with your own tracking logic if you're using a different method like GTM.
3. If Using Google Tag Manager (GTM)
- In Webflow, ensure your GTM container code is already added under Project Settings > Custom Code > Head/Body.
- In GTM, create a Click Trigger:
- Trigger Type: Click – All Elements or Click – Just Links.
- Enable "Some Clicks" and filter based on your button's ID (
Click ID equals book-online-btn) or Class (Click Classes contains book-button). - Create a Google Analytics Event Tag (GA4 or UA):
- Set event parameters (e.g., event name:
bookbuttonclick, label:Book Online). - Set the trigger to the one you just created.
4. Publish and Test
- Publish your Webflow website.
- Use Google Tag Assistant and GTM Preview mode to verify the event fires.
- Check GA4's Realtime Report or the Events tab to confirm data is coming through.
Summary
Add a unique ID or class to your "Book Online" button, then use either custom JavaScript or Google Tag Manager to send an event to Google Analytics when the button is clicked. Always test with Tag Assistant or GTM Preview before going live.