From e41133245ca4e6cee390da74ccfe305ccb2ddb25 Mon Sep 17 00:00:00 2001
From: Lane Goolsby <lanegoolsby@yahoo.com>
Date: Fri, 21 Oct 2022 05:59:12 -0700
Subject: [PATCH] refactor(plugin-gtag): update gtag plugin to modern SPA
 recommendations (#8143)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../package.json                              |  1 +
 .../docusaurus-plugin-google-gtag/src/gtag.ts | 11 +++---
 .../src/types.d.ts                            | 12 -------
 .../_dogfooding/_pages tests/analytics.tsx    | 36 +++++++++++++++++++
 website/_dogfooding/_pages tests/index.md     |  1 +
 website/src/types.d.ts                        |  1 +
 yarn.lock                                     |  5 +++
 7 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 website/_dogfooding/_pages tests/analytics.tsx

diff --git a/packages/docusaurus-plugin-google-gtag/package.json b/packages/docusaurus-plugin-google-gtag/package.json
index 96ff897fdb2a..7b52b992f76e 100644
--- a/packages/docusaurus-plugin-google-gtag/package.json
+++ b/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": {
diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts
index 4092fa8f0fcd..dc04ed076b80 100644
--- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts
+++ b/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', {
-          page_title: document.title,
-          page_location: window.location.href,
-          page_path: location.pathname + location.search + location.hash,
-        });
+        window.gtag(
+          'set',
+          'page_path',
+          location.pathname + location.search + location.hash,
+        );
+        window.gtag('event', 'page_view');
       });
     }
   },
diff --git a/packages/docusaurus-plugin-google-gtag/src/types.d.ts b/packages/docusaurus-plugin-google-gtag/src/types.d.ts
index 44689c3dab1a..6f6f99f12793 100644
--- a/packages/docusaurus-plugin-google-gtag/src/types.d.ts
+++ b/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;
-}
diff --git a/website/_dogfooding/_pages tests/analytics.tsx b/website/_dogfooding/_pages tests/analytics.tsx
new file mode 100644
index 000000000000..c3c52ce8212e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/website/_dogfooding/_pages tests/index.md b/website/_dogfooding/_pages tests/index.md
index 7d5713078f83..eff706c0c2ad 100644
--- a/website/_dogfooding/_pages tests/index.md	
+++ b/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)
diff --git a/website/src/types.d.ts b/website/src/types.d.ts
index 2fc5fd967d7c..38cd6c8dab2a 100644
--- a/website/src/types.d.ts
+++ b/website/src/types.d.ts
@@ -6,3 +6,4 @@
  */
 
 /// <reference types="@docusaurus/plugin-ideal-image" />
+/// <reference types="@types/gtag.js" />
diff --git a/yarn.lock b/yarn.lock
index 68c6a526c52c..1073cf98bd86 100644
--- a/yarn.lock
+++ b/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"