Cross-frame events

Summary

Event propagation enables Guideflow to transmit events to the website hosting the Guideflow. By configuring event propagation, interactions within your Guideflow can be communicated to your site or web application, allowing you to respond accordingly. This feature has numerous applications, but one example is enhancing your website's analytics with information from Guideflow events.

Setting up event propagation requires a bit of coding, specifically adding an event listener so that you will need assistance from someone with coding expertise.

Events within a Guideflow are monitored and transmitted to Guideflow's analytics service. These events are then processed and made accessible via Guideflow Analytics. For many clients, this might suffice to evaluate the performance of their Guideflows. Nevertheless, there could be instances where a client wishes to integrate Guideflow event tracking with their analytics system.

To listen to Guideflow events, you need add the following code:

window.addEventListener('message', (event) => {
      if (event.origin === 'https://app.guideflow.com') {
            // Event data.
           console.log(event.data);
      }
});

---

These are events that are propagated to the website and their corresponding parameters.

Start Session - event parameters:

    {
      eventName: string;
      totalSteps: number;
      flowTitle: string;
      customLinkId: number | null;
      data?: object;
      source: string;
      sessionHash: string;
      publicPageId: number | null;
      flowId: number;
      parentSessionHash: string | null;
      screenWidth: number;
      screenHeight: number;
      visitorInstanceHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }

Start Step - View:

{
      eventName: string;
      slideId: number;
      slideTitle: string;
      slideOrderId: number;
      sessionHash: string;
      flowId: number;
      publicPageItemId: number;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
 }

End Step - View:

{
      eventName: string;
      slideId: number;
      timeSpent: number;
      slideOrderId: number;
      slideTitle: string;
      sessionHash: string;
      flowId: number;
      totalSpentTime: number;
      publicPageItemId: number;
      completionRate: number;
      childSessionHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    };

Guideflow Completed

{
      eventName: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
      sessionHash: string;
      flowId: number;
      parentSessionHash: string | null;
    }

End Session

{
      eventName: string;
      visitedSteps: number;
      totalSteps: number;
      sessionHash: string;
      flowId: number;
      parentSessionHash: string | null;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
      data?: {
        flowTitle: string;
        variables: Record<string, string>;
        os: {
        name: string | undefined;
        version: string | undefined;
        };
        percentOfCompletion: number;
        totalSpentTime: number;
      };
    }

External Link Clicked

{
      eventName: string;
      url: string;
      location: string;
      flowId: number;
      sessionHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }

Checklist item clicked

{
      eventName: string;
      itemTitle: string;
      itemId: number;
      itemUUID: string;
      itemType: string;
      itemOrderId: number;
      itemExternalLink: string | null;
      itemTargetSlideId: number | null;
      itemTargetFlowId: number | null;
      itemTargetSlideTitle: string | null;
      itemTargetSlideOrderId: number | null;
      sessionHash: string;
      flowId: number;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }

Example of sending events to Google Analytics