Scenario:
A parent page has an embedded page with a form or other interaction(s) that would be useful to capture the UTM values in conjunction with those interactions.
The Issue:
A child (embedded) page does not, by default, communicate with the parent page in regards to passing information back and forth. Therefore, UTM values are not passed from the parent page to the child page.
Example:
For example, a user lands on the parent page -- https://datatribute.webflow.io/?utm_campaign=hashnode-utm -- and say there's an imaginary embedded page with a form submission on this parent page. The UTM campaign 'hashnode-utm' will not be passed to the form interactions.
This is especially problematic when the form is curated from a marketing platform like Pardot. Pardot can read UTM's directly and again, by default those UTMs from the parent child are not appropriately passed to the child page/form; withholding pertinent information from Pardot's platform.
The Solution:
To pass UTMs to an embedded (child) page, we need to implement a very simple Custom HTML tag in GTM that fires on an 'All Pages' trigger:
<script type="text/javascript">
var iframe = document.getElementById('replace_with_value_of_iframe_id');
iframe.src = iframe.src + window.location.search;
</script>
Get the element ID of your embedded page by inspecting the iframe on the parent page and search for something akin to
iframe id =the value of this field is to be replaced in the above HTML script.What this does is instead of passing the default URL of the parent page, it passes the entire URL from the parent page, including any extra parameters (UTMs) to the child page.
The iframe.src is essentially the child page's URL.