Tracking Appointment Booking Conversions

Track when customers book appointments so you can measure the effectiveness of your advertising campaigns in platforms like Meta (Facebook/Instagram), Google Ads, or Google Analytics.

Note: This is an advanced feature that requires embedding the CloudBridal scheduler into your website. If you're not comfortable editing your website's code, you'll likely need to involve your web designer or developer. Feel free to share this article with them directly—the technical details they need are included below.

Overview

What This Enables

When a customer books an appointment through your embedded scheduler, your website can notify your advertising platforms that a conversion occurred. This allows you to:

• See which ads are driving actual bookings (not just clicks)
• Optimize your ad campaigns based on real results
• Calculate your true return on ad spend

What's Required

1. A page on your website with the scheduler embedded. Conversion tracking only works when the scheduler is embedded on your own website—it won't work if customers book directly through a go.cloudbridal.com link. This is because tracking requires adding code to the page where bookings happen, and you can only add code to pages you control.
2. The Advanced embed code. You can find this in CloudBridal under Settings → Appointments → Appointment Scheduler Links → Option 3 (Advanced).
3. Your advertising platform's tracking code. This is separate from CloudBridal. You'll get this from Meta, Google, or whichever platform you're using.

Do I Need a Developer?

Probably yes, unless you're comfortable editing HTML and JavaScript. The good news is that this is a relatively straightforward task for most web developers or designers who work with code. Here's what to tell them:

"I need to embed our appointment scheduler on a booking page and add conversion tracking. The scheduler sends a JavaScript postMessage event when someone books. I have documentation that explains the event format and includes code examples."

Then share this article with them.

Technical Implementation Guide

The following sections are written for developers and contain the technical details needed for implementation.

How It Works

When a customer completes a booking through the embedded scheduler, CloudBridal dispatches an event using the browser's postMessage API. Your page listens for this event and triggers conversion tracking in response.

Event Data Structure

The appointment-booked event includes the following properties:

Example event data:

{
  "type": "appointment-booked",
  "appointmentGuid": "3u30xPWTbEqy44ahFfGRgg",
  "appointmentType": "Bridal",
  "status": "Pending",
  "value": 0,
  "forWaitlist": false
}

Step 1: Embed the CloudBridal scheduler in your booking page

Add the iframe code available in CloudBridal under Settings → Appointments → Appointment Scheduler Links → Option 3 (Advanced).

Step 2: Add Conversion Tracking

Add an event listener that fires conversion tracking code when a booking is completed. The basic pattern looks like this:

<script>
  window.addEventListener('message', function(event) {
    // Ignore events that aren't appointment bookings
    if (!event.data || event.data.type !== 'appointment-booked') return;

    // Optional: Skip waitlist requests
    if (event.data.forWaitlist) return;

    // {Conversion tracking code goes here}

  }, false);
</script>

Platform-Specific Examples

Below are examples for common tracking platforms. Replace placeholder values (like AW-XXXXXXXXXX) with actual account and conversion IDs from the client's advertising accounts.

Meta Pixel (Facebook/Instagram)

<script>
  window.addEventListener('message', function(event) {
    if (!event.data || event.data.type !== 'appointment-booked') return;
    if (event.data.forWaitlist) return;

    if (typeof fbq !== 'undefined') {
      fbq('track', 'Schedule', {
        content_name: event.data.appointmentType || 'Appointment',
        value: event.data.value || 0,
        currency: 'USD'
      });
    }
  }, false);
</script>

Google Ads

<script>
  window.addEventListener('message', function(event) {
    if (!event.data || event.data.type !== 'appointment-booked') return;
    if (event.data.forWaitlist) return;

    if (typeof gtag !== 'undefined') {
      gtag('event', 'conversion', {
        send_to: 'AW-XXXXXXXXXX/YYYYYYYYYY',
        value: event.data.value || 0,
        currency: 'USD',
        transaction_id: event.data.appointmentGuid
      });
    }
  }, false);
</script>

Google Analytics 4 (GA4)

<script>
  window.addEventListener('message', function(event) {
    if (!event.data || event.data.type !== 'appointment-booked') return;
    if (event.data.forWaitlist) return;

    if (typeof gtag !== 'undefined') {
      gtag('event', 'appointment_booked', {
        appointment_type: event.data.appointmentType,
        appointment_id: event.data.appointmentGuid,
        status: event.data.status,
        value: event.data.value || 0,
        currency: 'USD'
      });
    }
  }, false);
</script>

Combined Example (Multiple Platforms)

For tracking across multiple platforms simultaneously:

<script>
  window.addEventListener('message', function(event) {
    if (!event.data || event.data.type !== 'appointment-booked') return;
    if (event.data.forWaitlist) return;

    // Meta Pixel
    if (typeof fbq !== 'undefined') {
      fbq('track', 'Schedule', {
        content_name: event.data.appointmentType || 'Appointment',
        value: event.data.value || 0,
        currency: 'USD'
      });
    }

    // Google Ads
    if (typeof gtag !== 'undefined') {
      gtag('event', 'conversion', {
        send_to: 'AW-XXXXXXXXXX/YYYYYYYYYY',
        value: event.data.value || 0,
        currency: 'USD',
        transaction_id: event.data.appointmentGuid
      });
    }

    // Google Analytics 4
    if (typeof gtag !== 'undefined') {
      gtag('event', 'appointment_booked', {
        appointment_type: event.data.appointmentType,
        appointment_id: event.data.appointmentGuid,
        status: event.data.status,
        value: event.data.value || 0,
        currency: 'USD'
      });
    }
  }, false);
</script>

Tips & Best Practices

Create a dedicated booking page. A dedicated page like yoursite.com/book-appointment lets you add helpful context around the scheduler—such as a map, parking instructions, cancellation policy, or what to expect. It also keeps customers on your website for a more seamless experience.

Test before launching campaigns. Verify that events are firing correctly using browser developer tools or platform debugging tools (Meta Pixel Helper, Google Tag Assistant) before spending money on ads.

Consider filtering by status. To track only confirmed appointments (not pending), add a status check:

if (event.data.status !== 'Confirmed') return;

Handle waitlist requests appropriately. Waitlist requests also trigger the appointment-booked event with forWaitlist: true. Decide whether these should count as conversions for your campaigns.

Troubleshooting

Events aren't firing: Ensure the tracking platform's base code (Meta Pixel, Google tag, etc.) is installed and loads before the booking completes. Check the browser console for errors.

Iframe not displaying: Verify the clientGuid is correct and that ad blockers or browser security extensions aren't interfering.

Conversions not appearing in reports: Reporting dashboards often have a delay of several hours or more. Also confirm that the conversion action is properly configured in the platform's settings.

Updated on: 18/12/2025