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(); 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 */} +