✨ log grapher views to google analytics

[sophiamersmann]

Resolves #3834

Summary

A view event is logged to Google Analytics when Grapher is rendered.

Details

• A view event is logged if Grapher is scrolled into view so that we only log an event when a Grapher chart has actually been looked at
• Grapher only logs a view event if it has a slug
  • Explorers used to pass their slug to Grapher for no good reason -> has been removed
  • Mdims used to pass a DUMMY slug to Graphers as a workaround -> has been removed

Logged events are of the following shape:

{
    "event": "owid.grapher_view",
    "grapherPath": "/grapher/share-of-population-in-extreme-poverty"
}

or, for multi-dim data pages,

{
    "event": "owid.grapher_view",
    "grapherPath": "/grapher/mdd-demo-energy",
    "grapherView": { "source": "all", "metric": "total" }
}

• Bobbie said it didn't matter if grapherView is stringified or not, so I went with the richer format
• The keys in grapherView (e.g. source, metric) are always complete and sorted

If I understand correctly, Google Tag Manager always includes the current page, so there is no need to explicitly pass that for embedded Graphers.

Share menu refactor

• The reason explorers and mdims pass a slug into Grapher is that a missing slug disables the share menu
• This didn't make much sense (unless I'm missing something), so I refactored the share menu such that the share menu button is hidden when the menu wouldn't have any items (which depends on the canonical and edit URLs)

Testing

I tested this code by console logging when an event is fired, but I haven't checked to see if these events actually end up in GA. (I asked Bobbie how to do this and will check later today)

• Grapher/data page: http://staging-site-log-grapher-views/grapher/life-expectancy
  • Should log one view event
• Article: http://staging-site-log-grapher-views/how-has-income-inequality-within-countries-evolved-over-the-past-century
  • Should log a view event when Grapher is scrolled into view, but not earlier
• Multi-dim data page: http://staging-site-log-grapher-views/admin/grapher/mdd-demo-energy
  • Should log an event on page load
  • Should log an event on changing the view
• Homepage: http://staging-site-log-grapher-views
  • Should log an event when scrolling to the first key indicator
  • Should log an event when opening another key indicator, but not earlier
• Topic page: http://staging-site-log-grapher-views/poverty
  • Should log an event when clicking on a key insight with a chart, but not earlier
  • Should log an event on scrolling to the All charts section, but not earlier
  • Should log an event on clicking the "Next" button in the All charts block, but not earlier
  • Should not log an event for the embedded explorer
• Explorer page: http://staging-site-log-grapher-views/explorers/air-pollution
  • Should not log an event

Caveats

• In the All charts block, an event is logged when going back to a chart that has already been viewed
• In the Key indicator block, no event is logged when opening a key indicator that has been opened before

Not sure what's the right thing to do here, but I guess it doesn't matter that much and both are fine?

[sophiamersmann]

• 🔨 (grapher) turn related questions into an object #4108
• 🔨 remove default layer from chart configs #4103
• ✨ (line chart) set y-axis min default to 0 #4080
• 🐛 (explorer) merge configs correctly #4091
• ✨ log explorer views to google analytics #4098
• ✨ log grapher views to google analytics #4076 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-log-grapher-views

• Site-screenshots: https://github.com/owid/site-screenshots/compare/log-grapher-views
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/log-grapher-views

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-10-22 14:22:11 UTC
Execution time: 1.23 seconds

[danyx23]

This looks very nice! I wonder if it would make sense to also do something like this for Explorers right away? There the whole navigation is even more interesting

[sophiamersmann]

yes, would be good to do now, also because this stuff is now fresh in my mind. I created an issue and added it to my cycle – I might have some time towards the end of the week

[sophiamersmann]

Merge activity

• Nov 1, 11:16 AM EDT: A user started a stack merge that includes this pull request via Graphite.
• Nov 1, 11:17 AM EDT: Graphite rebased this pull request as part of a merge.
• Nov 1, 11:18 AM EDT: A user merged this pull request with Graphite.