Track Embedded Flows
How to integrate Google Analytics with your embedded Heyflow
Heyflow avatar
Written by Heyflow
Updated over a week ago

Tracking non-embedded, standard heyflows is super simple: Just type in a Tracking ID (e.g., Google Analytics Tracking ID), publish the flow, and that's all.

For embedded heyflows, it's a bit more complicated. But if you follow the steps explained here, you have your setup ready in no time.

One reason why tracking embedded flows is more complicated is cross-domain tracking, which Google does not like. We always have this issue when your (parent) page, e.g. my-website.com does not equal the origin of the heyflow, e.g. heyflow.id .

The solution is not to rely on the tracking within the heyflow but to push all events from the dataLayer to the parent window and track it there so, in the end, we only have one domain to track.

We have to complete the following steps to set up the tracking for embedded heyflow:

  1. Push DataLayer to parent

  2. Set Google Analytics Tracking ID/Measurement ID

  3. Set up and import Google Tag Manager Container


Step 1: Push DataLayer to parent

This one is easy. Go to the settings of your heyflow and navigate to the Tracking page. Here, enable Push DataLayer to parent and Disabled default Google Tag Manager.

Step 2: Set Google Analytics Tracking ID/Measurement ID

Next, navigate to the Analytics page and insert the Google Analytics Universal Tracking ID and/or the Google Analytics 4 Measurement ID, and click Connect.

At this step, you don't need to activate the Google Tag Manager.

Lastly, Publish your heyflow.

After every change in Analytics, you need to be re-publish your flow.

Step 3: Set up and import Google Tag Manager Container

The best way to track your heyflow with Google Analytics (Universal and 4) is Google Tag Manager. If you're new to Google Tag Manager entirely, you can find a general setup guide here.

Head over to Google Tag Manager and either create a new Container (recommended) or navigate to an existing one. Name is what you like and choose Web as the target platform.

After you click Create, a popup to install Google Tag Manager appears. Follow the steps as described. The code snippet must be inserted into your website in which you embed the heyflow – not into the heyflow itself.

Next, go to Admin and click on Import Container.

Download our base configuration – click the link and save the file to your computer. Then, choose this file as the container file, select Existing as a workspace and select Overwrite – you can also select New and Merge but it's not recommended because you might overwrite your tags or tags might not fire as expected.

Name your workspace what you like, e.g. Heyflow, optionally add a description, and Save. Then at the bottom of the screen, click Confirm to import the container.

Next, click the Submit button at the top right – you might want to preview first but we encountered a bug that would not set the tags and triggers correctly if the container is completely empty. Thus, it's better to Submit and Publish already – and to "sing like no one is listening".

That should be it. If you have already implemented your Google Tag Manager Container into your website, you're good to go 🎉 .


Bonus: Validate your setup

To verify the successful setup, click on Preview in the top right, next to Submit, enter your website URL, and click Connect. You should see the Tag Assistant pop up in the bottom right corner – if not, check if you have correctly inserted the Google Tag Manager script, disabled all adblockers, and accepted all cookies.

Navigate to your embedded heyflow and click around. Depending on your tracking setup within heyflow, you'll see the results back in the Tag Manager Preview. Usually, you'll see both your Google Tag Manager Container (e.g. GTM-ABC123) and your Google Analytics Property (G-ABCDEFGHI). We found this not to be very reliable but it works better with Google Analytics 4 than Google Analytics Universal for some reason.

You should see some events in the left sidebar like heyflow-screen-view and also some tags under Tags Fired, such as Heyflow – GA4 Page View.

Let's check an event in more detail. Click on a heyflow-screen-view event in the left sidebar and click on the Heyflow – GA4 Page View event in the Output.

In the top right corner, switch to Display Variables as Values. If you have set up Google Analytics 4 in your heyflow, the Configuration Tag should have that exact value. For Google Analytics 4, it will also tell you if it's Fired or not. Also, check the validity of the Event Parameters.

If the page Events Parameters or the Configuration tag is incorrect, make sure that you have inserted the correct Measurement ID in your heyflow – and republish your flow.

At this point, the events and page views should also have landed in your Google Analytics. Check your Real-time dashboard.

Amazing job! You've successfully set up Google Tag Manager for your embedded flow.

Did this answer your question?