> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/forward-parent-page-utm-parameters.md).

# Forward Parent Page UTM Parameters to the Consumer App

Forward UTM parameters from the parent page URL to an embedded Consumer App iframe for Google Analytics campaign attribution.

When the Consumer App is embedded into a landing page, Shopify page, or another website page, campaign traffic usually arrives on the parent page first. For example:

```url
https://example.com/skin-analysis?utm_source=newsletter&utm_medium=email&utm_campaign=spring_launch
```

If the embedded app URL does not receive those UTM parameters, Google Analytics may attribute the app session to the embedded iframe URL instead of the original marketing campaign. To keep campaign attribution consistent, you can copy selected UTM parameters from the parent page URL into the Consumer App `data-inject-url` before the iframe integration script loads.

{% hint style="info" %}
This guide does not change the Consumer App configuration or API behavior. It only changes how the host page prepares the iframe URL before loading the integration script.
{% endhint %}

## Supported UTM Parameters

The example below forwards these parameters:

* `utm_source`
* `utm_medium`
* `utm_campaign`
* `utm_term`
* `utm_content`

Only parameters that are present and not empty in the parent page URL are forwarded.

## Merge Behavior

The default iframe URL can already contain fixed query parameters such as `app_id`, `company_id`, and a default `utm_campaign`.

When the parent page URL contains one of the supported UTM parameters, the parent page value overrides the value in `data-inject-url`. This makes the marketing link the source of truth for campaign attribution.

If the parent page does not contain any supported UTM parameters, the original iframe URL is used unchanged.

## Installation

1. Copy the script below.
2. Replace the `baseInjectUrl` value with the `data-inject-url` from your Consumer App integration code.
3. Replace the `integrationScript.src` value with the script URL from your integration code if it is different.
4. Paste the full block into the page where the Consumer App should be embedded.

## Script

```html
<div id="iframe-window"></div>

<script type="text/javascript">
  (function loadSkinConsultantWithParentUtms() {
    var baseInjectUrl =
      "https://saas.haut.ai/b2c_2_0/first-entrance?app_id=app_H88CYcMMrVopTRK9&company_id=665a1ab1-c390-41ae-83f4-d03c364d8d12&utm_campaign=665a1ab1-c390-41ae-83f4-d03c364d8d12-Skin%20Consultant%20App%20with%20UTM%20parameters";

    var injectUrl = baseInjectUrl;

    try {
      var parentParams = new URLSearchParams(window.location.search);
      var utmKeys = [
        "utm_source",
        "utm_medium",
        "utm_campaign",
        "utm_term",
        "utm_content",
      ];

      var url = new URL(baseInjectUrl);

      utmKeys.forEach(function (key) {
        var value = parentParams.get(key);

        if (value) {
          url.searchParams.set(key, value);
        }
      });

      injectUrl = url.toString();
    } catch (e) {
      console.warn("UTM forwarding skipped:", e);
    }

    var integrationScript = document.createElement("script");
    integrationScript.setAttribute("data-integration", "iframe");
    integrationScript.setAttribute("data-inject-url", injectUrl);
    integrationScript.setAttribute("data-container", "div#iframe-window");
    integrationScript.src =
      "https://storage.googleapis.com/fe-scripts/js/saas-integration-b2c_2_0.js";

    document.currentScript.parentNode.insertBefore(
      integrationScript,
      document.currentScript.nextSibling
    );
  })();
</script>
```

## How it works

1. The script reads the query string from the parent page URL.
2. It checks whether any supported UTM parameters are present and not empty.
3. It parses the default Consumer App iframe URL.
4. It writes parent-page UTM values into the iframe URL, overriding matching hardcoded UTM values.
5. It creates the Haut.AI iframe integration script after the final URL has been prepared.
6. The integration script reads the enriched `data-inject-url` and initializes the iframe.

## Important

The UTM forwarding code must run before the Haut.AI iframe integration script initializes. For this reason, the example creates the integration script dynamically only after the final `data-inject-url` has been prepared.

If you use a static integration script tag copied from the SaaS platform, do not place that tag before the UTM forwarding logic. A static script tag without `async` or `defer` can execute immediately when the browser parses it, before the URL has been enriched.

## Notes

* **Google Analytics setup**: Make sure Google Analytics is configured for the Consumer App first. See [Connect Google Analytics to Your Consumer App](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app.md).
* **Tracked events**: To review the app events available in Google Analytics, see [Google Analytics Events Reference](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/google-analytics-events-reference.md).
* **SkinGPT events**: If your app uses SkinGPT-powered experiences, see [Google Analytics Events Reference (SkinGPT)](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/google-analytics-events-reference-skingpt.md).
* **Event forwarding**: This guide only forwards UTM parameters into the iframe URL. If you also forward iframe events to Google Analytics through the parent page, see [Send Consumer App Analytics Events to Third-Party Analytics](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/analytics-event-forwarding-via-postmessage.md).
* **Shopify cart integration**: Shopify cart handling via `postMessage` can stay in a separate script. It does not need to be combined with UTM forwarding.
* **Failure handling**: If URL parsing fails, the original `baseInjectUrl` is still used, so the Consumer App can continue loading.

***

{% hint style="warning" %}
Not a Haut.AI client yet?
{% endhint %}

<a href="https://haut.ai/book-a-demo?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button primary" data-icon="user-vneck">Book a demo</a> <a href="https://haut.ai/product/ai-skin-analysis?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button secondary" data-icon="external-link">Platform overview on haut.ai</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.saas.haut.ai/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/forward-parent-page-utm-parameters.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.