How to Fix iFrame Direct Traffic in Google Analytics 4

How can I see goals from referrals?


Hello,
I’m working with web within the restaurant industry. We are using a booking engine to our restaurant which is opened in an iframe. I can measure conversion by looking at how many of our users that completes the event “/booking-confirmation”.ย 

I’m currently working with a partner that lists my restaurant and I want to see the conversion on visitors coming from his site. But when I try to set a filter with source to his site I see 0 in Google Analytics. It’s showing all conversions are coming from direct traffic.

Why is this and how can I solve this?

Kind regards,

Karl
Details
identifying_conversions

The short answer is:

How does an iframe cause traffic to appear as direct in Google Analytics?

The loss of referral data is a classic challenge with cross-domain tracking and iframes, which prevent the original source from being automatically passed to your Google Analytics 4 (GA4) property, often resulting in “direct” traffic attribution.

The most technical and robust solution is to use server-side tracking via a custom setup with Google Tag Manager (GTM) and Stape, leveraging the Google Analytics Measurement Protocol.

This approach allows you to capture the initial referral data (the partner’s site) on your server before the iframe loads, and then send a direct, server-to-server event to GA4.

This bypasses the browser’s security restrictions and correctly attributes the conversion, which is far more reliable and cost-effective than client-side workarounds which often break.

The long answer is:

Your issue stems from the browser’s security model, specifically the same-origin policy, which limits how scripts in a parent window (your site) can interact with content inside an iframe (the booking engine).

When a user clicks a link on your partner’s site and lands on your page, the referral data is present.

However, when the user then interacts with the iframe to complete the booking, the iframe environment often fails to inherit or correctly communicate the original source to the final conversion tag, leading to the conversion being registered as “direct” traffic.

A robust solution requires a server-side approach, moving the tracking logic away from the volatile client-side environment.

This involves setting up a server-side GTM container, often hosted on a dedicated platform like Stape running on Google Cloud Platform (GCP).

When the user lands on your page, you capture the original referrer using the standard GTM web container.

Then, when the user reaches the /booking-confirmation event inside the iframe, instead of relying on a standard GA4 tag, you trigger a call to your server-side GTM endpoint.

The server-side container then reconstructs a complete event payload, including the preserved referral information (the partner’s site), and sends it directly to Google Analytics 4 using the Google Analytics Measurement Protocol.

This is a crucial step because the Measurement Protocol allows you to send data to GA4 from any environment, bypassing the client-side issues of iframes.

This method is highly accurate, maintains data integrity by eliminating reliance on fickle client-side cookies, and is cost-effective in the long run as it centralizes your data collection logic and significantly reduces data discrepancies and maintenance overhead associated with browser changes.

About The Author