Listen to Analytics

📘

Analytics page

All analytics events are automatically sent to our servers. You can find various statistics and analysis of your widgets on your Analytics page on Studio.

You can also retrieve them for your own analytics. There are several ways to listen to analytics events depending on the way you integrated your widget.

Default integration

After integrating the widget on your website page, you can listen to JOIN_ANALYTICS global event like this :

document.addEventListener("JOIN_ANALYTICS", function(event) {
	// analytics payload is available in `detail` field of the event.
  console.log(event.detail.cpWidgetAlias)
})

See native documentation for more informations about native event listeners.

See Easy integration without npm (recommended) for more informations.

Standalone widget

When instanciating the standalone widget, you can pass a function that will be called each time an event is triggered. Like this:

function analyticsCallback(payload) {
  // Do something with the payload...
  console.log(payload.cpWidgetAlias)
}
const customPlayer = new JoinModalPlayer('my-widget', { analyticsCallback })

See Standalone Widget for more informations.

NPM Package

When calling renderListBubble, you can pass a function that will be called each time an event is triggered. Like this:

function analyticsCallback(payload) {
  // Do something with the payload...
  console.log(payload.cpWidgetAlias)
}

renderBubbleList(
  "uniqueDivId",
  "teamId",
  "aliasWidget",
  { analyticsCallback },
);

See NPM Package for more informations on how to use it.

Analytics events

During its life on a website (or mobile), a widget can trigger various analytics events. There are events related to the widget itself and events related to the stories inside of it. They track how the users interact with the widget and its content.

Analytics v2

A new Analytics stack has been implemented. Old events have been renamed, with more properties. New events have been added. They are split by categories. Each category has its own properties.

Category : Story

Category : Interaction

Category : Widget

Category : Product

Category : External

Properties

All events have at least the common properties. Each category has its own properties.

Common properties

Story properties

Interaction properties

Widget properties

Product properties

External properties

ℹ️ Event product-add-to-cart has all product properties. See above for the list.

Analytics v1 (Legacy)

❗️

Deprecation notice

v1 events are considered deprecated and will be removed in the future. Don't use them for your new developments.

Check name in V2 column to see how to find old events in new Analytics.

List of event types

Here the list of all available events. There are 2 types of events with different payloads.

Widget Event payload

The widget events share the following payload:

Story event payload

The story events share the following payload :

Event example

Here a widget payload:

{
    "eventOwner": "join-stories",
    "cpWidgetAlias": "inspiration-galerie-audiences",
    "cpWidgetType": "list-bubble",
    "cpWidgetVersion": "4",
    "eventWidgetWorkspaces": [
        "ws_default"
    ],
    "date": 1722852202110,
    "eventCategory": "widget",
    "cpTitle": "My website",
    "eventUrl": "https://example.join-stories.com/my-widget",
    "cpBaseUrl": "https://example.join-stories.com/my-widget",
    "cpScreenResolution": "1512x982",
    "cpScreenColor": 30,
    "cpBrowserLanguage": "en",
    "cpUserAgent": "mozilla/5.0 (macintosh; intel mac os x 10_15_7) applewebkit/537.36 (khtml, like gecko) chrome/127.0.0.0 safari/537.36",
    "hit": true,
    "eventType": "componentVisible50"
}

And a story payload:

{
    "storyPageCount": 20,
    "storyPageEngagementCount": 0,
    "eventOwner": "join-stories",
    "storyId": "7ec2ad55-d37c-42e3-ac4b-3b0d000e1042",
    "storySlug": "web-story-slug",
    "storyWorkspace": "ws_default",
    "date": 1722852299269,
    "eventCategory": "story",
    "cpTitle": "web-story-title",
    "eventUrl": "https://example.join-stories.com/my-widget",
    "cpDocumentReferrer": "web-list-bubble",
    "cpScreenResolution": "1512x982",
    "cpScreenColor": 30,
    "cpBrowserLanguage": "en",
    "cpUserAgent": "mozilla/5.0 (macintosh; intel mac os x 10_15_7) applewebkit/537.36 (khtml, like gecko) chrome/127.0.0.0 safari/537.36",
    "hit": true,
    "cpIndex": 0,
    "eventType": "storyPageVisible"
}