Merge pull request #7 from zenzen-sol/sol/preview

feat: Add GTM
2025-05-19 07:56:59 +00:00 · 2023-09-06 17:35:03 -07:00 · 2023-09-06 17:35:03 -07:00 · 2c51d1880c
commit 2c51d1880c
parent 262a027b63 391ca16f8f
25 changed files with 157 additions and 51 deletions
--- 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=
--- 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
--- a/.yarn/cache/react-ga-npm-3.3.1-de5c01fc6e-3026976d02.zip
+++ b/.yarn/cache/react-ga-npm-3.3.1-de5c01fc6e-3026976d02.zip
--- 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
--- a/app/[locale]/about/about-narai-detail.tsx
+++ b/app/[locale]/about/about-narai-detail.tsx
@ -17,8 +17,8 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
  return (
    <div className="w-full px-6">
      <div className="font-multilingual flex w-full flex-col items-center space-y-px pb-24 text-center font-extralight md:pb-48">
-        <h1 className="text-6xl">{t('about.001.title')}</h1>
-        <h1 className="text-6xl">{t('about.001.subtitle')}</h1>
+        <h1 className="text-5xl leading-tight md:text-6xl">{t('about.001.title')}</h1>
+        <h1 className="text-5xl leading-tight md:text-6xl">{t('about.001.subtitle')}</h1>
      </div>

      <div className="relative mx-auto max-w-screen-2xl">
@ -26,7 +26,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
          src={AboutImage001}
          priority={true}
          alt="A picture of the exterior of the brewery building."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
        />
      </div>
      <div
@ -34,7 +34,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
          'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
        )}
      >
-        <h2 className="text-5xl">{t('about.002.title')}</h2>
+        <h2 className="text-3xl leading-tight md:text-5xl">{t('about.002.title')}</h2>
        <p className="text-base leading-loose">{t('about.002.para001')}</p>
        <p className="text-base leading-loose">{t('about.002.para002')}</p>
      </div>
@ -44,7 +44,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
          src={AboutImage002}
          priority={true}
          alt="A picture of the interior of the brewery building."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
        />
      </div>

@ -53,7 +53,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
          'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
        )}
      >
-        <h2 className="text-5xl">{t('about.003.title')}</h2>
+        <h2 className="text-3xl leading-tight md:text-5xl">{t('about.003.title')}</h2>
        <p className="text-base leading-loose">{t('about.003.para001')}</p>
        <div>
          <div className="relative flex flex-row justify-end pb-6">
@ -76,7 +76,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
            'font-multilingual mx-auto flex w-full max-w-screen-xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
          )}
        >
-          <div className="font-multilingual flex flex-row items-baseline space-x-4">
+          <div className="font-multilingual flex flex-col items-baseline space-y-0 md:flex-row md:space-x-4">
            <h2 className="text-5xl">{t('about.awards.title')}</h2>
            <h3 className="text-xl font-extralight">{t('about.awards.subtitle')}</h3>
          </div>
@ -94,7 +94,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
      >
        <div className="flex flex-col space-y-24">
          <div className="font-multilingual font-extralight">
-            <div className="flex flex-row items-baseline space-x-3">
+            <div className="flex flex-col items-baseline md:flex-row md:space-x-3">
              <h2 className="text-5xl">{t('about.materials.title')}</h2>
              <h2 className="text-4xl">{t('about.materials.subtitle')}</h2>
            </div>
@ -104,11 +104,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
            src={AboutImage003}
            priority={true}
            alt="A picture of the exterior of the brewery building."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
          />

          <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
            <div className="md:w-1/2">
+              <div className="flex flex-row items-baseline space-x-3">
                <h2 className="max-w-title text-3xl leading-normal">
                  {t('about.materials.water.title')}
                </h2>
@ -116,6 +117,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
                  {t('about.materials.water.subtitle')}
                </h2>
              </div>
+            </div>
            <div className="md:w-1/2">
              <p className="text-base leading-relaxed">{t('about.materials.water.body')}</p>
            </div>
@ -127,11 +129,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
            src={AboutImage004}
            priority={true}
            alt="A picture of the rice fields and mountains of Nagano."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
          />

          <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
            <div className="md:w-1/2">
