We are using HubSpot embedded booking forms within iframes on our website, and we are trying to track the traffic source (organic, paid, direct, etc.) for users who book a meeting via these iframes. However, despite our efforts, the traffic is consistently recorded as direct traffic in HubSpot.
Key Challenges:
Passing traffic source data to the iframe: We need to ensure that the traffic source data (like UTM parameters or referrer information) is properly passed from the parent page (where the iframe is embedded) to the HubSpot meeting booking form inside the iframe.
Traffic source categorization: Many users arrive without UTM parameters (via organic search, direct traffic, or from ads), and we need to classify traffic sources (organic, paid search, direct, test etc.) similarly to how Google Analytics does it. We need this classification to be reflected in HubSpot’s tracking, not just as “direct traffic.”
Attempts Made:
We’ve tried various methods to pass UTM parameters or referrer data into the iframe via JavaScript, but these parameters are not being recognized inside the iframe.
Even though we can see the correct traffic source on the parent page (for example, from referrer or UTM parameters), this data isn’t making it into the iframe, and as a result, all traffic is recorded as “direct traffic” in HubSpot.
The Goal:
We need a reliable way to track and pass traffic source information (organic search, direct traffic, paid ads, social media, etc.) from the parent page to the HubSpot booking form inside the iframe so that HubSpot can properly categorize the traffic source for each booked meeting.
How can we accurately send traffic source data (whether it’s UTM parameters, referrer, or any other identifier) to the iframe and have HubSpot recognize it correctly, rather than defaulting to direct traffic
With the Custom Report Builder you can analyze where the traffic is coming from to your meeting links kindly check this article and understand how to create this report: Analyze meetings
no. i dont think you understand my question. i need to pass thriugh the data (refferer and/or UTM) from the pages to the iframe. everything has the datat source of Direct.
Hi @Asim09,
Thank you for posting to the Community!
I’d like to tag in our Top Contributor that was able to provide the Accepted Solution of this thread to see if they have any insight.
Hi @Gaurav_Aggarwal I hope your having a great day! Do you have any ideas on @Asim09’s question?
Thank you!
Cassie, Community Manager
<!-- Start of Meetings Embed Script for Sweden Team Inbound -->
<div class=“meetings-iframe-container” id=“meetings-iframe-2”></div>
<script type=“text/javascript”>
// Function to build the correct iframe URL with referrer and any UTM parameters
function buildIframeSrc() {
var params = window.location.search; // Fetch URL parameters (e.g., UTM tags)
var referrer = document.referrer; // Get the referrer from the current page
var iframeContainer2 = document.getElementById(‘meetings-iframe-2’); // Find the iframe container
var baseSrc2 = “https://knowmore.sysarb.com/meetings/gustav-jakobsson/sweden-team-inbound”; // Correct base URL
// Build a query string only if parameters or a referrer exist
var query = “”;
if (params !== “?”) {
query = params; // Retain existing parameters
}
// If a referrer exists, include it
if (referrer) {
if (query) {
query += “&referrer=” + encodeURIComponent(referrer);
} else {
query = “?referrer=” + encodeURIComponent(referrer);
}
}
// Set the src attribute of the iframe with the correct URL and parameters
var fullsrc=baseSrc2 + query;
iframeContainer2.innerHTML = ‘<iframe src="’ + fullSrc + ‘" width=“100%” height=“600” frameborder=“0” allowfullscreen></iframe>’;
// Log for debugging
console.log(“Iframe Source:”, fullSrc);
// Send to Data Layer to track in GTM
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘event’: ‘iframeLoaded’,
‘iframeSrc’: fullSrc // Send iframe URL including parameters to the Data Layer
});
}
// Execute the function when the page loads
document.addEventListener(“DOMContentLoaded”, buildIframeSrc);
</script>
<!-- End of Meetings Embed Script for Sweden Team Inbound -->
i still dont have any solution really. Its really bad that they cannot track it. Makes the meeting form totally useless. I cant understand why there are so view people with this issue. Have you asked hubspot support? ive tried but it seems like no one wants to handle it…
Support propose some random ideas (all the time different). We have an idea to use a Calendly meeting scheduler (as they allow you to collect utms at least) and send it to the HubSpot via Zapier.
You can try to get GCLIDs, UTM parameters and put them via API + create custom properties for UTM parameters (our engineering team made it without the HubSpot team). We still see the Direct traffic for paid campaigns, but at least now we can understand if this is paid traffic. You can ask your engineering team.
