From a32a8a2eb08fab118c64eb68b8d5c0994d1e5230 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Fri, 20 Oct 2023 09:57:59 +0300 Subject: [PATCH 1/4] feat: Shopify Analytics --- .../app/compoents/ShopifyAnalytics.tsx | 37 +++++++++++++++++++ starters/shopify-next-tailwind/app/layout.tsx | 2 + starters/shopify-next-tailwind/package.json | 1 + 3 files changed, 40 insertions(+) create mode 100644 starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx new file mode 100644 index 000000000..55e1efc7e --- /dev/null +++ b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx @@ -0,0 +1,37 @@ +'use client'; + +import { useShopifyCookies } from '@shopify/hydrogen-react'; +import { usePathname } from 'next/navigation'; +import { useEffect } from 'react'; +import { + sendShopifyAnalytics, + getClientBrowserParameters, + AnalyticsEventName, +} from '@shopify/hydrogen-react'; + +export function sendPageView(shopId: string) { + sendShopifyAnalytics({ + eventName: AnalyticsEventName.PAGE_VIEW, + payload: { + ...getClientBrowserParameters(), + hasUserConsent: true, + shopId: shopId, + currency: 'USD', + acceptedLanguage: 'EN', + }, + }); +} + +function ShopifyAnalytics({ shopId }: { shopId: string }) { + const pathname = usePathname(); + + useEffect(() => { + sendPageView(shopId); + }, [pathname]); + + useShopifyCookies(); + + return <>; +} + +export default ShopifyAnalytics; diff --git a/starters/shopify-next-tailwind/app/layout.tsx b/starters/shopify-next-tailwind/app/layout.tsx index 51cdca0b4..b8aaf7210 100644 --- a/starters/shopify-next-tailwind/app/layout.tsx +++ b/starters/shopify-next-tailwind/app/layout.tsx @@ -7,6 +7,7 @@ import Footer from './compoents/Footer'; import Header from './compoents/Header'; import { cookies } from 'next/headers'; import { Metadata } from 'next'; +import ShopifyAnalytics from './compoents/ShopifyAnalytics'; const inter = Inter({ subsets: ['latin'] }); @@ -27,6 +28,7 @@ export default async function RootLayout({ return ( +
diff --git a/starters/shopify-next-tailwind/package.json b/starters/shopify-next-tailwind/package.json index 31cd34568..fb4e0b4aa 100644 --- a/starters/shopify-next-tailwind/package.json +++ b/starters/shopify-next-tailwind/package.json @@ -28,6 +28,7 @@ "dependencies": { "@babel/core": "7.22.9", "@headlessui/react": "1.7.15", + "@shopify/hydrogen-react": "^2023.7.4", "@storybook/addon-styling": "1.3.4", "@storybook/testing-library": "0.2.0", "@tailwindcss/forms": "0.5.4", From 17b49bcdcd6fc4a832e3da055bcc0fe30fc81721 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Fri, 20 Oct 2023 10:17:00 +0300 Subject: [PATCH 2/4] fix: fetch the lang and currency --- .../app/compoents/ShopifyAnalytics.tsx | 24 +++++++++++++++---- starters/shopify-next-tailwind/app/layout.tsx | 6 ++++- .../lib/shopify/queries/layout.ts | 4 ++++ .../lib/shopify/types.ts | 5 ++++ 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx index 55e1efc7e..a5457735e 100644 --- a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx +++ b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx @@ -8,25 +8,39 @@ import { getClientBrowserParameters, AnalyticsEventName, } from '@shopify/hydrogen-react'; +import { CurrencyCode } from '@/lib/useMoney'; +import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types'; -export function sendPageView(shopId: string) { +export function sendPageView( + shopId: string, + currency: CurrencyCode, + acceptedLanguage: LanguageCode +) { sendShopifyAnalytics({ eventName: AnalyticsEventName.PAGE_VIEW, payload: { ...getClientBrowserParameters(), hasUserConsent: true, shopId: shopId, - currency: 'USD', - acceptedLanguage: 'EN', + currency: currency, + acceptedLanguage: acceptedLanguage, }, }); } -function ShopifyAnalytics({ shopId }: { shopId: string }) { +function ShopifyAnalytics({ + shopId, + currency, + acceptedLanguage, +}: { + shopId: string; + currency: CurrencyCode; + acceptedLanguage: LanguageCode; +}) { const pathname = usePathname(); useEffect(() => { - sendPageView(shopId); + sendPageView(shopId, currency, acceptedLanguage); }, [pathname]); useShopifyCookies(); diff --git a/starters/shopify-next-tailwind/app/layout.tsx b/starters/shopify-next-tailwind/app/layout.tsx index b8aaf7210..c2f3215cf 100644 --- a/starters/shopify-next-tailwind/app/layout.tsx +++ b/starters/shopify-next-tailwind/app/layout.tsx @@ -28,7 +28,11 @@ export default async function RootLayout({ return ( - +
diff --git a/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts b/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts index f3c38f194..0d707e4f3 100644 --- a/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts +++ b/starters/shopify-next-tailwind/lib/shopify/queries/layout.ts @@ -8,6 +8,7 @@ export const LAYOUT_QUERY = `#graphql id name description + currencyCode primaryDomain { url } @@ -19,6 +20,9 @@ export const LAYOUT_QUERY = `#graphql } } } + shopLocales { + locale + } headerMenu: menu(handle: $headerMenuHandle) { id items { diff --git a/starters/shopify-next-tailwind/lib/shopify/types.ts b/starters/shopify-next-tailwind/lib/shopify/types.ts index f661772e3..2b68c5a70 100644 --- a/starters/shopify-next-tailwind/lib/shopify/types.ts +++ b/starters/shopify-next-tailwind/lib/shopify/types.ts @@ -1,10 +1,12 @@ import { FiltersQueryParams } from '@/app/collections/[collectionHandle]/page'; import { CollectionHero } from '@/components/Hero'; +import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types'; export type Shop = { id: string; name: string; description: string | null; + currencyCode: CurrencyCode; primaryDomain: { url: string; }; @@ -77,6 +79,9 @@ export type ShopifyFooterItem = { export type ShopifyLayoutOperation = { data: { shop: Shop; + shopLocales: { + locale: LanguageCode; + }[]; headerMenu: ShopifyHeaderMenu; footerMenu: ShopifyFooterMenu; }; From 3e80e8daa57f493e1094fb8241d3d0ea75f06de6 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Fri, 20 Oct 2023 11:26:45 +0300 Subject: [PATCH 3/4] fix: remove double imports --- .../shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx index a5457735e..f9156b75a 100644 --- a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx +++ b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx @@ -1,12 +1,12 @@ 'use client'; -import { useShopifyCookies } from '@shopify/hydrogen-react'; import { usePathname } from 'next/navigation'; import { useEffect } from 'react'; import { sendShopifyAnalytics, getClientBrowserParameters, AnalyticsEventName, + useShopifyCookies, } from '@shopify/hydrogen-react'; import { CurrencyCode } from '@/lib/useMoney'; import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types'; From e77cdcfeee853b0e1de894f8d4ffe298b94aa593 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Fri, 20 Oct 2023 11:56:37 +0300 Subject: [PATCH 4/4] fix: query --- starters/shopify-next-tailwind/README.md | 7 +++++ .../app/compoents/ShopifyAnalytics.tsx | 30 ++++++++----------- starters/shopify-next-tailwind/app/layout.tsx | 6 +--- .../lib/shopify/queries/layout.ts | 4 --- 4 files changed, 21 insertions(+), 26 deletions(-) diff --git a/starters/shopify-next-tailwind/README.md b/starters/shopify-next-tailwind/README.md index 327c57c55..bcc51ebda 100644 --- a/starters/shopify-next-tailwind/README.md +++ b/starters/shopify-next-tailwind/README.md @@ -98,6 +98,13 @@ git clone https://github.com/thisdot/starter.dev.git - `pnpm run format` - Formats code for the entire project. - `pnpm run format.check` - Checks all project code to conform to prettier rules. +## Shopify Analytics + +By default, Shopify Analytics is enabled. There are 2 main options you have to set them in the code from `app/components/ShopifyAnalytics.tsx`: + +- `currency` - The currency used in the store. nd by default is set to `USD`. +- `acceptedLanguages` - The languages accepted by the store. By default is set to `US`. + ## Demo Implementation [Live Store](https://shopify-next-tailwind.starter.dev) diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx index f9156b75a..3d0e9c3db 100644 --- a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx +++ b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx @@ -11,36 +11,32 @@ import { import { CurrencyCode } from '@/lib/useMoney'; import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types'; -export function sendPageView( - shopId: string, - currency: CurrencyCode, - acceptedLanguage: LanguageCode -) { +const ANALYTICS_CONFIG: { + currency: CurrencyCode; + acceptedLanguage: LanguageCode; +} = { + currency: 'USD', + acceptedLanguage: 'EN', +}; + +export function sendPageView(shopId: string) { sendShopifyAnalytics({ eventName: AnalyticsEventName.PAGE_VIEW, payload: { ...getClientBrowserParameters(), hasUserConsent: true, shopId: shopId, - currency: currency, - acceptedLanguage: acceptedLanguage, + currency: ANALYTICS_CONFIG.currency, + acceptedLanguage: ANALYTICS_CONFIG.acceptedLanguage, }, }); } -function ShopifyAnalytics({ - shopId, - currency, - acceptedLanguage, -}: { - shopId: string; - currency: CurrencyCode; - acceptedLanguage: LanguageCode; -}) { +function ShopifyAnalytics({ shopId }: { shopId: string }) { const pathname = usePathname(); useEffect(() => { - sendPageView(shopId, currency, acceptedLanguage); + sendPageView(shopId); }, [pathname]); useShopifyCookies(); diff --git a/starters/shopify-next-tailwind/app/layout.tsx b/starters/shopify-next-tailwind/app/layout.tsx index c2f3215cf..b8aaf7210 100644 --- a/starters/shopify-next-tailwind/app/layout.tsx +++ b/starters/shopify-next-tailwind/app/layout.tsx @@ -28,11 +28,7 @@ export default async function RootLayout({ return ( - +