+              <div className="flex flex-row items-baseline space-x-3">
                <h2 className="max-w-title text-3xl leading-normal">
                  {t('about.materials.rice.title')}
                </h2>
@ -139,6 +142,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
                  {t('about.materials.rice.subtitle')}
                </h2>
              </div>
+            </div>
            <div className="md:w-1/2">
              <p className="text-base leading-relaxed">{t('about.materials.rice.body')}</p>
            </div>
@ -150,7 +154,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
            src={AboutImage005}
            priority={true}
            alt="A picture of the interior of the brewery."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
          />

          <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
@ -182,7 +186,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
          src={AboutImage006}
          priority={true}
          alt="A picture of Irie-san."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
        />
      </div>
    </div>
--- a/app/[locale]/analytics.tsx
+++ b/app/[locale]/analytics.tsx
@ -0,0 +1,47 @@
+'use client';
+
+import { GTM_ID, pageview } from 'lib/gtm';
+import { usePathname, useSearchParams } from 'next/navigation';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      pageview(pathname);
+    }
+  }, [pathname, searchParams]);
+
+  if (process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production') {
+    return null;
+  }
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer', '${GTM_ID}');
+  `
+        }}
+      />
+    </>
+  );
+}
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -5,6 +5,7 @@ import { ReactNode, Suspense } from 'react';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
+import Analytics from './analytics';
 import './globals.css';

 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@ -95,6 +96,7 @@ export default async function RootLayout({
      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
        <NextIntlClientProvider locale={params?.locale} messages={messages}>
          <Suspense>
+            <Analytics />
            <main>{children}</main>
          </Suspense>
        </NextIntlClientProvider>
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@ -60,7 +60,7 @@ export default async function HomePage({
      <div className="pt-12 md:pt-48">
        <HomepageProducts lang={locale} />
      </div>
-      <div className="py-48">
+      <div className="py-24 md:py-48">
        <NewsletterSignup />
      </div>
      <div className="relative mx-auto max-w-screen-xl">
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@ -221,7 +221,7 @@ async function RelatedProducts({ id }: { id: string }) {
              className="relative block h-full w-full transition-opacity duration-150 hover:opacity-90"
              href={`/product/${product.handle}`}
            >
-              <div className="relative block aspect-square overflow-hidden">
+              <div className="relative z-10 block aspect-square overflow-hidden">
                <GridTileImage
                  alt={product.title}
                  label={{
--- a/components/cart/add-many-to-cart.tsx
+++ b/components/cart/add-many-to-cart.tsx
@ -41,12 +41,12 @@ export function AddManyToCart({
  return (
    <div className="flex flex-col space-y-2">
      <div className="font-multilingual flex flex-row items-center space-x-2 border border-white/50">
-        <div className="px-3">{t('cart.quantity-label')}</div>
+        <div className="w-[80px] px-3">{t('cart.quantity-label')}</div>
        <input
          value={currentQuantity}
          onChange={(e) => setCurrentQuantity(Number(e.target.value))}
          className={clsx(
-            'w-auto grow bg-transparent px-2 py-3 text-right text-white',
+            'min-w-[200px] grow bg-transparent px-2 py-3 text-right text-white',
            'outline-none focus:border-0 focus:outline-none focus:ring-0',
            'focus-visible:ring-none focus-visible:border-none focus-visible:outline-none',
            'focus-visible:ring-0 focus-visible:ring-offset-0',
--- a/components/cart/inline-add-to-cart.tsx
+++ b/components/cart/inline-add-to-cart.tsx
@ -54,7 +54,7 @@ export function InlineAddToCart({
        });
      }}
      className={clsx(
-        'h-[56px] p-4',
+        'h-[44px] px-4 py-2',
        'relative flex w-full items-center justify-center',
        'border border-white/20 hover:border-white',
        'font-serif text-base tracking-wider text-white',
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@ -63,7 +63,7 @@ export default function CartModal({
  return (
    <>
      <div>
-        <button aria-label="Open cart" onClick={openCart} className="w-20">
+        <button aria-label="Open cart" onClick={openCart}>
          <OpenCart quantity={cart?.totalQuantity} />
        </button>
        <Transition show={isOpen}>
--- a/components/grid/homepage-products.tsx
+++ b/components/grid/homepage-products.tsx
@ -19,7 +19,7 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
      )}
    >
      <Link className="group block w-full" href={`/product/${item.handle}`}>
-        <div className="relative block aspect-tall overflow-hidden ">
+        <span className="relative block aspect-tall overflow-hidden">
          <GridTileImage
            src={image?.url}
            fill
@ -27,15 +27,15 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
            priority={priority}
            alt={item.title}
          />
-        </div>
-        <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
+        </span>
+        <span className="font-multilingual block max-w-sm pb-24 pt-4 md:pb-0">
          <Label
            title={item.title as string}
            amount={item.priceRange.maxVariantPrice.amount}
            currencyCode={item.priceRange.maxVariantPrice.currencyCode}
            size={size?.value}
          />
-          <div className="line-clamp-4 pt-2 font-extralight">
+          <span className="line-clamp-4 pt-2 font-extralight">
            <span>{item?.summary?.value}</span>{' '}
            <span className="ml-2 inline-flex flex-row items-center space-x-1 opacity-50 transition-opacity duration-150 group-hover:opacity-100">
              <span>read more.</span>
@ -43,8 +43,8 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
                <ChevronRightIcon width={16} />
              </span>
            </span>
-          </div>
-        </div>
+          </span>
+        </span>
      </Link>
      <InlineAddToCart variants={item.variants} availableForSale={item.availableForSale} />
    </div>
--- a/components/grid/product-grid.tsx
+++ b/components/grid/product-grid.tsx
@ -11,7 +11,7 @@ function ProductGridItem({ item, priority }: { item: Product; priority?: boolean

  return (
    <div className={clsx('col-span-1 row-span-1 md:col-span-2 md:row-span-1')}>
-      <Link className="w-full bg-black/30" href={`/product/${item.handle}`}>
+      <Link className="block w-full pb-12" href={`/product/${item.handle}`}>
        <div className="relative block aspect-square overflow-hidden">
          <GridTileImage
            src={item.featuredImage.url}
@ -28,7 +28,7 @@ function ProductGridItem({ item, priority }: { item: Product; priority?: boolean
            currencyCode={item.priceRange.maxVariantPrice.currencyCode}
            size={size?.value}
          />
-          <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
+          <div className="line-clamp-4 pt-2 text-sm font-extralight">{item?.summary?.value}</div>
        </div>
      </Link>
    </div>
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -98,7 +98,7 @@ export default async function Footer({
                <CartModal cart={cart} promotedItem={promotedItem} />
                <div className="flex flex-row items-center space-x-6">
                  <Link
-                    href="https://www.instagram.com/suginomoribrewery/"
+                    href="https://www.instagram.com/narai.sake/"
                    className="group"
                    rel="noopener noreferrer"
                    target="_blank"
@ -106,7 +106,7 @@ export default async function Footer({
                    <InstagramIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
                  </Link>
                  <Link
-                    href="https://www.facebook.com/suginomoribrewery"
+                    href="https://www.facebook.com/narai.sake"
                    className="group"
                    rel="noopener noreferrer"
                    target="_blank"
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -76,7 +76,7 @@ export default function Navbar({
          <Link href="/" className="transition-opacity duration-150 hover:opacity-90">
            <LogoNamemark
              className={clsx(
-                inView && !compact ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
+                inView && !compact ? 'min-w-[180px] md:w-[600px]' : 'min-w-[180px] md:w-[260px]',
                'fill-current transition-all duration-150',
                compact ? 'pt-4 md:pt-6' : 'pt-4 md:pt-12'
              )}
--- a/components/layout/newsletter-footer.tsx
+++ b/components/layout/newsletter-footer.tsx
@ -7,7 +7,7 @@ export default function NewsletterSignup() {

  return (
    <div className="max-w-xl">
-      <div className="flex flex-row items-baseline justify-between space-x-6 pb-2">
+      <div className="flex flex-col items-start space-x-0 space-y-0 pb-2 md:flex-row md:items-baseline md:justify-between md:space-x-6">
        <h3 className="grow font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
        <div className="font-multilingual">{t('footer.newsletter.promo')}</div>
      </div>
@ -23,7 +23,7 @@ export default function NewsletterSignup() {
        <input
          type="email"
          name="EMAIL"
-          id="EMAIL"
+          id="email-address"
          autoComplete="email"
          required
          className={clsx(
--- a/components/layout/newsletter-signup.tsx
+++ b/components/layout/newsletter-signup.tsx
@ -6,7 +6,7 @@ export default function NewsletterSignup() {
  const t = useTranslations('Index');

  return (
-    <div className="mx-auto max-w-xl space-y-4">
+    <div className="mx-auto max-w-xl space-y-4 px-4">
      <h3 className="font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
      <div className="font-multilingual text-sm font-extralight">{t('newsletter.description')}</div>
      <form
--- a/components/layout/sagyobar-preview.tsx
+++ b/components/layout/sagyobar-preview.tsx
@ -15,7 +15,7 @@ export default function SagyobarPreview() {
      <div className="font-multilingual flex flex-col space-y-6 text-base font-extralight md:w-1/2">
        <div>{t('home.previews.bar.body')}</div>
        <Link
-          href="/sagyobar"
+          href="/bar"
          className="max-w-sm border border-white px-6 py-3 text-center text-base transition-colors duration-150 hover:border-white/50"
        >
          {t('home.previews.bar.button')}
--- a/components/layout/shoplist.tsx
+++ b/components/layout/shoplist.tsx
@ -7,11 +7,11 @@ export default function Shoplist() {
  const t = useTranslations('Index');
  return (
    <div className="font-multilingual mx-auto max-w-screen-xl space-y-4 px-6" id="shops">
-      <div className="flex w-full flex-row items-baseline space-x-12 pb-6">
-        <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
+      <div className="flex w-full flex-row items-baseline space-x-12 pb-2 md:pb-6">
+        <h2 className="font-serif text-2xl tracking-wider md:text-5xl">shop list</h2>
        <h3 className="text-2xl font-extralight tracking-wider">{t('shops.subtitle')}</h3>
      </div>
-      <div className="grid w-full grid-cols-2 gap-px">
+      <div className="grid w-full grid-cols-1 gap-px md:grid-cols-2">
        <Link
          href="shop-list/#hokkaido"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
--- a/components/prose.tsx
+++ b/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',
--- a/lib/gtm.ts
+++ b/lib/gtm.ts
@ -0,0 +1,22 @@
+// lib/gtm.ts
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;
+
+export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== 'undefined') {
+    window.dataLayer.push({
+      event: 'pageview',
+      page: url
+    });
+  } else {
+    console.debug({
+      event: 'pageview',
+      page: url
+    });
+  }
+};
--- a/messages/ja.json
+++ b/messages/ja.json
@ -128,7 +128,7 @@
      "002": {
        "title": "長野 奈良井宿で醸す",
        "para001": "私たちは、標高約940mの日本でも有数の空に近い自然豊かな環境で醸造しています。冬は氷点下20度近くまで冷え込み、山の水は凍ります。寒い冬を越えると、新緑に囲まれ、空気が清らかで過ごしやすい季節が続きます。秋には紅葉で山が鮮やかに染まります。日本らしい四季の移ろいを感じられる立地です。",
-        "para002": "この自然豊かな魅力を贅沢に味で表現したい… 通常の酒蔵では大きなチームが分業制で大量生産ができるよう、大型タンク（3,000L〜8,000Lなど）を使用しますが、私たちの蔵では杜氏1人でも丁寧な手作業で、効率的に全工程に関わり、小ロット生産ながらも高品質なsake造りができるよう900Lと1,800Lの小型タンクを採用しています。また、多くの酒蔵が冬季のみ醸造をする中、その時々に感じる季節の移ろいや、自然の美しさを味に反映させるために、年中生産可能な四季醸造方式を取り入れました。"
+        "para002": "この自然豊かな魅力を贅沢に味で表現したい。通常の酒蔵では大きなチームが分業制で大量生産ができるよう、大型タンク（3,000L〜8,000Lなど）を使用しますが、私たちの蔵では杜氏1人でも丁寧な手作業で、効率的に全工程に関わり、小ロット生産ながらも高品質なsake造りができるよう900Lと1,800Lの小型タンクを採用しています。また、多くの酒蔵が冬季のみ醸造をする中、その時々に感じる季節の移ろいや、自然の美しさを味に反映させるために、年間を通して生産可能な四季醸造方式を取り入れました。"
      },
      "003": {
        "title": "多彩な黒 – 醸造の理念",
--- 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"
--- 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"