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/[locale]/about/about-narai-detail.tsx b/app/[locale]/about/about-narai-detail.tsx
index 098d19bc6..bdf9d56d8 100644
--- 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,17 +104,19 @@ 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">
-              <h2 className="max-w-title text-3xl leading-normal">
-                {t('about.materials.water.title')}
-              </h2>
-              <h2 className="max-w-title text-3xl leading-normal">
-                {t('about.materials.water.subtitle')}
-              </h2>
+              <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>
+                <h2 className="max-w-title text-3xl leading-normal">
+                  {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>
@@ -127,17 +129,19 @@ 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">
-              <h2 className="max-w-title text-3xl leading-normal">
-                {t('about.materials.rice.title')}
-              </h2>
-              <h2 className="max-w-title text-3xl leading-normal">
-                {t('about.materials.rice.subtitle')}
-              </h2>
+              <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>
+                <h2 className="max-w-title text-3xl leading-normal">
+                  {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>
@@ -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>
diff --git a/app/[locale]/analytics.tsx b/app/[locale]/analytics.tsx
new file mode 100644
index 000000000..5bf3619dd
--- /dev/null
+++ 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}');
+  `
+        }}
+      />
+    </>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 7bee6c352..13e6a7067 100644
--- 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>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index bca541295..68e1736fb 100644
--- 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">
diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx
index b34f4ccea..760ecd6c7 100644
--- 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={{
diff --git a/components/cart/add-many-to-cart.tsx b/components/cart/add-many-to-cart.tsx
index 6b375904f..3693bf081 100644
--- 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',
diff --git a/components/cart/inline-add-to-cart.tsx b/components/cart/inline-add-to-cart.tsx
index 1cc7fdf4f..0bcd18903 100644
--- 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',
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 972ddfaa0..a7c2fcd8c 100644
--- 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}>
diff --git a/components/grid/homepage-products.tsx b/components/grid/homepage-products.tsx
index 08b504227..1e1d2e6c1 100644
--- 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>
diff --git a/components/grid/product-grid.tsx b/components/grid/product-grid.tsx
index 39c36ea3d..28317363d 100644
--- a/components/grid/product-grid.tsx
+++ b/components/grid/product-grid.tsx
@@ -11,8 +11,8 @@ 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}`}>
-        <div className="relative block aspect-square overflow-hidden ">
+      <Link className="block w-full pb-12" href={`/product/${item.handle}`}>
+        <div className="relative block aspect-square overflow-hidden">
           <GridTileImage
             src={item.featuredImage.url}
             fill
@@ -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>
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 356ad3dcf..a86f4f81f 100644
--- 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"
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 4fa765ca7..fcb39c24b 100644
--- 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'
               )}
diff --git a/components/layout/newsletter-footer.tsx b/components/layout/newsletter-footer.tsx
index 66a1f0fef..98a0862a2 100644
--- 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(
diff --git a/components/layout/newsletter-signup.tsx b/components/layout/newsletter-signup.tsx
index 427af82bc..465f9fe48 100644
--- 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
diff --git a/components/layout/sagyobar-preview.tsx b/components/layout/sagyobar-preview.tsx
index 4d4b66b69..5d4c64221 100644
--- 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')}
diff --git a/components/layout/shoplist.tsx b/components/layout/shoplist.tsx
index ac4a498b5..f3e2c444e 100644
--- 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"
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<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',
diff --git a/lib/gtm.ts b/lib/gtm.ts
new file mode 100644
index 000000000..da1d70a5c
--- /dev/null
+++ 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
+    });
+  }
+};
diff --git a/messages/ja.json b/messages/ja.json
index a750a7e53..0a1d26e3a 100644
--- 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": "多彩な黒 – 醸造の理念",
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"