Event Propagation

Summary

Event propagation allows Arcade to send events to the site hosting the Arcade.

You could set up event propagation so that when a viewer interacts with your Arcade, that event is sent to your site or web app so that you can react to that event. There are lots of use cases for how you could use this, but one way is to enrich your own site analytics with Arcade events.

Method

Does event propagation work with all Arcades?

The Team folder and event propagation are features available in the Growth and Enterprise plans.

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 to help with that.

What events are propagated?

Most events that happen inside an Arcade are propagated:

• Flow Rendered: Triggered when an Arcade is first rendered

• Hotspot Clicked: Triggered when a hotspot is clicked

• Video Ended: Triggered after a video step has played through

• Flow Restarted: Triggered when an Arcade is replayed

• Progress Bar Nav Clicked: Triggered when the viewer uses the nav bar on the bottom of the Arcade to navigate to another step inside the Arcade

• Step Reached: Triggered when the viewer is navigated to a new step

• Overlay Clicked: Triggered when the viewer clicks on a button on a chapter overlay

• External Url Clicked: Triggered when the viewer clicks on a URL in a hotspot or callout

• Powered by Arcade Button Clicked: Triggered when the viewer clicks on the watermark button (it's not necessarily the Arcade watermark despite the name, since it can be customized)

• CTA Clicked: A convenience "meta-event" that regroups the 3 above events (Overlay Clicked, External Url Clicked and Powered by Arcade Button 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 Insights.

This may be enough for most customers to track how their Arcades are performing. However, there may be times when a customer may want to track Arcade events with their analytics stack.

Approach

Exposing Arcade events to the host embedding an Arcade is 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 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 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 tracking with Arcade events

Example

Here’s a simple demo hosted on Codepen that illustrates the technique in action: