Integration with Analytics Tools
Arcade can send events that happen inside an Arcade to a variety of analytics providers
This is an early preview for our Growth plan customers
Many of our customers want to attribute events that happen inside their Arcades to business goals they’ve set (e.g., customer or trial conversion, product goals, etc.) This can be done using Arcade’s Event Propagation feature, but it often requires a developer on the team to implement.
With direct integration, Arcade can now send events to the following providers:
- Amplitude
- Google Analytics
- Google Tag Manager
- Intercom
- HubSpot
- Mixpanel
- Segment
If your service isn’t on that list, please let us know at [email protected], and we’ll consider adding it.
This is an early-release feature and might change before the final release as more customers provide their feedback.
This early release does not include any UI for managing the integrations with the providers. Instead, all that’s required is a simple change to your Arcade(s) embed code. Let’s take a look at an existing Arcade embed code:
<div style="position: relative; padding-bottom: calc(63.66666666666667% + 41px); height: 0;">
<iframe src="<https://demo.arcade.software/56HTbP9bxhkpnATUQiBE?embed>" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Joystick"></iframe>
</div>
Notice that the URL in the
<iframe> src tag is https://demo.arcade.software/56HTbP9bxhkpnATUQiBE?embed. To enable Arcade to send events to your analytics provider above, you need to add the specific provider id to the end of the URL as a query parameter. Here’s a list of the query parameters specific to the provider:- Amplitude —
amplitude_api_key - Google Analytics —
measurement_id - Google Tag Manager —
container_id - Intercom —
intercom_app_id - HubSpot —
portal_id - Mixpanel —
mixpanel_token - Segment —
write_key
Visit your provider’s documentation to find the ID specific to your account.
In order to instruct Arcade to send events to your provider, just add the name of the ID (above) with the value of the ID to the embed URL. For example, if you want to send events to Amplitude, add
&litude_api_key=[YOUR_KEY] to the end of the iframe src URL above:<div style="position: relative; padding-bottom: calc(63.66666666666667% + 41px); height: 0;">
<iframe src="<https://demo.arcade.software/56HTbP9bxhkpnATUQiBE?embed&litude_api_key=XXXXXXXXX>" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Joystick"></iframe>
</div>
If you’d like to send events to multiple providers, all you need to do is append the provider ID to the URL. Here’s an example where we send events to Amplitude and Mixpanel:
<div style="position: relative; padding-bottom: calc(63.66666666666667% + 41px); height: 0;">
<iframe src="<https://demo.arcade.software/56HTbP9bxhkpnATUQiBE?embed&litude_api_key=XXXXXXXXX&mixpanel_token=YYYYYYYYYYYY**>" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Joystick"></iframe>
</div>
Most of the providers above have a tool or page where you can test the events coming in:
Intercom’s integration is a bit different than the others. In addition to sending events to Intercom, adding your
intercom_app_id to the embed URL will also add the Intercom Messenger to your Arcade:
Arcade with the Intercom integration turned on
Most tracking scripts use the
identify method to associate the user with the session. Because the Arcade is running inside of an <iframe>, you have to send a message to the <iframe> to let Arcade know that it should attach the user to the events. This is done via a small amount of javascript on the host page:// Make sure to replace the ${arcadeId} with the ID to your Arcade
const iframe = document.querySelector(`iframe[src*=${arcadeId}]`);
iframe?.contentWindow?.postMessage(
{
event: 'identify-user',
user: {
id: '123',
traits: {
name: 'Abby Wilson',
email: '[email protected].com`
},
},
'*'
);
It's best to send the
identify-user message as soon as possible -- before the user starts interacting with the Arcade.If your events aren't being sent, make sure you're Arcade is in your team's space. For other issues, please contact us at [email protected].
Last modified 1mo ago