From 0c05af1b0a3f29e5bf7b4f77f5434acd227ad520 Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Thu, 18 Apr 2024 16:09:42 +0700
Subject: [PATCH] Unify the analytics setup

---
 .env.example                                  |  9 +++-
 app/components/CustomAnalytics.tsx            | 41 +++++++++++++++++--
 app/components/GenericError.tsx               |  1 +
 app/components/GoogleTagManager.tsx           | 35 ----------------
 app/entry.server.tsx                          |  4 +-
 app/root.tsx                                  |  6 +--
 .../($locale).policies.$policyHandle.tsx      |  1 +
 .../($locale).products.$productHandle.tsx     | 32 ++++++++-------
 app/sections/blog-post.tsx                    |  5 ++-
 app/sections/page.tsx                         |  1 +
 app/sections/product-information/index.tsx    |  5 ++-
 .../product-information/product-detail.tsx    |  1 +
 app/sections/shared/Description.tsx           |  1 +
 app/sections/single-product/index.tsx         |  5 ++-
 app/sections/testimonials/item.tsx            |  6 ++-
 app/weaverse/style.tsx                        |  1 +
 server.ts                                     |  3 ++
 vite.config.ts                                | 23 +++++++----
 18 files changed, 105 insertions(+), 75 deletions(-)
 delete mode 100644 app/components/GoogleTagManager.tsx

diff --git a/.env.example b/.env.example
index 41fdc6c9..e6aa9ecf 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
+# Replace the values with your own
 SESSION_SECRET="foobar"
 PUBLIC_STOREFRONT_API_TOKEN=33ad0f277e864013b8e3c21d19432501
 PUBLIC_STORE_DOMAIN=hydrogen-preview.myshopify.com
@@ -5,10 +6,14 @@ PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=shp_3cecd990-4824-4e27-beb2-46c8e822ec14
 PUBLIC_CUSTOMER_ACCOUNT_API_URL=https://shopify.com/55145660472
 PUBLIC_CHECKOUT_DOMAIN=checkout.hydrogen.shop
 
+## optional
 #PRIVATE_STOREFRONT_API_TOKEN="your-private-storefront-api-token"
 
-#WEAVERSE_PROJECT_ID="your-project-id"
+# Weaverse setup
+WEAVERSE_PROJECT_ID="your-project-id"
 #WEAVERSE_API_KEY="your-weaverse-api-key"
-#WEAVERSE_HOST="https://studio.weaverse.io"
+
+# Additional services
 #PUBLIC_GOOGLE_GTM_ID=G-R1KFYYKE48
+#JUDGEME_PUBLIC_TOKEN="your-judgeme-public-token"
 
diff --git a/app/components/CustomAnalytics.tsx b/app/components/CustomAnalytics.tsx
index 0ac4c941..df65c0b8 100644
--- a/app/components/CustomAnalytics.tsx
+++ b/app/components/CustomAnalytics.tsx
@@ -1,10 +1,17 @@
-import {unstable_useAnalytics as useAnalytics} from '@shopify/hydrogen';
+import {Script, unstable_useAnalytics as useAnalytics} from '@shopify/hydrogen';
 import {useEffect} from 'react';
+import {useLoaderData} from '@remix-run/react';
+import {loader} from '~/root';
 
 export function CustomAnalytics() {
-  const {subscribe} = useAnalytics();
+  const {subscribe, canTrack} = useAnalytics();
+  const data = useLoaderData<typeof loader>();
 
   useEffect(() => {
+    setTimeout(() => {
+      let isTrackingAllowed = canTrack();
+      console.log('CustomAnalytics - isTrackingAllowed', isTrackingAllowed);
+    }, 1000);
     // Standard events
     subscribe('page_viewed', (data) => {
       console.log('CustomAnalytics - Page viewed:', data);
@@ -28,5 +35,33 @@ export function CustomAnalytics() {
     });
   }, []);
 
-  return null;
+  let id = data.googleGtmID;
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Initialize GTM container */}
+      <Script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `
+              dataLayer = window.dataLayer || [];
+
+              function gtag(){
+                dataLayer.push(arguments)
+              };
+
+              gtag('js', new Date());
+              gtag({'gtm.start': new Date().getTime(),event:'gtm.js'})
+              gtag('config', "${id}");
+          `,
+        }}
+      />
+
+      {/* Load GTM script */}
+      <Script async src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
+    </>
+  );
 }
