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 npm package.

Analytics events

During its life on a website, 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.

List of event types

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

EventType	Type of payload	Description
widgetMounted	`widget`	Triggers when the widget is mounted.
storiesFetched	`widget`	Triggers when the stories are fetched.
componentVisible50	`widget`	Triggers when the widget is 50% visible.
componentVisible75	`widget`	Triggers when the widget is 75% visible.
firstClickOnWidget	`widget`	Triggers the first time a story is opened (with a click on a widget) during a visit on a page.
additionalClickOnWidget	`widget`	Triggers every other times a story is opened during a visit on a page.
closed	`widget`	Triggers when a sticky widget is closed.
storyPageVisible	`story`	Triggers when the current story changes page.
storyLastPageVisible	`story`	Triggers when the last page of a story is viewed.
storyClickOnCallToAction	`story`	Triggers when a cta button is clicked in a story.
storyClickOnLinkInPage	`story`	Triggers when a link is clicked inside a shopping interaction.

Widget Event payload

The widget events share the following payload:

Name	Type	Description
eventType	`string`	Event's type. See up for the full list.
eventOwner	`string`	JOIN identifier of the customer.
cpWidgetAlias	`string`	alias of the widget.
cpWidgetType	`string`	widget's type.
cpWidgetVersion	`string`	widget's version.
eventWidgetWorkspaces	`string[]`	legacy information. For newer client, it should always be `["ws_default"]`.
date	`number`	event's time.
eventCategory	`widget`	event was triggered by the widget itself or by one of its stories. Here it will always be `widget`.
cpTitle	`string`	title of website that triggered the event.
eventUrl	`string`	url of website that triggered the event.
cpBaseUrl	`string`	domain name of website that triggered the event.
cpScreenResolution	`string`	browser's resolution.
cpScreenColor	`number`	Colors depth of browser. See native documentation .
cpBrowserLanguage	`string`	browser's language.
cpUserAgent	`string`	browser's user agent. See native documentation
hit	`boolean`	whether analytics were enabled or not.

Story event payload

The story events share the following payload :

Name	Type	Description
eventType	`string`	Event's type. See up for the full list.
eventOwner	`string`	JOIN identifier of the customer.
storyWorkspace	`string`	legacy information. For newer client, it should always be `ws_default`.
storySlug	`string`	always `web-story-slug`.
storyId	`string`	Story's id.
storyPageCount	`number`	number of pages in the Story.
storyPageEngagementCount	`number`	number of pages with a cta button.
cpIndex	`number`	story's index inside the widget.
date	`number`	event's time.
eventCategory	`story`	event was triggered by the widget itself or by one of its stories. Here it will always be `story`.
cpTitle	`string`	always `web-story-title`.
eventUrl	`string`	url of website that triggered the event.
cpScreenResolution	`string`	browser's resolution.
cpScreenColor	`number`	Colors depth of browser. See native documentation .
cpBrowserLanguage	`string`	browser's language.
cpUserAgent	`string`	browser's user agent. See native documentation
cpDocumentReferrer	`string`	It is either `web-list-bubble` or `web-solo-sticky`depending on the widget's type.
hit	`boolean`	whether analytics were enabled or not.

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"
}

Listen to Analytics

📘Analytics page

Default integration

Standalone widget

NPM Package

Analytics events

List of event types

Widget Event payload

Story event payload

Event example

📘
Analytics page