Tracking successful bookings on your website is essential for understanding user behavior and measuring the effectiveness of your marketing efforts. In Google Analytics 4 (GA4), these bookings are considered conversions or key events. Accurately tracking these events allows you to measure how well your website is performing, optimize your campaigns, and ultimately drive more business.
When you use Cal.com to manage your calendar and bookings, setting up GA4 to track these events can be challenging. The confirmation page URL contains a parameter called isSuccessBookingPage=true but tracking that string using a standard page view trigger is difficult because the app uses dynamic URLs and the history API to update URLs on the backend.
During troubleshooting, we discovered that Cal.com already sends an event to the data layer when a booking is confirmed. By configuring this event in Google Tag Manager (GTM), you can ensure that it populates GA4 correctly and captures these important conversions.
Setting Up the GA4 Event in Google Tag Manager
Step 1: Create a Custom Event Trigger in GTM
To ensure that the GA4 event is triggered when the bookingSuccessful (the cal.com confirmation) event occurs, follow these steps:
- In GTM, navigate to Triggers.
- Click on New and select Trigger Configuration.
- Choose Custom Event as the trigger type.
- In the Event Name field, enter bookingSuccessful.
- Set the trigger to fire on All Custom Events.
- Save the trigger as
Booking Successful Trigger.
Step 2: Set Up a GA4 Event Tag
Now that you have your trigger set up, it’s time to create the GA4 event tag:
- Go to Tags in GTM and click on New.
- Choose Google Analytics: GA4 Event as the tag type.
- Select your GA4 configuration tag, which should include your Measurement ID.
- In the Event Name field, enter
booking_confirmation. - Assign the
Booking Successful Triggerto this tag. - (Optional) Add event parameters if you want to capture additional data from the
bookingSuccessfulevent. - Save the tag.
Step 3: Test Your Setup
Before publishing your changes, it’s important to test the setup:
- Re-enter Preview mode in GTM.
- Complete another booking on your Cal.com page.
- Verify that the GA4 event tag fires when the
bookingSuccessfulevent is pushed to the data layer.
Step 4: Publish Your Changes
Once you’re confident that the event is being tracked correctly, go back to GTM and click on Submit to publish your changes. This will make the event tracking live on your website.
Sending the Event to Google Ads
Tracking bookings in GA4 is essential, but you may also want to send this event to Google Ads for conversion tracking. You can do this in two ways: by importing events from GA4 into Google Ads or by using a Google Ads Conversion Tracking tag in GTM.
Method 1: Importing Events from GA4 into Google Ads
- Link GA4 to Google Ads: Ensure your GA4 property is linked to your Google Ads account. You can do this in GA4 by going to Admin > Google Ads Linking.
- Import Conversion:
- In your Google Ads account, go to Tools & Settings > Conversions.
- Click on New Conversion Action and select Import.
- Choose Google Analytics 4 properties and select Web.
- Select the
booking_confirmationevent from GA4 that you want to track as a conversion. - Complete the setup by defining the conversion action details, such as the conversion name and value.
- Track Conversions in Google Ads: Once set up, conversions will be automatically tracked in Google Ads whenever the
booking_confirmationevent is triggered.
Method 2: Using a Google Ads Conversion Tracking Tag in GTM
- Create a Conversion Action in Google Ads:
- Go to Tools & Settings > Conversions in Google Ads.
- Click New Conversion Action and choose Website.
- Set up the conversion action, including the conversion name, category, value, and other details.
- Google Ads will provide you with a Conversion ID and Conversion Label.
- Create a Google Ads Conversion Tracking Tag in GTM:
- Go to Tags in GTM and click on New.
- Choose Google Ads Conversion Tracking as the tag type.
- Enter the Conversion ID and Conversion Label provided by Google Ads.
- Assign the
Booking Successful Triggeryou created earlier to this tag. - Save the tag.
- Test and Publish:
- Use GTM’s Preview mode to test that the Google Ads Conversion Tracking tag fires correctly on the booking confirmation.
- Once confirmed, publish your changes.
Troubleshooting Tips
Why URL Parameters Might Not Work
Using URL parameters to track booking confirmations in Cal.com can be unreliable because the platform uses the History API to update the URL dynamically. This means that traditional Page View triggers may not capture the event correctly. Instead, rely on the bookingSuccessful event that Cal.com has already sent to the data layer.
Other Troubleshooting Steps
If the booking_confirmation event isn’t showing up in your GA4 real-time reports, consider the following:
- Measurement ID: Ensure that the Measurement ID in your GA4 configuration tag is correct.
- Real-time Report Delay: Sometimes, the event takes a few minutes to appear in GA4 real-time reports.
- DebugView: Use GA4’s DebugView mode to see if GA4 is processing the event.
- GTM and Google Ads Configuration: Ensure that all configurations in GTM and Google Ads are correctly set up, and that you’ve linked your accounts properly.
Verify the Cal.com bookingSuccessful Event
If you run into problems, you’ll want to verify that cal.com is still sending the bookingSuccessful event.
You can skip this step because as of the date of this post, cal.com does send this event.
Before setting up the event in GA4, you need to confirm that the bookingSuccessful event is being pushed to the data layer by cal.com. Here’s how:
- Go to Google Tag Manager (GTM) and enter Preview mode.
- Complete a booking on your Cal.com page.
- In the GTM Debug panel, look for the bookingSuccessful event in the left column.
Once you’ve confirmed this event, you’re ready to move on to creating the trigger in GTM.
