Collecting analytics

Collecting analytics on interaction with Flourish graphics

Note: This feature is an enterprise-level bolt-on and not available to all customers

If you want to understand more about how your customers interact with your embedded Flourish graphics, you can integrate data from the embeds into your own analytics system.

You can learn more about analytics and use cases in our help doc.

To collect the analytics, you needs to create the window.Flourish object.

The window.Flourish object

If you want more control over how Flourish graphics are embedded into your page, you can set a global Flourish variable before loading the script:

<script>
window.Flourish = {};
</script>
<script src="https://public.flourish.studio/resources/embed.js"></script>

In addition to configuring how graphics are loaded, the window.Flourish object and the embed script will add functions to the object to allow you to control and communicate with the Flourish graphics.

After the embed script is loaded, you will then have access to the following functions:

Flourish.addAnalyticsListener(callback)

Adds a listener for analytics events from Flourish embeds. callback should be a function which receives an analytics event object.

Flourish.removeAnalyticsListener(callback)

Removes an analytics event listener. callback should be a callback function which was previously passed to addAnalyticsListener.

Analytics events

The analytics event object passed to the analytics event callbacks will contain different information, depending on where the event originated.

When the event originates from an embedded visualization, the event object will contain the following properties:

Property name	Type	Description
action	String	The action which the user took. One of "mouse_enter", "mouse_leave", "click", or "key_down".
template_id	Number	The unique ID of the template. You can use this to identify the type of the visualization, for example whether it is a Bar Chart Race, or a 3D Map. The template can be found from its ID by visiting https://app.flourish.studio/†{template_id}.
visualisation_id	Number	The unique ID of the visualization. You can use this to identify which visualization the user interacted with. The visualization ID is found in the embed code of the visualization, and in the URL of the visualization when you are logged in to the app (e.g. https://app.flourish.studio/visualisation/{visualisation_id}).

When the event originates from an embedded story, the event object will contain the following properties:

Property name	Type	Description
action	String	The action which the user took. One of "mouse_enter", "mouse_leave", "click", "key_down", "play", "pause", or "slide_change".
template_id	Number	The unique ID of the current slide's template. You can use this to identify the type of the visualization, for example whether it is a Bar Chart Race, or a 3D Map. The template can be found from its ID by visiting https://app.flourish.studio/†{template_id}.
visualisation_id	Number	The unique ID of the current slide's visualization. You can use this to identify which visualization within the story the user interacted with. The visualization ID is found in the URL of that visualization when you are logged in to the app (e.g. https://app.flourish.studio/visualisation/{visualisation_id}).
story_id	Number	The unique ID of the story. You can use this to identify which story the user interacted with. The story ID is found in the embed code of the story, and in the URL of the story when you are logged in to the app (e.g. https://app.flourish.studio/story/{story_id}).
slide_index	Number	The index of the current slide in the story. The first slide has a slide_index of 1. You can use this to determine how far through the story the user is.
slide_count	Number	The total number of slides in the story. You can use this in combination with slide_index to determine how much of the story the user has viewed.