From 29035eec1a9943922e9090b1f2cb6eb3577a4785 Mon Sep 17 00:00:00 2001
From: Matthias Rohmer <mrohmer@google.com>
Date: Mon, 27 May 2024 18:07:17 +0200
Subject: [PATCH] feat: add google analytics to pptr.dev

---
 website/docusaurus.config.js | 13 +++++++++
 website/package-lock.json    | 20 ++++++++++++++
 website/package.json         |  1 +
 website/src/theme/Root.js    | 53 ++++++++++++++++++++++++++++++++++++
 4 files changed, 87 insertions(+)
 create mode 100644 website/src/theme/Root.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 057e2289fca..cd160cefab2 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -48,6 +48,10 @@ const config = {
     locales: ['en'],
   },
   scripts: [
+    {
+      src: 'https://www.googletagmanager.com/gtag/js?id=G-J15CTWBVHX',
+      async: true,
+    },
     {
       src: '/fix-location.js',
       async: false,
@@ -356,6 +360,15 @@ const config = {
               },
             ],
           },
+          {
+            title: 'Other',
+            items: [
+              {
+                label: 'Privacy policy',
+                href: 'https://policies.google.com/technologies/cookies',
+              },
+            ],
+          },
         ],
         copyright: `Copyright © ${new Date().getFullYear()} Google, Inc.`,
       },
diff --git a/website/package-lock.json b/website/package-lock.json
index 6b07cf92de1..080ce793724 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -19,6 +19,7 @@
         "clsx": "2.1.1",
         "prism-react-renderer": "2.3.1",
         "react": "18.3.1",
+        "react-cookie-consent": "9.0.0",
         "react-dom": "18.3.1",
         "semver": "7.6.2"
       },
@@ -9323,6 +9324,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12684,6 +12690,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-cookie-consent": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-cookie-consent/-/react-cookie-consent-9.0.0.tgz",
+      "integrity": "sha512-Blyj+m+Zz7SFHYqT18p16EANgnSg2sIyU6Yp3vk83AnOnSW7qnehPkUe4+8+qxztJrNmCH5GP+VHsWzAKVOoZA==",
+      "dependencies": {
+        "js-cookie": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/website/package.json b/website/package.json
index 54fc5a4142f..89045580934 100644
--- a/website/package.json
+++ b/website/package.json
@@ -26,6 +26,7 @@
     "clsx": "2.1.1",
     "prism-react-renderer": "2.3.1",
     "react": "18.3.1",
+    "react-cookie-consent": "9.0.0",
     "react-dom": "18.3.1",
     "semver": "7.6.2"
   },
diff --git a/website/src/theme/Root.js b/website/src/theme/Root.js
new file mode 100644
index 00000000000..e5cebc95433
--- /dev/null
+++ b/website/src/theme/Root.js
@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2024 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, {useEffect} from 'react';
+import CookieConsent, {getCookieConsentValue} from 'react-cookie-consent';
+
+function enableGoogleAnalytics() {
+  const hasConsent = getCookieConsentValue();
+  if (!hasConsent) {
+    return;
+  }
+
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', 'G-J15CTWBVHX');
+}
+
+export default function Root({children}) {
+  useEffect(enableGoogleAnalytics, []);
+
+  return (
+    <>
+      {children}
+      <CookieConsent
+        location="bottom"
+        buttonText="Okay, got it!"
+        disableButtonStyles={true}
+        buttonWrapperClasses="padding--sm"
+        buttonClasses="button button--primary button--outline"
+        contentStyle={{
+          fontSize: 'inherit',
+        }}
+        style={{
+          color: 'var(--ifm-color-primary-contrast-foreground)',
+          background: 'var(--ifm-color-primary-contrast-background)',
+        }}
+        onAccept={enableGoogleAnalytics}
+      >
+        pptr.dev, Puppeteer's documentation site, uses cookies from Google to
+        deliver and enhance the quality of its services and to analyze traffic.{' '}
+        <a href="https://policies.google.com/technologies/cookies">
+          Learn more.
+        </a>
+      </CookieConsent>
+    </>
+  );
+}