Analytics Setup

bookerkit_widget_opened

When: Widget loads or button is clicked

Use for: Tracking widget engagement, page views

Data included: accountId, sessionId, accountName

bookerkit_booking_started

When: User completes personal information (Step 1)

Use for: Lead generation tracking, measuring booking intent

Data included: accountId, sessionId, guestId, email

bookerkit_service_selected

When: User selects a service (Step 2)

Use for: Understanding which services drive bookings

Data included: accountId, sessionId, serviceId, price, addOnCount. On a pre-selected or promo link, also preSelected and promoTitle.

bookerkit_provider_selected

When: User selects a provider/therapist (Step 3, if provider selection is enabled)

Use for: Tracking provider preferences, funnel analysis

Data included: accountId, sessionId, providerId, providerName, serviceId

bookerkit_date_selected

When: User picks an appointment date

Use for: Micro-conversion tracking

Data included: accountId, sessionId, date (YYYY-MM-DD), serviceId

bookerkit_time_selected

When: User selects a time slot

Use for: Funnel optimization

Data included: accountId, sessionId, date, time, formattedTime, serviceId, duration

bookerkit_booking_completed

When: Booking successfully completed

Use for: PRIMARY CONVERSION EVENT for Google Ads, Facebook, GA4

Data included: accountId, sessionId, bookingId, reservationId, value (service price, a number), serviceId, date, startTime, addOnCount, prerequisiteCount, guestNameSha256, guestEmailSha256

Google Ads

1. Open Google Ads and go to Tools → Conversions
2. Click "+ New conversion action"
3. Select "Website" as the conversion source
4. Choose "Code the conversion action yourself"
5. Set up conversion with event name: bookerkit_booking_completed
6. Configure value tracking using the value parameter
7. Save and verify events are being tracked

Facebook Pixel

1. Open Facebook Events Manager and select your pixel
2. Go to "Custom Conversions" → "Create Custom Conversion"
3. Name it "Booking Completed"
4. For the rule, choose "URL equals" and enter your website domain
5. Add an event parameter rule: "event equals bookerkit_booking_completed"
6. Set the conversion value to use event value
7. Save and use in your Facebook Ads campaigns

Google Analytics 4

1. Events automatically appear in GA4 if using GTM
2. Go to GA4 → Configure → Events to see all BookerKit events
3. Mark bookerkit_booking_completed as a conversion
4. Use the value parameter for revenue tracking in reports
5. Create audiences based on booking behavior for remarketing

Google Tag Manager

GTM receives every BookerKit event automatically. See Firing Your Own Tags below for the full trigger, variable, and tag walkthrough.

Option A — Google Tag Manager trigger

The embed script pushes every event onto window.dataLayer with the event name in the event key, which is exactly what a GTM Custom Event trigger listens for. No cross-domain or iframe configuration is needed — install your GTM container on the host page as usual.

1. Create the trigger

1. Go to GTM → Triggers → New → Trigger Configuration
2. Choose trigger type Custom Event
3. Event name: bookerkit_booking_completed
4. Leave "This trigger fires on" set to All Custom Events
5. Name it something like "CE - BookerKit Booking Completed" and save

2. Create Data Layer Variables for the fields you need

1. Go to GTM → Variables → User-Defined Variables → New
2. Choose variable type Data Layer Variable
3. Data Layer Variable Name: value (Version 2, no default)
4. Name it "DLV - value" and save
5. Repeat for any other key you need: bookingId, serviceId, sessionId, accountId, guestEmailSha256

3. Point a tag at the trigger

1. Go to GTM → Tags → New and pick your tag type
2. Google Ads Conversion Tracking: set Conversion Value to {{DLV - value}}, Transaction ID to {{DLV - bookingId}}, and type the currency in manually — see the note below
3. GA4 Event: event name purchase (or your own), with event parameters mapped to the same variables
4. Meta pixel via Custom HTML: call fbq('track', 'Schedule', ...) using the variables
5. Under Triggering, select the Custom Event trigger from step 1, then save and submit

4. Verify in Preview

1. Click Preview and enter the URL of the page the widget is embedded on
2. Complete a test booking in the widget
3. The bookerkit_* events appear in the Tag Assistant timeline on the host page, not in the iframe — the widget relays them to the parent window
4. Click the event and confirm your tag is listed under "Tags Fired"

Option B — Vanilla JavaScript listener

With no tag manager, wrap dataLayer.push and call your tag from the wrapper. Place this script before the BookerKit embed script so the wrapper is installed before the first event fires.

<script>
  window.dataLayer = window.dataLayer || []

  // Wrap push so every BookerKit event runs through your handler.
  var originalPush = window.dataLayer.push.bind(window.dataLayer)
  window.dataLayer.push = function () {
    for (var i = 0; i < arguments.length; i++) {
      var entry = arguments[i]
      if (entry && typeof entry.event === 'string' &&
          entry.event.indexOf('bookerkit_') === 0) {
        handleBookerkitEvent(entry)
      }
    }
    return originalPush.apply(null, arguments)
  }

  function handleBookerkitEvent(payload) {
    if (payload.event !== 'bookerkit_booking_completed') return

    // Google Ads conversion via gtag.js
    gtag('event', 'conversion', {
      send_to: 'AW-XXXXXXXXX/AbC-D_efGh12_34-567',
      value: payload.value,
      currency: 'USD',
      transaction_id: payload.bookingId
    })

    // Meta pixel — eventID lets Meta dedupe against the CAPI event
    fbq('track', 'Schedule', {
      value: payload.value,
      currency: 'USD'
    }, { eventID: payload.bookingId })
  }
</script>

<!-- BookerKit embed goes after the script above -->
<div data-bookerkit-widget="your-account"></div>
<script src="https://www.bookerkit.com/embed.js" async></script>

If you would rather not touch dataLayer at all, read the raw message the widget posts to the parent window. This is the same stream the embed script consumes, so it works even on a page with no analytics installed.

<script>
  var seen = {}

  window.addEventListener('message', function (event) {
    // Required: only trust messages from the BookerKit origin.
    if (event.origin !== 'https://www.bookerkit.com') return

    var msg = event.data
    if (!msg || msg.type !== 'bookerkit_analytics') return

    // The raw stream is not de-duplicated — guard it yourself.
    var key = msg.event + '|' + (msg.data.sessionId || '')
    if (seen[key]) return
    seen[key] = true

    if (msg.event === 'bookerkit_booking_completed') {
      // msg.data holds the same keys listed under Events Fired
      fbq('track', 'Schedule', {
        value: msg.data.value,
        currency: 'USD'
      }, { eventID: msg.data.bookingId })
    }
  })
</script>

Ad Platform Click IDs

Automatically captures: gclid (Google), fbclid (Facebook), fbc / fbp (Facebook cookies), msclkid (Microsoft).

UTM Parameters

Captures utm_source, utm_medium, utm_campaign, utm_term, and utm_content from the page URL.

Device & Browser

Records device type (desktop/mobile/tablet), browser name and version, OS, screen resolution, and viewport size.

Referral Data

Captures the referring URL and landing page where the widget was loaded.

Browser Console

Open your browser's developer console and type dataLayer to see all events. After completing a booking, you should see BookerKit events appear.

Google Tag Assistant

Install the Google Tag Assistant browser extension. It will show you all GTM and GA4 events firing in real-time as you test the widget.

Facebook Pixel Helper

Install the Facebook Pixel Helper extension to verify Facebook events are firing correctly.