Solution Overview

The solution includes 2 parts:

Pushing data from the iframe to the embedding website

Handling the data, e.g. via GTM

Pushing data from the journey / iframe

Every time a user navigates through the Journey, a postMessage event will be dispatched. The type definitions would look like:

MessageEventPageView = {
   type: 'EPILOT/USER_EVENT/PAGE_VIEW'
   journeyId: string
   payload: {
      journeyName: string,
      path: string,
      userValues: any
   }
}

MessageEventProgress = {
   type: 'EPILOT/USER_EVENT/PROGRESS'
   journeyId: string
   payload: {
      journeyName: string,
      path: string
      eventName: "InitiateProductSelection" | "JourneySubmit"
      eventData: any
   }
}

Please note that the payload might display different data based on some payment plans for example User Values tracking is a paid service and displayed only for users with this paid plan.
Also please note that in some cases like tracking User Values, for example, some of the private data will be encrypted for example Personal Infos and Banking info. 

Handling the data

In order to handle the data, the website needs to listen for the dispatched event. This can be achieved with the following JavaScript code snippet:

window.addEventListener('message', function(event){
   if(event && event.data && event.data.type && event.data.type.includes('EPILOT/USER_EVENT')) {
      var type = event.data.type;
      var journeyId = event.data.journeyId;
      var payload = event.data.payload;

      // CUSTOM LOGIC: Implement the required logic here, such as 3rd Party Integrations
   }
})

Example Google Analytics 4 Integration via Google Tag Manager

Overview:

Setup Journey Event Listeners to handle events coming from the iframe

Setup Custom Variables to store event values

Setup Trigger which fires on the events, and triggers the GA4 Tag

Setup GA4 Tag to push data to Google Analytics

Setup Journey Event Listeners to handle events coming from the iframe

In GTM, create a new Custom HTML Tag and insert the following snippet:

<script>
   window.dataLayer = window.dataLayer || [];
   // sets up event listener for events coming from an iframe.
   // then checks if the event should be handled by checking its type
   // lastly takes the data from the event, and adds it to the GTM dataLayer, so it can be reacted to
   window.addEventListener('message', function(event){
      if(event && event.data && event.data.type && event.data.type.includes('EPILOT/USER_EVENT')) {
         var type = event.data.type; // string 
         var journeyId = event.data.journeyId;
         var payload = event.data.payload;
         window.dataLayer.push({
            'event': 'journeyPageview',
            'journeyAction': type,
            'journeyPagePath': payload.path,
            'journeyStepEvent': payload.eventName,
            'journeyEventData': payload.eventData,
            'journeyUserValues': payload.userValues,
         });
      }
   })
</script>

Then, set up the trigger to be fired on either all pages or only on the one the journey is embedded in. It's also advisable to set a tag firing priority, so this tag can fire first.

The complete Tag would look like:

Setup Custom Variables to store event values

In GTM, go to Variables, and create the below user-defined variables (data-layer variables). These can be read by any Tag setup in GTM.

journeyAction

journeyPagePath

journeyStepEvent

journeyEventData

• journeyUserValues

An example can be seen below:

Setup Trigger which fires on the events, and triggers the GA4 Tag

In GTM, go to Triggers and create a trigger with the following values as seen below.

Event name: journeyPageview

When: journeyActions contains EPILOT/USER_EVENT/PAGE_VIEW

Setup Google Analytics Tag to push data to Google Analytics

To complete the setup, in GTM, go to Tags and create a GA4 event tag as defined below.

It’s important to add a couple of parameters, as the Journey is not a classic website with page views.

Event name: page_view

Event parameter: The page_path containing a slash with the {{journeyPagePath}}

Additionally, it is advisable to set up a tag firing priority lower than the previous Event Listener setup.

Example Facebook Pixel Integration via Google Tag Manager

Overview:

Setup Facebook Pixel

Setup Journey Event Listeners to handle events coming from the iframe and pushing data to Facebook

Setup Facebook Pixel

This step might be optional depending on if the Pixel code has been injected to the website already or not. If not, in GTM, click on Tags. Then setup a new Custom HTML tag and enter the following code snippet:

Important: Change the parts of “YOUR-PIXEL-ID” with the actual ID.

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR-PIXEL-ID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR-PIXEL-ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Setup Journey Event Listeners to handle events coming from the iframe and pushing data to Facebook

In GTM, click on Tags and create another Custom HTML Tag with the below content:

<script>
window.addEventListener('message', function(event){
   if(event && event.data && event.data.type && event.data.type.includes('EPILOT/USER_EVENT')) {
      var type = event.data.type; // string 
      var journeyId = event.data.journeyId;
      var payload = event.data.payload;
     
      if(type === 'EPILOT/USER_EVENT/PAGE_VIEW') {
         fbq('track', 'ViewContent', { content_name: payload.path });
      }

      // Specific step events
      if (payload.eventName === 'InitiateProductSelection') {
         fbq('track', 'InitiateProductSelection', undefined)
      }

      if (payload.eventName === 'JourneySubmit') {
         fbq('track', 'JourneySubmit', undefined)
      }
   }
})
</script>

Set the “All Pages” trigger for this tag. This will handle the events coming from the Journey, and pushes the data to Facebook.