Event Propagation

Summary
Event propagation allows Arcade to send events (hotspot clicks and CTA clicks) to anything that is listening for them.
You could set up event propagation so that if someone clicks on a specific hotspot or CTA, a message is sent that then triggers an Intercom action, webhook, send information to Segment, Google Analytics, Amplitude, HubSpot, or any other creative idea you come up with.  
This data can be enriched with the data you collect on your site and joined with your other user data, so you can learn more about who is interacting with Arcade and use that knowledge to tailor your communications/relationship with those customers. The possibilities are endless! 
Method
Does event propagation work with all Arcades? 
The Team folder and event propagation are features available in the Growth and Enterprise plans. 
In order for event propagation to work, the Arcade must be in the Team folder. It will not work if the Arcade is stored in the My Arcade folder. 
Do I need a developer's help to implement this?
Implementing event propagation will take a little bit of code (to add an event listener) so you'll need someone who can help with that.
What events are propagated?
Most events that happen inside an Arcade are propagated:
Flow Rendered
Hotspot Clicked
Video Ended
Flow Restarted
Progress Bar Nav Clicked
Step Reached
Overlay Clicked
How are events tracked?
Today events are tracked within an Arcade and sent to Arcade’s analytics service. These events get processed and then surfaced through Arcade Analytics. 
For most customers, this may be enough to track how their Arcades are performing. However, there may be times when a customer may want to track Arcade events with their own analytics stack. 
Approach
Exposing Arcade events to the host embedding an Arcade is actually quite simple. Here’s a simple diagram of how it works:
Iframes hosted on a different origin (i.e., different hostname) are restricted from accessing their parent and vice-versa. However, there is a way to send messages back and forth through a technique called window.postMessage(). This allows Arcade to expose any events that are captured by Arcade to be sent over a “bridge” that the host can subscribe to.
Once the host has subscribed to the messages, the messages can be enriched with other contextual data, such as user info that the host may have. After the event is enriched, it can then be used as additional tracking info that can be sent to Segment, Amplitude, Google Analytics, or the like. In addition, the events can be used for non-tracking purposes as well. For example, if a user clicks through a specific path in an Arcade (or triggers a specific hotspot), you may want to react by enabling or disabling something in your app or website.
The flexibility of this approach enables you to do things that may not have even been thought of yet. Here are some ideas of how you may want to use this:
Close the loop on Arcade interaction to actual conversion (trial, sign up, etc.)
Trigger in-app experiences based on events that happen in an Arcade
Enrich your own tracking with Arcade events
Example
Here’s a simple demo hosted on Codepen that illustrates the technique in action:

Last modified 4mo ago