✨ log grapher views to google analytics (#4076)

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 - [x] Should log one view event - Article: http://staging-site-log-grapher-views/how-has-income-inequality-within-countries-evolved-over-the-past-century - [x] 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 - [x] Should log an event on page load - [x] Should log an event on changing the view - Homepage: http://staging-site-log-grapher-views - [x] Should log an event when scrolling to the first key indicator - [x] Should log an event when opening another key indicator, but not earlier - Topic page: http://staging-site-log-grapher-views/poverty - [x] Should log an event when clicking on a key insight with a chart, but not earlier - [x] Should log an event on scrolling to the All charts section, but not earlier - [x] Should log an event on clicking the "Next" button in the All charts block, but not earlier - [x] Should not log an event for the embedded explorer - Explorer page: http://staging-site-log-grapher-views/explorers/air-pollution - [x] 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?
owid · Nov 1, 2024 · c2d1713 · c2d1713
1 parent fc61042
commit c2d1713
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 72 deletions.
diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx
@@ -473,7 +473,6 @@ export class Explorer
         if (mapTargetTime) {
             grapher.map.time = mapTargetTime
         }
-        grapher.slug = this.explorerProgram.slug
         if (!grapher.id) grapher.id = 0
     }
 
@@ -548,6 +547,7 @@ export class Explorer
         grapher.reset()
         this.updateGrapherFromExplorerCommon()
         grapher.updateFromObject(config)
+        grapher.slug = undefined
         grapher.downloadData()
     }
 

diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -203,7 +203,9 @@ export class ActionButtons extends React.Component<{
     }
 
     @computed private get hasShareButton(): boolean {
-        return !this.manager.hideShareButton
+        return (
+            !this.manager.hideShareButton && ShareMenu.shouldShow(this.manager)
+        )
     }
 
     @computed private get hasFullScreenButton(): boolean {

diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
@@ -56,8 +56,3 @@ $zindex-ControlsFooter: 2;
         }
     }
 }
-
-.ShareMenu.disabled a {
-    pointer-events: none;
-    opacity: 0.3;
-}
diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
@@ -21,7 +21,7 @@ export interface ShareMenuManager {
 
 interface ShareMenuProps {
     manager: ShareMenuManager
-    onDismiss: () => void
+    onDismiss?: () => void
     right?: number
 }
 
@@ -91,6 +91,11 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
         }
     }
 
+    static shouldShow(manager: ShareMenuManager): boolean {
+        const test = new ShareMenu({ manager })
+        return test.showShareMenu
+    }
+
     @computed get manager(): ShareMenuManager {
         return this.props.manager
     }
@@ -99,16 +104,16 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
         return this.manager.currentTitle ?? ""
     }
 
-    @computed get isDisabled(): boolean {
-        return !this.manager.slug
+    @computed get showShareMenu(): boolean {
+        return !!this.canonicalUrl || !!this.manager.editUrl
     }
 
     @computed get canonicalUrl(): string | undefined {
         return this.manager.canonicalUrl
     }
 
     @action.bound dismiss(): void {
-        this.props.onDismiss()
+        this.props.onDismiss?.()
     }
 
     @action.bound onClickSomewhere(): void {
@@ -153,35 +158,31 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
         }
     }
 
