Cross-Frame Events

Send demo analytic events cross origin

You can now send Storylane demo analytics cross-frame to the hosting website. If you are embedding Storylane demo on your webpage, then real-time analytics events can now be subscribed on your webpage. Some use cases can be:

• Launching chat window based on user action in the demo
• Displaying demo-booking calendar based on user action
• Combine Storylane analytics with additional user info and send to your analytics stack

Implementation

When Storylane demo is embedded on a webpage then each user interaction will trigger an event that will be sent through window.postMessage(). Below is an example of an event payload sent from Storylane demo iframe

//Storylane sends these postMessage events from iframe to the parent window
window.parent.postMessage(
{
  message: 'storylane-demo-event',
  payload: {
    event: 'step_view';
    demo: {
      id: string;
      url: string;
    };
    step: {
      id: string;
      index: number; // starts with 1  
    };
    flow: {
      id: string;
      name: string;
    };
   }
 },
'*'
)

You will subscribe to the above events like below on your webpage so it can be processed

window.addEventListener('message', (event) => {
  if (event.data.message === 'storylane-demo-event') {
    //do something here based on event type
    // 1. send event to GA, Amplitude, mixpanel etc
    // 2. open chat window
    // 3. open meeting calendar ..or anything else
  }
})

Below are different event.data.payloadfor different analytic events sent from the Storylane Demo

// sent when demo loads first time 
{
  event: 'demo_open';
  demo: {
    id: string;
    url: string;
    name: string;
  };
}

// sent when a guided step (hotspot, walkthrough, or modal) is displayed
{
  event: 'step_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when demo is finished and user went through all steps/flows
{
  event: 'demo_finished';
  demo: {
    id: string;
    url: string;
    name: string;
  };
}

// sent when a lead is captured through form or URL params
{
  event: 'lead_identify';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  lead: {
    email: string;
    [key: string]: string; // e.g. first_name, last_name, company, etc...
  }
}

// sent when the user clicks on the CTA in button to the external URL
{
  event: 'open_external_url';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
  target: {
    url: string;
    target: '_blank' | '_self';
  }
}

// sent when an item in the checklist is clicked
{
  event: 'checklist_item_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  checklist_item: {
    id: string;
  }
}

// sent when flow started by user
// You need to have multiple flows and a checklist configured for this
{
  event: 'flow_start';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the last step in flow was viewed 
{
  event: 'flow_end';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent on every page change
{
  event: 'page_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  page: {
    id: string;
    name: string;
  }
}

// sent when the user clicks a primary button in the guide
{
  event: 'primary_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the user clicks a secondary button in the guide
{
  event: 'secondary_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the user clicks a convert CTA button in the demo
{
  event: 'convert_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

Example of sending events to GA