Properly use consent mode

Tibowl · Tibowl · commit 1f9f6a14d70c · 2022-03-06T23:17:19.000+01:00
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,13 +1,12 @@
 import type { AppProps } from "next/app"
 import Head from "next/head"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import CookieConsent, { getCookieConsentValue } from "react-cookie-consent"
 import "tailwindcss/tailwind.css"
 import Footer from "../components/Footer"
 import NavBar from "../components/NavBar"
 import "../public/global.css"
 import * as gtag from "../utils/gtag"
-import Script from "next/script"
 
 export default function MyApp({ Component, pageProps, router }: AppProps) {
   const [consented, setConsented] = useState(null as boolean | undefined | null)
@@ -23,27 +22,25 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
   }, [])
 
   useEffect(() => {
-    if (!consented)
-      return
+    if (consented)
+      gtag.allowCookies()
+  }, [consented])
 
+  useEffect(() => {
     const handleRouteChange = (url: string) => {
       gtag.pageview(url)
     }
     router.events.on("routeChangeComplete", handleRouteChange)
     return () => {
       router.events.off("routeChangeComplete", handleRouteChange)
     }
-  }, [router.events, consented])
+  }, [router.events])
 
   return <div className="bg-slate-50 dark:bg-slate-700 min-h-screen flex flex-col items-center justify-between text-slate-900 dark:text-slate-100">
     <Head>
       <title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
       <link rel="icon" href="/favicon.ico" />
       <meta httpEquiv="content-language" content="en-us"></meta>
-
-      {consented && <Script async
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
-      />}
     </Head>
 
     <div className="w-full">
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -12,13 +12,19 @@ export default class MyDocument extends Document {
               __html: `
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${GA_TRACKING_ID}', {
+            gtag("consent", "default", {
+                "ad_storage": "denied",
+                "analytics_storage": "denied"
+            });
+            gtag('set', 'anonymizeIp', true);
+            gtag("js", new Date());
+            gtag("config", "${GA_TRACKING_ID}", {
               page_path: window.location.pathname,
             });
           `,
             }}
           />
+          <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
         </Head>
         <body>
           <Main />
diff --git a/utils/gtag.js b/utils/gtag.js
@@ -1,17 +1,24 @@
 export const GA_TRACKING_ID = "G-0SJQ3GQCGE"
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-export const pageview = (url) => {
-  window.gtag("config", GA_TRACKING_ID, {
-    page_path: url,
-  })
+export function pageview(url) {
+    window.gtag("config", GA_TRACKING_ID, {
+        page_path: url,
+    })
 }
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
-export const event = ({ action, category, label, value }) => {
-  window.gtag("event", action, {
-    event_category: category,
-    event_label: label,
-    value: value,
-  })
+export function event({ action, category, label, value }) {
+    window.gtag("event", action, {
+        event_category: category,
+        event_label: label,
+        value: value,
+    })
+}
+
+export function allowCookies() {
+    window.gtag("consent", "update", {
+        "ad_storage": "granted",
+        "analytics_storage": "granted"
+    })
 }