-    @computed get twitterHref(): string {
-        let href =
-            "https://twitter.com/intent/tweet/?text=" +
-            encodeURIComponent(this.title)
-        if (this.canonicalUrl)
-            href += "&url=" + encodeURIComponent(this.canonicalUrl)
-        return href
+    @computed get twitterHref(): string | undefined {
+        if (!this.canonicalUrl) return undefined
+        const queryParams = new URLSearchParams({
+            text: this.title,
+            url: this.canonicalUrl,
+        })
+        return `https://twitter.com/intent/tweet/?${queryParams}`
     }
 
-    @computed get facebookHref(): string {
-        let href =
-            "https://www.facebook.com/dialog/share?app_id=1149943818390250&display=page"
-        if (this.canonicalUrl)
-            href += "&href=" + encodeURIComponent(this.canonicalUrl)
-        return href
+    @computed get facebookHref(): string | undefined {
+        if (!this.canonicalUrl) return undefined
+        const queryParams = new URLSearchParams({
+            app_id: "1149943818390250",
+            display: "page",
+            href: this.canonicalUrl,
+        })
+        return `https://www.facebook.com/dialog/share?${queryParams}`
     }
 
     @computed get canUseShareApi(): boolean {
         return canUseShareApi(this.manager)
     }
 
     render(): React.ReactElement {
-        const {
-            twitterHref,
-            facebookHref,
-            isDisabled,
-            canUseShareApi,
-            manager,
-        } = this
+        const { twitterHref, facebookHref, canUseShareApi, manager } = this
         const { editUrl } = manager
 
         const width = 200
@@ -193,46 +194,52 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
 
         return (
             <div
-                className={"ShareMenu" + (isDisabled ? " disabled" : "")}
+                className="ShareMenu"
                 onClick={action(() => (this.dismissable = false))}
                 style={style}
             >
                 <h2>Share</h2>
-                <a
-                    target="_blank"
-                    title="Tweet a link"
-                    data-track-note="chart_share_twitter"
-                    href={twitterHref}
-                    rel="noopener"
-                >
-                    <span className="icon">
-                        <FontAwesomeIcon icon={faXTwitter} />
-                    </span>{" "}
-                    X/Twitter
-                </a>
-                <a
-                    target="_blank"
-                    title="Share on Facebook"
-                    data-track-note="chart_share_facebook"
-                    href={facebookHref}
-                    rel="noopener"
-                >
-                    <span className="icon">
-                        <FontAwesomeIcon icon={faFacebook} />
-                    </span>{" "}
-                    Facebook
-                </a>
-                <a
-                    className="embed"
-                    title="Embed this visualization in another HTML document"
-                    data-track-note="chart_share_embed"
-                    onClick={this.onEmbed}
-                >
-                    <span className="icon">
-                        <FontAwesomeIcon icon={faCode} />
-                    </span>{" "}
-                    Embed
-                </a>
+                {twitterHref && (
+                    <a
+                        target="_blank"
+                        title="Tweet a link"
+                        data-track-note="chart_share_twitter"
+                        href={twitterHref}
+                        rel="noopener"
+                    >
+                        <span className="icon">
+                            <FontAwesomeIcon icon={faXTwitter} />
+                        </span>{" "}
+                        X/Twitter
+                    </a>
+                )}
+                {facebookHref && (
+                    <a
+                        target="_blank"
+                        title="Share on Facebook"
+                        data-track-note="chart_share_facebook"
+                        href={facebookHref}
+                        rel="noopener"
+                    >
+                        <span className="icon">
+                            <FontAwesomeIcon icon={faFacebook} />
+                        </span>{" "}
+                        Facebook
+                    </a>
+                )}
+                {this.canonicalUrl && (
+                    <a
+                        className="embed"
+                        title="Embed this visualization in another HTML document"
+                        data-track-note="chart_share_embed"
+                        onClick={this.onEmbed}
+                    >
+                        <span className="icon">
+                            <FontAwesomeIcon icon={faCode} />
+                        </span>{" "}
+                        Embed
+                    </a>
+                )}
                 {canUseShareApi && (
                     <a
                         title="Share this visualization with an app on your device"
@@ -245,7 +252,7 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
                         Share via&hellip;
                     </a>
                 )}
-                {this.state.canWriteToClipboard && (
+                {this.state.canWriteToClipboard && this.canonicalUrl && (
                     <a
                         title="Copy link to clipboard"
                         data-track-note="chart_share_copylink"

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -943,7 +943,8 @@ export class Grapher
             devtools: {
                 track: "Grapher",
                 properties: [
-                    ["slug", this.slug],
+                    // might be missing for charts within explorers or mdims
+                    ["slug", this.slug ?? "missing-slug"],
                     ["chartType", this.type],
                     ["tab", this.tab],
                 ],
@@ -2342,6 +2343,7 @@ export class Grapher
         return this.base.current || undefined
     }
 
+    private hasLoggedGAViewEvent = false
     @observable private hasBeenVisible = false
     @observable private uncaughtError?: Error
 
@@ -2829,6 +2831,12 @@ export class Grapher
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
                         this.hasBeenVisible = true
+
+                        if (this.slug && !this.hasLoggedGAViewEvent) {
+                            this.analytics.logGrapherView(this.slug)
+                            this.hasLoggedGAViewEvent = true
+                        }
+
                         observer.disconnect()
                     }
                 })

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts b/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
@@ -12,6 +12,7 @@ export enum EventCategory {
     CountryProfileSearch = "owid.country_profile_search",
     Filter = "owid.filter",
     GlobalEntitySelectorUsage = "owid.global_entity_selector_usage",
+    GrapherView = "owid.grapher_view",
     GrapherClick = "owid.grapher_click",
     GrapherError = "owid.grapher_error",
     ExplorerCountrySelector = "owid.explorer_country_selector",
@@ -48,6 +49,7 @@ interface GAEvent {
     eventContext?: string
     eventTarget?: string
     grapherPath?: string
+    grapherView?: string // specifies a view in a multi-dim data page
 }
 
 // taken from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/de66435d18fbdb2684947d16b5cd3a77f876324c/types/gtag.js/index.d.ts#L151-L156
@@ -71,6 +73,14 @@ export class GrapherAnalytics {
     private version: string // Ideally the Git hash commit
     private isDev: boolean
 
+    logGrapherView(slug: string, view?: Record<string, string>): void {
+        this.logToGA({
+            event: EventCategory.GrapherView,
+            grapherPath: `/grapher/${slug}`,
+            grapherView: view ? JSON.stringify(view) : undefined,
+        })
+    }
+
     logGrapherViewError(error: Error): void {
         this.logToGA({
             event: EventCategory.GrapherError,

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     Grapher,
+    GrapherAnalytics,
     GrapherProgrammaticInterface,
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
@@ -194,6 +195,8 @@ const useVarDatapageData = (
     }
 }
 
+const analytics = new GrapherAnalytics()
+
 export const MultiDimDataPageContent = ({
     // _datapageData,
     configObj,
@@ -207,6 +210,8 @@ export const MultiDimDataPageContent = ({
 }: MultiDimDataPageProps) => {
     const grapherFigureRef = useRef<HTMLDivElement>(null)
 
+    const slug = window?.location.pathname.split("/").pop()
+
     const config = useMemo(
         () => MultiDimDataPageConfig.fromObject(configObj),
         [configObj]
@@ -262,6 +267,10 @@ export const MultiDimDataPageContent = ({
         setWindowQueryStr(queryStr ?? "")
     }, [queryStr])
 
+    useEffect(() => {
+        if (slug) analytics.logGrapherView(slug, currentSettings)
+    }, [slug, currentSettings])
+
     const grapherConfigComputed = useMemo(() => {
         const baseConfig: GrapherProgrammaticInterface = {
             bounds,
@@ -273,12 +282,11 @@ export const MultiDimDataPageContent = ({
             ...varGrapherConfig,
             ...baseConfig,
             dataApiUrl: DATA_API_URL,
-            // TODO: The way manager and slug are set here are just workarounds to make the edit button in the
-            // share menu work. They should be removed before we publish MDims!
+            // TODO: The way manager is set here is just a workaround to make the edit button in the
+            // share menu work. This should be removed before we publish MDims!
             manager: {
                 canonicalUrl,
             },
-            slug: "DUMMY",
         } as GrapherProgrammaticInterface
     }, [varGrapherConfig, grapherConfigIsReady, bounds, canonicalUrl])