GHL / ConnectorHQ Tracking

April 9, 2026
  • First Published: April 9, 2026
  • Last Modified: April 9, 2026

Are you using a booking widget like GoHighLevel (LeadConnector) on your website?

For any marketing teams using these booking forms there is a recurring headache: tracking those iFrame conversions in Google Analytics 4 (GA4).

Because these widgets load inside an iFrame, they often act like a restricted “black box.”

Fortunately, I’ve come up with a reliable workaround.

Let’s dive into how to track those iFrame conversions in GA4.

Table of Contents

Key Takeaways

  • The Problem: iFrames prevent standard GTM triggers from seeing user actions because of browser security rules.

  • The Solution: Use a Custom HTML listener in GTM to “hear” the success signals the iFrame sends to your parent page.

  • The Benefit: Accurate conversion data in GA4, allowing for better budget allocation and lead attribution.

  • Expert Tip: Always validate the “Origin” of the message to ensure your data remains secure and clean.

Step 1: Find the postMessage Payload

Before building anything in GTM, you need to prove the widget is actually broadcasting a success message when a user books a call.
  1. Open the page containing your GoHighLevel booking widget.
  2. Open your browser’s Developer Tools (Right-Click -> Inspect) and go to the Console tab.
  3. Paste this listener script into the console and press Enter:
				
					window.addEventListener("message", function(event) {
  console.log("Origin:", event.origin);
  console.log("Data Payload:", event.data);
});

Now, complete a test booking.

You’ll likely see a lot of background noise in the console (often [iFrameSizer] messages).

Ignore those.

Look for the message that fires exactly when you confirm the booking. For GoHighLevel, the success payload usually looks like an array:

Origin: https://api.leadconnectorhq.com

Data Payload: (2) [‘msgsndr-booking-complete’, {calendarId: ‘GYtco…’}]

Step 2: Create a Custom HTML Listener in GTM

Now that we know what the success message looks like, we can tell GTM to listen for it. This script acts as a filter—it ignores the resizing noise and waits specifically for the msgsndr-booking-complete signal.

  1. In GTM, navigate to Tags > New and select Custom HTML.
  2. Paste the following script:
				
					<script>
(function() {
  window.addEventListener("message", function(event) {
    // 1. Verify the exact origin of the iframe
    var expectedOrigin = "https://api.leadconnectorhq.com"; 
    if (event.origin !== expectedOrigin) return;

    try {
      var messageData = event.data;

      // 2. Check if the payload contains the booking completion event
      if (Array.isArray(messageData) && messageData[0] === "msgsndr-booking-complete") {
        var bookingDetails = messageData[1] || {};

        // 3. Push to the GTM Data Layer
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          'event': 'ghl_booking_complete', 
          'ghl_calendar_id': bookingDetails.calendarId 
        });
      }
    } catch (e) {}
  });
})();
</script>
  1. Set the trigger to fire on All Pages (or specific landing pages where the widget lives).

What does this do?

This looks for the message msgsndr-booking-complete and pushes a dataLayer event called ghl_booking_complete

You can amend the event name if you want.

Step 3: Build the Custom Event Trigger

Next, we need a trigger that fires our GA4 tag only when the ghl_booking_complete event happens in our script.

  1. Go to Triggers > New > Custom Event.
  2. For the Event Name, enter ghl_booking_complete.
  3. Save the trigger as CE – GHL Booking Complete.
Trigger GHL

Step 4: Send the Conversion to GA4

It’s time to tie it all together. We want to send this data to GA4 using a recommended event name to keep your reporting clean.

  1. Go to Tags > New > Google Analytics: GA4 Event.
  2. Enter your Measurement ID (or add your constant variable)
  3. For the Event Name, use generate_lead. This is a Google-recommended event that helps GA4’s machine learning better understand your conversion path.
  4. Attach the CE – GHL Booking Complete trigger.
GHL GA4 event

Step 5: Testing

Never publish without testing.

Use GTM’s Preview mode and run a final test booking on your site.

You should see the ghl_booking_complete event appear on the left side of the debug timeline.

When you click on that event, your GA4 event tag should show as “Succeeded” or “Fired.”

Tracking cross-domain iFrames can feel like navigating a minefield, but by leveraging postMessage payloads, you can reclaim your data accuracy. If you’re seeing discrepancies in your lead data or want to take your tracking further with server-side tagging, the team at KRM Digital is here to help.

GHL Testing

Tracking cross-domain iFrames can feel like navigating a minefield, but by leveraging postMessage payloads, you can reclaim your data accuracy.

Frequently Asked Questions

Why can’t I just track the “Thank You” page?

Many GoHighLevel widgets don’t redirect to a new URL; they simply show a success message within the same iFrame. If there is no URL change, there is no “Page View” for GTM to trigger on.

Will this slow down my website?

Not noticeably. This script is lightweight and only executes a few lines of code when a message is received. If you are that concerned about tags and triggers slowing down your site, do a tag manager audit any remove any unused scripts.

Do I need to do this for every calendar?

No. Because we are capturing the calendarId dynamically, this single setup will track bookings across all your GoHighLevel calendars and tell you exactly which one was used in your GA4 reports.

Kyle

Author

Hello, I'm Kyle Rushton McGregor!

I’m an experienced GA4 Specialist with a demonstrated history of working with Google Tag Manager and Looker Studio. I’m an international speaker who has trained 1000s of people on all things analytics.

Find out more About me
Scroll to Top