add GTM

.env.example

@@ -5,6 +5,7 @@ SHOPIFY_REVALIDATION_SECRET=
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=
 SHOPIFY_STORE_DOMAIN=shop.narai.jp
 NEXT_PUBLIC_GTM_ID=
+
 NEXT_PUBLIC_MAILCHIMP_HOST=
 NEXT_PUBLIC_MAILCHIMP_USER_ID=
 NEXT_PUBLIC_MAILCHIMP_LIST_ID=

app/context/google-provider.tsx

@@ -0,0 +1,52 @@
+import { FunctionComponent, useEffect } from 'react';
+
+import { useRouter } from 'next/router';
+import ReactGA from 'react-ga';
+import TagManager from 'react-gtm-module';
+
+type GoogleLayerProps = {
+  isShowing: boolean;
+  /* eslint-disable-next-line no-undef */
+  children: JSX.Element | JSX.Element[] | string;
+};
+
+export function logPageView() {
+  ReactGA.pageview(window.location.pathname);
+}
+
+export function logEvent(action: any, category: any, label: any) {
+  ReactGA.event({ action, category, label });
+}
+
+export const GoogleProvider: FunctionComponent<GoogleLayerProps> = ({ isShowing, children }) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const onRouteChangeComplete = async () => {
+      logPageView();
+    };
+
+    if (isShowing) {
+      if (process.env.NEXT_PUBLIC_GA_UA_ID) {
+        ReactGA.initialize(process.env.NEXT_PUBLIC_GA_UA_ID, {
+          debug: false
+        });
+        //* Record current pageview following initialization
+        onRouteChangeComplete();
+        //* Record a pageview when route changes
+        router.events.on('routeChangeComplete', onRouteChangeComplete);
+      }
+      if (process.env.NEXT_PUBLIC_GTM_ID) {
+        TagManager.initialize({
+          gtmId: process.env.NEXT_PUBLIC_GTM_ID
+        });
+      }
+    }
+    //* Unassign event listener
+    return () => {
+      router.events.off('routeChangeComplete', onRouteChangeComplete);
+    };
+  }, [isShowing, router]);
+
+  return <>{children}</>;
+};

components/prose.tsx

@@ -14,7 +14,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
         'font-multilingual text-[15px] font-extralight text-current',
         'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-current',
         'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
-        'prose-a:text-current/80 prose-a:underline hover:prose-a:text-current',
+        'prose-a:text-white/80 prose-a:underline hover:prose-a:text-current',
         'prose-strong:text-current',
         'prose-td:border-opacity-20 prose-td:py-4 prose-td:font-normal',
         'prose-tr:border-subtle',

package.json

@@ -26,6 +26,7 @@
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@thgh/next-gtm": "^0.1.4",
+    "@types/react-gtm-module": "^2.0.1",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -38,6 +39,8 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "react": "latest",
     "react-dom": "latest",
+    "react-ga": "^3.3.1",
+    "react-gtm-module": "^2.0.11",
     "react-intersection-observer": "^9.5.2",
     "react-player": "^2.12.0",
     "sharp": "^0.32.5"

yarn.lock

@@ -536,6 +536,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-gtm-module@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@types/react-gtm-module@npm:2.0.1"
+  checksum: cd57eece80d80453e79b16c977e13d51dc22c19af69a16ac6ea1eda01ab471f4dbe46ce80ce04ef13a0ecd0082372addec4c2e394978d1ce7fe86dbda4dfb922
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*":
   version: 18.2.17
   resolution: "@types/react@npm:18.2.17"
@@ -1355,6 +1362,7 @@ __metadata:
     "@types/node": 20.4.4
     "@types/react": 18.2.16
     "@types/react-dom": 18.2.7
+    "@types/react-gtm-module": ^2.0.1
     autoprefixer: ^10.4.14
     clsx: ^2.0.0
     date-fns: ^2.30.0
@@ -1376,6 +1384,8 @@ __metadata:
     prettier-plugin-tailwindcss: ^0.4.1
     react: latest
     react-dom: latest
+    react-ga: ^3.3.1
+    react-gtm-module: ^2.0.11
     react-intersection-observer: ^9.5.2
     react-player: ^2.12.0
     sharp: ^0.32.5
@@ -4464,6 +4474,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ga@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "react-ga@npm:3.3.1"
+  peerDependencies:
+    prop-types: ^15.6.0
+    react: ^15.6.2 || ^16.0 || ^17 || ^18
+  checksum: 3026976d0249fbf80e7b5dad7707964198064d7ac460f3397de40524e76dd6c29dead0900f850e2bd3135a86a9b083af8cda9cfa087f195852bf8d2b17c1fcfb
+  languageName: node
+  linkType: hard
+
+"react-gtm-module@npm:^2.0.11":
+  version: 2.0.11
+  resolution: "react-gtm-module@npm:2.0.11"
+  checksum: 93b4659f0d10248f59113a3eb488ea8848712cab2e28b7c45d080b373d6736a96b9855d637c4447819493366bf25185c3f88e6b4107a8f06d8ab2a39f7a725b9
+  languageName: node
+  linkType: hard
+
 "react-intersection-observer@npm:^9.5.2":
   version: 9.5.2
   resolution: "react-intersection-observer@npm:9.5.2"