Merge branch 'Weaverse:main' into main

.env.example

@@ -10,4 +10,5 @@ PUBLIC_CHECKOUT_DOMAIN=checkout.hydrogen.shop
 #WEAVERSE_PROJECT_ID="your-project-id"
 #WEAVERSE_API_KEY="your-weaverse-api-key"
 #WEAVERSE_HOST="https://studio.weaverse.io"
+#PUBLIC_GOOGLE_GTM_ID=G-R1KFYYKE48
 

README.md

@@ -64,7 +64,7 @@ export async function loader(args: RouteLoaderArgs) {
   let {params, context} = args;
 
   return defer({
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({type: 'INDEX'}),
     // More route's loader data...
   });
 }
@@ -274,21 +274,24 @@ Weaverse provides a convenient way to customize your theme inside the **Weaverse
 ![Weaverse Editor](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/playground.jpg?v=1699244445)
 
 
-## Setup for using Customer Account API (`/account` section)
+## Setup for using Customer Account API (`/account`)
 
-### Setup public domain using Cloudflare Tunnel
-
-1. Use [untun](https://github.com/unjs/untun) to start a tunnel with your public domain
+1. Run development with `--customer-account-push__unstable` flag to start the server with a tunnel to expose the local server to the public domain.
+```bash
+shopify hydrogen dev --codegen --port 3456 --customer-account-push__unstable
+```
+Or quicker way with:
 ```bash
-npx untun@latest tunnel http://localhost:3456
+npm run dev:ca
 ```
 
 ### Include public domain in Customer Account API settings
+After run the server with `--customer-account-push__unstable` flag, you will get a public domain like `https://<your-cf-tunnel>.tryhydrogen.dev`. And it should be automatically added to the Customer Account API settings. If not, you can manually add it by following these steps:
 
 1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
-1. Edit `Callback URI(s)` to include `https://<your-cf-tunnel>.trycloudflare.com/account/authorize`
-1. Edit `Javascript origin(s)` to include your public domain `https://<your-cf-tunnel>.trycloudflare.com` or keep it blank
-1. Edit `Logout URI` to include your public domain `https://<your-cf-tunnel>.trycloudflare.com` or keep it blank
+2. Edit `Callback URI(s)` to include `https://<your-cf-tunnel>.tryhydrogen.dev/account/authorize`
+3. Edit `Javascript origin(s)` to include your public domain `https://<your-tunnel>.tryhydrogen.dev` or keep it blank
+4. Edit `Logout URI` to include your public domain `https://<your-tunnel>.tryhydrogen.dev` or keep it blank
 
 
 ### Local development inspects

app/components/GoogleTagManager.tsx

@@ -0,0 +1,35 @@
+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}`} />
+    </>
+  );
+}

app/root.tsx

@@ -40,6 +40,7 @@ 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 = ({
@@ -97,7 +98,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const isLoggedInPromise = context.customerAccount.isLoggedIn();
 
   const seo = seoPayload.root({shop: layout.shop, url: request.url});
-
+  const googleGtmID = context.env.PUBLIC_GOOGLE_GTM_ID;
   return defer(
     {
       shop: getShopAnalytics({
@@ -114,6 +115,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
       cart: cart.get(),
       seo,
       weaverseTheme: await context.weaverse.loadThemeSettings(),
+      googleGtmID,
     },
     {
       headers: {
@@ -157,6 +159,7 @@ function App() {
         </Analytics.Provider>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <GoogleGTM />
       </body>
     </html>
   );

app/weaverse/create-weaverse.server.ts

@@ -30,11 +30,12 @@ export function getWeaverseCsp(request: Request) {
       '*.youtu.be',
       '*.vimeo.com',
       '*.google.com',
+      '*.google-analytics.com',
       'fonts.gstatic.com',
       ...weaverseHosts,
     ],
     styleSrc: ['fonts.googleapis.com', ...weaverseHosts],
-    connectSrc: ['https://vimeo.com', ...weaverseHosts],
+    connectSrc: ['vimeo.com', '*.google-analytics.com', ...weaverseHosts],
   };
   if (isDesignMode) {
     updatedCsp.frameAncestors = ['*'];

env.d.ts

@@ -34,6 +34,7 @@ declare global {
     WEAVERSE_HOST: string;
     WEAVERSE_API_KEY: string;
     JUDGEME_PUBLIC_TOKEN: string;
+    PUBLIC_GOOGLE_GTM_ID: string;
   }
 }