How can I add custom tracking code from Google to the "Book Online" button on the front page of my Webflow website?
TL;DR
- Assign a unique ID to the “Book Online” button in Webflow.
- Add the global tracking code (gtag.js or GTM) to the site’s head via Project Settings.
- Insert a custom click event script in the footer to trigger the tracking event on button click.
- Optionally, use Google Tag Manager to set up a click trigger and fire conversion tags without manual scripting.
To track clicks on your “Book Online” button using a custom Google tracking code (like a Google Ads conversion or Google Analytics event), you’ll need to manually add the tracking script and configure the button accordingly.
1. Identify the Tracking Type
- Google Ads: Use a conversion tracking tag.
- Google Analytics 4 (GA4): Use a gtag 'event' snippet or set it up via Google Tag Manager.
2. Add the Global Site Tag
- Go to Project Settings in Webflow.
- Click on the Custom Code tab.
- Paste your Google tracking global tag (gtag.js) into the Head section.
- Click Save Changes and Publish your site.
3. Assign a Unique ID to the Button
- Go to the Webflow Designer.
- Select your “Book Online” button.
- In the Element Settings Panel, give it a unique ID like
book-online-btn.
4. Add Custom Click Tracking Script
- Still inside the Webflow Footer Code section (in Project Settings > Custom Code), paste a script that fires your tracking code when the button is clicked.
Example for GA4 Event:
Use this structure (with your actual event name and parameters):
```html
```
Replace 'book_click', 'event_category', and 'event_label' with your preferred naming.
5. (Optional) Use Google Tag Manager (GTM)
- Embed GTM instead of gtag.js.
- Set up a Click Trigger within GTM using the button’s ID attribute.
- Fire a GA4 or AdWords conversion tag from GTM.
Summary
To track your “Book Online” button in Webflow, assign a unique ID to the button, embed the global tracking code in your site’s head, and add a click listener in the footer that fires the event. Alternatively, you can manage tracking entirely through Google Tag Manager for easier updates across your site.