Platform: analytics for Flourish embeds

[StudioZut]

Flourish provides tools to add Analytics tracking to embeds. They render as iframes, so we haven't been gathering any data.

It's a simple js include above the embed and then another after:

https://developers.flourish.studio/embedding/analytics/

https://developers.flourish.studio/embedding/analytics-examples/

Goal: modify the media embed tool in ckeditor to provide a "Flourish" specific option. When used, the necessary snippets would be added (wrapped around the embed).

Dev tasks

• Note that these snippets of code are added as Media items of type "Embed" https://www.wri.org/admin/content/media-grid?type=embed but they're really just reusable html/javascript inserted at a specific point on the page.
• Review the documentation above and the answers below to see how we can best globally add analytics to Flourish embeds (as seen on pages like https://www.wri.org/insights/earth-gets-hotter-cool-cities-infrastructure-solutions

[StudioZut]

This is a test article with the JS added for the first Flourish embed: https://test-wriflagship.pantheonsite.io/insights/earth-gets-hotter-cool-cities-infrastructure-solutions -- it works, our Analytics team (LauraLee) can see the interactions.

For multiple embeds: haven't tested yet to see if each embed snippet needs to be wrapped individually or if all embeds on the page can be wrapped by the same open+close js.

[StudioZut]

Flourish responded to our questions with these (sort of clear?) answers:

Do we need to wrap each visualization with the window.flourish object and analytics listener, or can we just make sure the window.flourish object is at the top of our page’s code and the analytics listener at the bottom?
Correct, you just need the window.flourish object and events listener within the top of your page's code, in a global instance, this should work well! For example, the base set-up you have within your CMS on how pages are structured, you could include these bits of code within that. They don't need to be wrapped in every visualisation/story you create.

We will probably look into a way to automatically add this code to pages that include Flourish visualizations. In that case, could they be added to one script tag that we’d apply to all relevant pages, or is the order critical?
That sounds like the best solution! It would definitely seem a bit too much to have to add them to all the relevant pages. Customers that have previously set up their analytics have just put it in a global file that every new page users which works well!

[mariacha]

This is ready on Develop. Pages like the home page with no Flourish embeds should not show a value in window.Flourish:
https://develop-wriflagship.pantheonsite.io/

But pages with Flourish embeds like https://develop-wriflagship.pantheonsite.io/insights/earth-gets-hotter-cool-cities-infrastructure-solutions should:

Theoretically that means Flourish Analytics is being used, but can you confirm within Flourish @StudioZut?

[mariacha]

I missed the fact that flourish embeds can be put right into the body, so adding a backlog ticket for that and closing this one.