> 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/analytics-event-forwarding-via-postmessage.md). # Send Consumer App Analytics Events to Third-Party Analytics Send Consumer App analytics events from an embedded iframe to third-party analytics tools, with Google Analytics as an example. Consumer App analytics events can be sent to the analytics tools your team already uses. This helps you connect Consumer App behavior with the rest of your website analytics, build funnels, measure conversion steps, and keep reporting in one place. [Connect Google Analytics to Your Consumer App](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app.md) in Haut.AI SaaS. If you want to send the same Consumer App events to another analytics service, your website can receive the events from the embedded app and forward them to your selected tool. For example, you can adapt this setup for Meta Pixel, Segment, or another client-side analytics destination supported by your website. {% hint style="info" %} This setup requires basic web development skills or help from a developer who can edit the page where the Consumer App is embedded. {% endhint %} {% hint style="warning" %} Analytics event forwarding is available as part of the paid analytics add-on. To unlock this feature, please contact your Account Manager. {% endhint %} ## Prerequisites * The Consumer App must be embedded on the same page. * You must be able to edit the HTML or JavaScript of the parent page where the Consumer App is embedded. * Your website must already handle the consent, privacy, and analytics-loading logic required by your selected analytics tool. * For the Google Analytics example below, the Google Analytics tag (`gtag.js`) must already be initialized on the page before this script runs. ## How it works The Consumer App sends analytics events to the parent page using the browser's `window.postMessage()` API. The parent website can listen for those messages, validate that they came from Haut.AI, and then forward the event name and parameters to an analytics tool. The example below listens for events from the Consumer App iframe and sends them to Google Analytics using the `gtag()` function. You can replace the `gtag()` call with the equivalent event call for another analytics service. ## Installation 1. Copy the example script below. 2. Paste it inside the `` or `` tag of the parent HTML page where the Consumer App is embedded. 3. Include it only once per page. 4. Adjust the analytics call if you want to send events to a tool other than Google Analytics. ## Example: forward events to Google Analytics ```javascript ``` ## What the script does 1. The script registers a `message` event listener on the browser window. 2. When the Consumer App iframe sends a message via `postMessage()`, the listener receives it. 3. The script verifies that the message originates from `https://saas.haut.ai`. 4. If the message type is `haut_ga_event` and Google Analytics (`gtag`) is available, the script forwards the event name and parameters to Google Analytics. 5. The event name and its parameters are also logged to the browser console for debugging. ## Important If you use this setup to send events to Google Analytics, make sure to delete your Google Analytics measurement ID from the advanced settings to avoid duplicating events: [Connect Google Analytics to Your Consumer App](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app.md#connecting-google-analytics). ## Notes * **Consent and privacy requirements**: Events received from the Consumer App via `postMessage()` should be forwarded to Google Analytics or any other analytics tool only in accordance with the privacy, consent, cookie, and electronic communications regulations that apply to your website and users. Depending on your jurisdiction and setup, this may include GDPR, ePrivacy rules, CCPA/CPRA, or other local, regional, or industry-specific requirements. The host website is responsible for applying the appropriate consent and compliance logic before sending events to analytics services. * **No duplicate scripts**: Include this script only once on the page, even if multiple Consumer App widgets are embedded. * **Placement**: The script can be placed anywhere inside the `` or `` tag. * **Analytics library must be loaded first**: The example script calls `window.gtag()`, which is defined by the Google Analytics tag. If `gtag` is not available, events are ignored. If you use another analytics tool, make sure its client-side library is available before forwarding events. * **Security**: The `event.origin` check ensures that only messages from `saas.haut.ai` are processed. Messages from other origins are discarded. ## Related guides * [Google Analytics Events Reference](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/google-analytics-events-reference.md) * [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) * [Forward Parent Page UTM Parameters to the Consumer App](/haut.ai/haut.ai-features/consumer-apps/connect-google-analytics-to-your-consumer-app/forward-parent-page-utm-parameters.md) *** {% hint style="warning" %} Not a Haut.AI client yet? {% endhint %} Book a demo Platform overview on haut.ai --- # 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/analytics-event-forwarding-via-postmessage.md?ask=&goal= ``` `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.