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