Add and expand analytics

Tracking subscriptions only on the click of the submit button is not accurate, because the user might click the button also with invalid/empty input.
owid · Jul 24, 2024 · a2f9d9d · a2f9d9d
1 parent bd93754
commit a2f9d9d
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 16 deletions.
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts b/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
@@ -22,6 +22,7 @@ export enum EventCategory {
     SiteSearchClick = "owid.site_search_click",
     SiteSearchFilterClick = "owid.site_search_filter_click",
     SiteInstantSearchClick = "owid.site_instantsearch_click",
+    SiteFormSubmit = "owid.site_form_submit",
     DetailOnDemand = "owid.detail_on_demand",
 }
 
@@ -126,6 +127,14 @@ export class GrapherAnalytics {
         })
     }
 
+    logSiteFormSubmit(action: string, label?: string): void {
+        this.logToGA({
+            event: EventCategory.SiteFormSubmit,
+            eventAction: action,
+            eventTarget: label,
+        })
+    }
+
     logKeyboardShortcut(shortcut: string, combo: string): void {
         this.logToGA({
             event: EventCategory.KeyboardShortcut,

diff --git a/site/DataInsightsNewsletterBanner.tsx b/site/DataInsightsNewsletterBanner.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import { useState, useEffect } from "react"
 import Cookies from "js-cookie"
 import cx from "classnames"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
 import DataInsightsNewsletter from "./gdocs/components/DataInsightsNewsletter.js"
 
 const COOKIE_NAME = "is_data_insights_newsletter_banner_hidden"
@@ -28,6 +29,7 @@ export default function DataInsightsNewsletterBanner() {
             className={cx("data-insights-newsletter-banner", {
                 "data-insights-newsletter-banner--visible": isVisible,
             })}
+            context={NewsletterSubscriptionContext.FloatingDataInsights}
             onClose={handleOnClose}
         />
     )

diff --git a/site/NewsletterSubscription.tsx b/site/NewsletterSubscription.tsx
@@ -3,18 +3,16 @@ import { faTimes, faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
 import { TextInput } from "@ourworldindata/components"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
 
 const analytics = new SiteAnalytics()
 
-export enum NewsletterSubscriptionContext {
-    Homepage = "homepage",
-    Floating = "floating",
-}
-
 export const NewsletterSubscription = ({
     context,
 }: {
-    context?: NewsletterSubscriptionContext
+    context?:
+        | NewsletterSubscriptionContext.Homepage
+        | NewsletterSubscriptionContext.Floating
 }) => {
     const [isOpen, setIsOpen] = useState(false)
 
@@ -92,6 +90,12 @@ export const NewsletterSubscriptionForm = ({
             id="mc-embedded-subscribe-form"
             name="mc-embedded-subscribe-form"
             target="_blank"
+            onSubmit={() =>
+                analytics.logSiteFormSubmit(
+                    "newsletter-subscribe",
+                    `Subscribe [${context ?? "other-contexts"}]`
+                )
+            }
         >
             <span className="NewsletterSubscriptionForm__header">
                 Receive our latest work by email.

diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
@@ -6,10 +6,8 @@ import {
     faXmark,
     faEnvelopeOpenText,
 } from "@fortawesome/free-solid-svg-icons"
-import {
-    NewsletterSubscriptionContext,
-    NewsletterSubscriptionForm,
-} from "./NewsletterSubscription.js"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
+import { NewsletterSubscriptionForm } from "./NewsletterSubscription.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SiteNavigationTopics } from "./SiteNavigationTopics.js"
 import { SiteLogos } from "./SiteLogos.js"

diff --git a/site/SiteTools.tsx b/site/SiteTools.tsx
@@ -2,10 +2,10 @@ import React from "react"
 import ReactDOM from "react-dom"
 import { FeedbackPrompt } from "./Feedback.js"
 import { ScrollDirection, useScrollDirection } from "./hooks.js"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
 import {
     NewsletterSubscription,
     NewsletterSubscriptionForm,
-    NewsletterSubscriptionContext,
 } from "./NewsletterSubscription.js"
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 // import { faHandshake } from "@fortawesome/free-solid-svg-icons"

diff --git a/site/gdocs/components/DataInsightsNewsletter.tsx b/site/gdocs/components/DataInsightsNewsletter.tsx
@@ -3,12 +3,20 @@ import cx from "classnames"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Button, TextInput } from "@ourworldindata/components"
+import { SiteAnalytics } from "../../SiteAnalytics.js"
+import { NewsletterSubscriptionContext } from "../../newsletter.js"
+
+const analytics = new SiteAnalytics()
 
 export default function DataInsightsNewsletter({
     className,
+    context,
     onClose,
 }: {
     className?: string
+    context:
+        | NewsletterSubscriptionContext.HomepageDataInsights
+        | NewsletterSubscriptionContext.FloatingDataInsights
     onClose?: () => void
 }) {
     return (
@@ -48,6 +56,12 @@ export default function DataInsightsNewsletter({
                         action="https://ourworldindata.us8.list-manage.com/subscribe/post?u=18058af086319ba6afad752ec&id=2e166c1fc1"
                         method="post"
                         target="_blank"
+                        onSubmit={() =>
+                            analytics.logSiteFormSubmit(
+                                "newsletter-subscribe",
+                                `Subscribe [${context}]`
+                            )
+                        }
                     >
                         <TextInput
                             className="data-insights-newsletter__email-input"
@@ -62,6 +76,12 @@ export default function DataInsightsNewsletter({
                             theme="solid-vermillion"
                             text="Subscribe"
                             icon={null}
+                            onClick={() =>
+                                analytics.logSiteClick(
+                                    "newsletter-subscribe",
+                                    `Subscribe [${context}]`
+                                )
+                            }
                         />
                     </form>
                     <p className="data-insights-newsletter__note note-1-medium">

diff --git a/site/gdocs/components/LatestDataInsightsBlock.tsx b/site/gdocs/components/LatestDataInsightsBlock.tsx
@@ -3,6 +3,7 @@ import cx from "classnames"
 
 import { AttachmentsContext } from "../OwidGdoc.js"
 import { Button } from "@ourworldindata/components"
+import { NewsletterSubscriptionContext } from "../../newsletter.js"
 import LatestDataInsights from "./LatestDataInsights.js"
 import DataInsightsNewsletter from "./DataInsightsNewsletter.js"
 
@@ -33,7 +34,9 @@ export default function LatestDataInsightsBlock({
                 className="span-cols-12 col-start-2"
                 latestDataInsights={latestDataInsights}
             />
-            <DataInsightsNewsletter />
+            <DataInsightsNewsletter
+                context={NewsletterSubscriptionContext.HomepageDataInsights}
+            />
         </section>
     )
 }
diff --git a/site/gdocs/pages/Homepage.tsx b/site/gdocs/pages/Homepage.tsx
@@ -7,10 +7,8 @@ import {
     faThreads,
 } from "@fortawesome/free-brands-svg-icons"
 import React from "react"
-import {
-    NewsletterSubscriptionContext,
-    NewsletterSubscriptionForm,
-} from "../../NewsletterSubscription.js"
+import { NewsletterSubscriptionContext } from "../../newsletter.js"
+import { NewsletterSubscriptionForm } from "../../NewsletterSubscription.js"
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import {
     CategoryWithEntries,

diff --git a/site/newsletter.ts b/site/newsletter.ts
@@ -0,0 +1,6 @@
+export enum NewsletterSubscriptionContext {
+    Homepage = "homepage",
+    Floating = "floating",
+    HomepageDataInsights = "homepageDataInsights",
+    FloatingDataInsights = "floatingDataInsights",
+}