diff --git a/app/components/GenericError.tsx b/app/components/GenericError.tsx
index f2333090..9d2f82e7 100644
--- a/app/components/GenericError.tsx
+++ b/app/components/GenericError.tsx
@@ -31,6 +31,7 @@ export function GenericError({
               overflow: 'auto',
               maxWidth: '100%',
             }}
+            suppressHydrationWarning
             dangerouslySetInnerHTML={{
               __html: addLinksToStackTrace(error.stack),
             }}
diff --git a/app/components/GoogleTagManager.tsx b/app/components/GoogleTagManager.tsx
deleted file mode 100644
index ec0eefec..00000000
--- a/app/components/GoogleTagManager.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {useLoaderData} from '@remix-run/react';
-import {Script} from '@shopify/hydrogen';
-import {loader} from '~/root';
-
-export function GoogleGTM() {
-  const data = useLoaderData<typeof loader>();
-  let id = data.googleGtmID;
-  if (!id) {
-    return null;
-  }
-
-  return (
-    <>
-      {/* Initialize GTM container */}
-      <Script
-        dangerouslySetInnerHTML={{
-          __html: `
-              dataLayer = window.dataLayer || [];
-
-              function gtag(){
-                dataLayer.push(arguments)
-              };
-
-              gtag('js', new Date());
-              gtag({'gtm.start': new Date().getTime(),event:'gtm.js'})
-              gtag('config', "${id}");
-          `,
-        }}
-      />
-
-      {/* Load GTM script */}
-      <Script async src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
-    </>
-  );
-}
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 5f04a2ad..4ad80cd6 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -16,8 +16,8 @@ export default async function handleRequest(
   const {nonce, header, NonceProvider} = createContentSecurityPolicy({
     ...getWeaverseCsp(request),
     shop: {
-      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
-      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+      checkoutDomain: context.env?.PUBLIC_CHECKOUT_DOMAIN,
+      storeDomain: context.env?.PUBLIC_STORE_DOMAIN,
     },
   });
   const body = await renderToReadableStream(
diff --git a/app/root.tsx b/app/root.tsx
index 8818b91b..f1c09cf6 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -40,7 +40,6 @@ import {NotFound} from './components/NotFound';
 import styles from './styles/app.css?url';
 import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import {GlobalStyle} from './weaverse/style';
-import {GoogleGTM} from '~/components/GoogleTagManager';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -159,7 +158,6 @@ function App() {
         </Analytics.Provider>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <GoogleGTM />
       </body>
     </html>
   );
@@ -210,8 +208,8 @@ export function ErrorBoundary({error}: {error: Error}) {
             <GenericError error={error instanceof Error ? error : undefined} />
           )}
         </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
+        {/*<ScrollRestoration nonce={nonce} />*/}
+        {/*<Scripts nonce={nonce} />*/}
       </body>
     </html>
   );
