feat: add google analytics to pptr.dev

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.`,
       },

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",

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"
   },

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>
+    </>
+  );
+}