feat: Shopify Analytics (#1333)

thisdot · Oct 20, 2023 · e233147 · e233147
1 parent 2c94509
commit e233147
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,47 @@
+'use client';
+
+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';
+
+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: ANALYTICS_CONFIG.currency,
+			acceptedLanguage: ANALYTICS_CONFIG.acceptedLanguage,
+		},
+	});
+}
+
+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
@@ -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 (
 		<html lang="en">
 			<body className={inter.className}>
+				<ShopifyAnalytics shopId={data.body.data.shop.id} />
 				<div className="flex flex-col min-h-screen">
 					<div className="">
 						<a href="#mainContent" className="sr-only">

diff --git 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;
 	};

diff --git 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",