diff --git a/app/routes/($locale).policies.$policyHandle.tsx b/app/routes/($locale).policies.$policyHandle.tsx
index 0975d95f..de0ad1df 100644
--- a/app/routes/($locale).policies.$policyHandle.tsx
+++ b/app/routes/($locale).policies.$policyHandle.tsx
@@ -63,6 +63,7 @@ export default function Policies() {
         </PageHeader>
         <div className="flex-grow w-full md:w-7/12">
           <div
+            suppressHydrationWarning
             dangerouslySetInnerHTML={{__html: policy.body}}
             className="prose dark:prose-invert"
           />
diff --git a/app/routes/($locale).products.$productHandle.tsx b/app/routes/($locale).products.$productHandle.tsx
index fb9dd157..970cd14a 100644
--- a/app/routes/($locale).products.$productHandle.tsx
+++ b/app/routes/($locale).products.$productHandle.tsx
@@ -148,21 +148,23 @@ export default function Product() {
   return (
     <>
       <WeaverseContent />
-      <Analytics.ProductView
-        data={{
-          products: [
-            {
-              id: product.id,
-              title: product.title,
-              price: product.selectedVariant?.price.amount || '0',
-              vendor: product.vendor,
-              variantId: product.selectedVariant?.id || '',
-              variantTitle: product.selectedVariant?.title || '',
-              quantity: 1,
-            },
-          ],
-        }}
-      />
+      {product.selectedVariant && (
+        <Analytics.ProductView
+          data={{
+            products: [
+              {
+                id: product.id,
+                title: product.title,
+                price: product.selectedVariant?.price.amount || '0',
+                vendor: product.vendor,
+                variantId: product.selectedVariant?.id || '',
+                variantTitle: product.selectedVariant?.title || '',
+                quantity: 1,
+              },
+            ],
+          }}
+        />
+      )}
     </>
   );
 }
diff --git a/app/sections/blog-post.tsx b/app/sections/blog-post.tsx
index 2ee90c83..312178d5 100644
--- a/app/sections/blog-post.tsx
+++ b/app/sections/blog-post.tsx
@@ -46,7 +46,10 @@ let BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
           </div>
           <Section as="article" padding="all" className="prose mx-auto">
             <div className="lg:max-w-screen-lg md:max-w-screen-md max-w-screen-sm px-4 mx-auto space-y-8 md:space-y-16">
-              <div dangerouslySetInnerHTML={{__html: contentHtml}} />
+              <div
+                suppressHydrationWarning
+                dangerouslySetInnerHTML={{__html: contentHtml}}
+              />
               <div className="md:flex justify-between gap-2 space-y-2">
                 <div>
                   <strong>Tags:</strong>
diff --git a/app/sections/page.tsx b/app/sections/page.tsx
index fe74f5cd..e3b2c721 100644
--- a/app/sections/page.tsx
+++ b/app/sections/page.tsx
@@ -29,6 +29,7 @@ let Page = forwardRef<HTMLElement, PageProps>((props, ref) => {
         >
           <PageHeader heading={page.title}>
             <div
+              suppressHydrationWarning
               dangerouslySetInnerHTML={{__html: page.body}}
               className="prose dark:prose-invert"
             />
diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx
index 7420a755..0815e48b 100644
--- a/app/sections/product-information/index.tsx
+++ b/app/sections/product-information/index.tsx
@@ -70,8 +70,8 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
     let atcText = selectedVariant?.availableForSale
       ? addToCartText
       : selectedVariant?.quantityAvailable === -1
-      ? unavailableText
-      : soldOutText;
+        ? unavailableText
+        : soldOutText;
     useEffect(() => {
       if (!selectedVariant) {
         setSelectedVariant(variants?.nodes?.[0]);
@@ -134,6 +134,7 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
                   </p>
                   {children}
                   <p
+                    suppressHydrationWarning
                     className="max-w-[600px] leading-relaxed"
                     dangerouslySetInnerHTML={{
                       __html: descriptionHtml,
diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx
index 89b72774..40905ddd 100644
--- a/app/sections/product-information/product-detail.tsx
+++ b/app/sections/product-information/product-detail.tsx
@@ -32,6 +32,7 @@ export function ProductDetail({
 
           <Disclosure.Panel className={'pb-4 pt-2 grid gap-2'}>
             <div
+              suppressHydrationWarning
               className="prose dark:prose-invert"
               dangerouslySetInnerHTML={{__html: content}}
             />
diff --git a/app/sections/shared/Description.tsx b/app/sections/shared/Description.tsx
index f1c4a820..86c565ed 100644
--- a/app/sections/shared/Description.tsx
+++ b/app/sections/shared/Description.tsx
@@ -52,6 +52,7 @@ let Description = forwardRef<
         alignmentClasses[alignment!],
         className,
       )}
+      suppressHydrationWarning
       dangerouslySetInnerHTML={{__html: content}}
     ></Tag>
   );
diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx
index 9e2aa2ae..2a71a674 100644
--- a/app/sections/single-product/index.tsx
+++ b/app/sections/single-product/index.tsx
@@ -64,8 +64,8 @@ let SingleProduct = forwardRef<HTMLElement, SingleProductProps>(
     let atcText = selectedVariant?.availableForSale
       ? 'Add to Cart'
       : selectedVariant?.quantityAvailable === -1
-      ? 'Unavailable'
-      : 'Sold Out';
+        ? 'Unavailable'
+        : 'Sold Out';
     return (
       <section ref={ref} {...rest} className="w-full py-12 md:py-24 lg:py-32">
         <div className="container px-4 md:px-6 mx-auto">
@@ -94,6 +94,7 @@ let SingleProduct = forwardRef<HTMLElement, SingleProductProps>(
                 {children}
                 <p
                   className="max-w-[600px] leading-relaxed"
+                  suppressHydrationWarning
                   dangerouslySetInnerHTML={{
                     __html: product?.descriptionHtml,
                   }}
diff --git a/app/sections/testimonials/item.tsx b/app/sections/testimonials/item.tsx
index 267d1180..a454d597 100644
--- a/app/sections/testimonials/item.tsx
+++ b/app/sections/testimonials/item.tsx
@@ -36,7 +36,11 @@ let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>(
         <figure className="p-6 bg-gray-50 rounded">
           <blockquote className="text-gray-500">
             <h4 className="font-medium text-gray-900">{heading}</h4>
-            <p className="my-4" dangerouslySetInnerHTML={{__html: content}} />
+            <p
+              className="my-4"
+              suppressHydrationWarning
+              dangerouslySetInnerHTML={{__html: content}}
+            />
           </blockquote>
           <figcaption className="flex items-center space-x-3">
             <Image
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 80909d83..fc708237 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -73,6 +73,7 @@ export function GlobalStyle() {
       <style
         id="global-theme-style"
         key="global-theme-style"
+        suppressHydrationWarning
         dangerouslySetInnerHTML={{
           __html: `
             :root {
diff --git a/server.ts b/server.ts
index 19e88af0..e7aaab3a 100644
--- a/server.ts
+++ b/server.ts
@@ -28,6 +28,9 @@ export default {
     env: Env,
     executionContext: ExecutionContext,
   ): Promise<Response> {
+    // https://github.com/Shopify/hydrogen/issues/1998#issuecomment-2062161714
+    // globalThis.__H2O_LOG_EVENT = undefined;
+    globalThis.__remix_devServerHooks = undefined;
     try {
       /**
        * Open a cache instance in the worker and a custom session instance.
diff --git a/vite.config.ts b/vite.config.ts
index a6f25563..5688ebb1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,14 +8,7 @@ export default defineConfig({
   plugins: [
     hydrogen(),
     oxygen(),
-    remix({
-      presets: [hydrogen.preset()],
-      future: {
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: false,
-        v3_throwAbortReason: true,
-      },
-    }),
+    remix({presets: [hydrogen.preset()]}),
     tsconfigPaths(),
   ],
   ssr: {
@@ -23,4 +16,18 @@ export default defineConfig({
       include: ['typographic-base/index', 'textr'],
     },
   },
+  server: {
+    warmup: {
+      clientFiles: [
+        './app/entry.client.tsx',
+        './app/root.tsx',
+        './app/routes/**/*',
+      ],
+    },
+  },
+  build: {
+    // Allow a strict Content-Security-Policy
+    // withtout inlining assets as base64:
+    assetsInlineLimit: 0,
+  },
 });