refactor(plugin-gtag): update gtag plugin to modern SPA recommendations (#8143)

Co-authored-by: Lane Goolsby <lanegoolsby@rocketmortgage.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-plugin-google-gtag/package.json

@@ -21,6 +21,7 @@
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/types": "^3.0.0-alpha.0",
     "@docusaurus/utils-validation": "^3.0.0-alpha.0",
+    "@types/gtag.js": "^0.0.12",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {

packages/docusaurus-plugin-google-gtag/src/gtag.ts

@@ -23,11 +23,12 @@ const clientModule: ClientModule = {
       setTimeout(() => {
         // Always refer to the variable on window in case it gets overridden
         // elsewhere.
-        window.gtag('event', 'page_view', {
+        window.gtag(
-          page_title: document.title,
+          'set',
-          page_location: window.location.href,
+          'page_path',
-          page_path: location.pathname + location.search + location.hash,
+          location.pathname + location.search + location.hash,
-        });
+        );
+        window.gtag('event', 'page_view');
       });
     }
   },

packages/docusaurus-plugin-google-gtag/src/types.d.ts

@@ -6,15 +6,3 @@
  */
 
 /// <reference types="@docusaurus/module-type-aliases" />
-
-interface Window {
-  gtag: (
-    command: string,
-    fields: string,
-    params: {
-      page_title?: string;
-      page_location?: string;
-      page_path?: string;
-    },
-  ) => void;
-}

website/_dogfooding/_pages tests/analytics.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Layout from '@theme/Layout';
+
+// See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
+export default function Analytics(): JSX.Element {
+  return (
+    <Layout>
+      <h1>Test Analytics</h1>
+      <div>
+        <button
+          type="button"
+          onClick={() => {
+            window.gtag('event', 'docusaurus-test-event', {
+              event_category: 'docusaurus-test-event-category"',
+              event_label: 'docusaurus-test-event-label',
+            });
+
+            const FALSE = false; // I don't want gtag to run with bad params
+            if (FALSE) {
+              // @ts-expect-error: gtag usage is type safe, failure expected
+              window.gtag('this-does-not-exist');
+            }
+          }}>
+          Submit custom gtag event!
+        </button>
+      </div>
+    </Layout>
+  );
+}

website/_dogfooding/_pages tests/index.md

@@ -31,3 +31,4 @@ import Readme from "../README.md"
 - [Tabs tests](/tests/pages/tabs-tests)
 - [z-index tests](/tests/pages/z-index-tests)
 - [Head metadata tests](/tests/pages/head-metadata)
+- [Analytics](/tests/pages/analytics)

website/src/types.d.ts

@@ -6,3 +6,4 @@
  */
 
 /// <reference types="@docusaurus/plugin-ideal-image" />
+/// <reference types="@types/gtag.js" />

yarn.lock

@@ -3529,6 +3529,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/gtag.js@^0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.12.tgz#095122edca896689bdfcdd73b057e23064d23572"
+  integrity sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==
+
 "@types/hast@^2.0.0":
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"