Use Next's GoogleAnalytics component (#287)

* Use Next's GoogleAnalytics component * Unpin @next/third-parties range for easier updates * Upgrade @next/google-analytics from canary to latest
reactiflux · Feb 2, 2024 · 9386c34 · 9386c34
1 parent 7998d8c
commit 9386c34
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@netlify/functions": "^2.4.1",
+    "@next/third-parties": "^14.1.0",
     "@types/node": "20.6.0",
     "@types/react": "17.0.37",
     "@types/styled-components": "^5.1.15",

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,36 +1,16 @@
+import { GoogleAnalytics } from "@next/third-parties/google";
 import "@styles/globals.css";
 import type { AppProps } from "next/app";
-import Script from "next/script";
 
 import "minireset.css";
 import "typeface-poppins";
 import "typeface-work-sans";
 import "typeface-space-mono";
 
-const GA_TRACKING_ID = "G-HYLJ4BYC6Z";
-
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      {/* Global Site Tag (gtag.js) - Google Analytics */}
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-      />
-      <Script
-        id="gtag-init"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag() {
-              dataLayer.push(arguments);
-            }
-            gtag("js", new Date());
-            gtag("config", "${GA_TRACKING_ID}");
-          `,
-        }}
-      />
+      <GoogleAnalytics gaId="G-HYLJ4BYC6Z" />
       <Component {...pageProps} />
     </>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -1056,6 +1056,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz#d28ea15a72cdcf96201c60a43e9630cd7fda168f"
   integrity sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==
 
+"@next/third-parties@^14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.1.0.tgz#d9604fff8880e05d3804d2cf7ab42eb5430aec69"
+  integrity sha512-f55SdvQ1WWxi4mb5QqtYQh5wRzbm1XaeP7s39DPn4ks3re+n9VlFccbMxBRHqkE62zAyIKmvkUB2cByT/gugGA==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -10216,6 +10223,11 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+[email protected]:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 thread-stream@^2.0.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/thread-stream/-/thread-stream-2.4.1.tgz"