How can I add custom tracking code from Google to the "Book Online" button on the front page of my Webflow website?

To add custom Google tracking code (like a Google Ads conversion script or Google Analytics event) to the "Book Online" button in Webflow, you need to insert the code so it triggers when that button is clicked.

1. Identify or Add a Unique Selector to the Button

• Open the Webflow Designer.
• Click the “Book Online” button.
• In the Settings panel, check if the button has a unique ID or class.
• If not, assign a custom ID like book-online-btn in the Element Settings > Element ID field.

2. Add the Custom Tracking Script

• Go to Page Settings (for your homepage) or Site Settings > Custom Code if the script applies globally.

• Paste your Google tracking code (e.g., a gtag event or Google Ads conversion tag) within the Before tag section.

• Include a click event listener using the button's ID or class. For example:

• For an ID selector, use:

  • document.getElementById('book-online-btn').addEventListener('click', function() { /* tracking code here */ });

• For a class selector like .book-button, use:

  • document.querySelector('.book-button').addEventListener('click', function() { /* tracking code here */ });

• Replace /* tracking code here */ with your Google Ads or Analytics event code. Example for Google Analytics 4:

• gtag('event', 'book_now_click', { 'event_category': 'Button', 'event_label': 'Book Online' });

3. Publish the Website

• After adding and saving the code, publish your Webflow site to test the tracking.

4. Verify the Tracking

• Use Google Tag Assistant or Google Analytics Realtime Reports to ensure the event is firing when the button is clicked.
• You can also test in Google Tag Manager’s preview mode if using GTM.

Summary

To track clicks on your "Book Online" button in Webflow, give it a unique ID or class, then insert your Google tracking code in the Before tag section using a click event listener linked to that button. Be sure to publish and test the implementation.