diff --git a/.env.example b/.env.example index a81a1918c..8425ee7d6 100644 --- a/.env.example +++ b/.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= diff --git a/.yarn/cache/@types-react-gtm-module-npm-2.0.1-43a55f51a7-cd57eece80.zip b/.yarn/cache/@types-react-gtm-module-npm-2.0.1-43a55f51a7-cd57eece80.zip new file mode 100644 index 000000000..2b2ce79c2 Binary files /dev/null and b/.yarn/cache/@types-react-gtm-module-npm-2.0.1-43a55f51a7-cd57eece80.zip differ diff --git a/.yarn/cache/react-ga-npm-3.3.1-de5c01fc6e-3026976d02.zip b/.yarn/cache/react-ga-npm-3.3.1-de5c01fc6e-3026976d02.zip new file mode 100644 index 000000000..13ea7dc56 Binary files /dev/null and b/.yarn/cache/react-ga-npm-3.3.1-de5c01fc6e-3026976d02.zip differ diff --git a/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-93b4659f0d.zip b/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-93b4659f0d.zip new file mode 100644 index 000000000..c978f1612 Binary files /dev/null and b/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-93b4659f0d.zip differ diff --git a/app/context/google-provider.tsx b/app/context/google-provider.tsx new file mode 100644 index 000000000..da0947417 --- /dev/null +++ b/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 = ({ 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}; +}; diff --git a/components/prose.tsx b/components/prose.tsx index 5f9f48372..999da9d01 100644 --- a/components/prose.tsx +++ b/components/prose.tsx @@ -14,7 +14,7 @@ const Prose: FunctionComponent = ({ 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', diff --git a/package.json b/package.json index 6cd2c3285..b6f29c413 100644 --- a/package.json +++ b/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" diff --git a/yarn.lock b/yarn.lock index 1821ae29d..4590e3b1d 100644 --- a/yarn.lock +++ b/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"