Feat: Added Shopify Analytics

.env.example

@@ -5,3 +5,4 @@ SITE_NAME="Next.js Commerce"
 SHOPIFY_REVALIDATION_SECRET=""
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
 SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
+NEXT_PUBLIC_SHOPIFY_SHOP_ID="[your-shopify-shop-id]"

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.idea

README.md

@@ -14,16 +14,22 @@ A Next.js 14 and App Router-ready ecommerce template featuring:
 - Styling with Tailwind CSS
 - Checkout and payments with Shopify
 - Automatic light/dark mode based on system settings
+- Shopify Analytics
 
 <h3 id="v1-note"></h3>
 
-> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
+> Note: Looking for Next.js Commerce v1? View
+> the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store),
+> and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
 
 ## Providers
 
-Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
+Vercel will only be actively maintaining a Shopify
+version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
 
-Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
+Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and
+listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with
+their own implementation while leaving the rest of the template mostly unchanged.
 
 - Shopify (this repository)
 - [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
@@ -34,21 +40,41 @@ Vercel is happy to partner and work with any commerce provider to help them get
 - [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
 - [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
 
-> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
+> Note: Providers, if you are looking to use similar products for your demo, you
+> can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
 
 ## Integrations
 
 Integrations enable upgraded or additional functionality for Next.js Commerce
 
 - [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
-  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
+  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based
+    configuration.
   - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
 
+## Shopify analytics
+
+1. Visit https://[your-store-id].myshopify.com/shop.json
+2. Search for `shopId` and add it to the `NEXT_PUBLIC_SHOPIFY_SHOP_ID` in your `.env` file.
+
+To test out Shopify analytics, in your localhost, you can use the following steps:
+
+1. Install ngrok
+2. Setup custom domain in ngrok dashboard
+3. Expose your local development server (e.g., running on port 3000) with a command:
+
+```bash
+ngrok http --domain=YOUR_NGROK_DOMAIN 3000
+```
+
 ## Running locally
 
-You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's
+recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for
+this, but a `.env` file is all that is necessary.
 
-> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify
+> store.
 
 1. Install Vercel CLI: `npm i -g vercel`
 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
@@ -69,8 +95,11 @@ Your app should now be running on [localhost:3000](http://localhost:3000/).
 1. Connect to the existing `commerce-shopify` project.
 1. Run `vc env pull` to get environment variables.
 1. Run `pnpm dev` to ensure everything is working correctly.
+
 </details>
 
 ## Vercel, Next.js Commerce, and Shopify Integration Guide
 
-You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
+You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step
+instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on
+Vercel.

app/layout.tsx

@@ -1,5 +1,6 @@
 import Navbar from 'components/layout/navbar';
 import { GeistSans } from 'geist/font';
+import ShopifyAnalytics from 'components/layout/shopify-analytics';
 import { ensureStartsWith } from 'lib/utils';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
@@ -39,6 +40,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
         <Suspense>
           <main>{children}</main>
         </Suspense>
+        <ShopifyAnalytics />
       </body>
     </html>
   );

components/cart/actions.ts

@@ -4,10 +4,23 @@ import { TAGS } from 'lib/constants';
 import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
+import { ShopifyAnalyticsProduct } from '@shopify/hydrogen-react';
+import { productToAnalytics } from 'lib/utils';
 
-export async function addItem(prevState: any, selectedVariantId: string | undefined) {
+type AddItemResponse = {
+  cartId?: string;
+  success: boolean;
+  message?: string;
+  products?: ShopifyAnalyticsProduct[];
+};
+
+export async function addItem(
+  prevState: any,
+  selectedVariantId: string | undefined
+): Promise<AddItemResponse> {
   let cartId = cookies().get('cartId')?.value;
   let cart;
+  const quantity = 1;
 
   if (cartId) {
     cart = await getCart(cartId);
@@ -20,14 +33,20 @@ export async function addItem(prevState: any, selectedVariantId: string | undefi
   }
 
   if (!selectedVariantId) {
-    return 'Missing product variant ID';
+    return { success: false, message: 'Missing product variant ID' };
   }
 
   try {
-    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    const response = await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity }]);
     revalidateTag(TAGS.cart);
+    return {
+      success: true,
+      message: 'Item added to cart',
+      cartId,
+      products: productToAnalytics(response.lines, quantity, selectedVariantId)
+    };
   } catch (e) {
-    return 'Error adding item to cart';
+    return { success: false, message: 'Error adding item to cart' };
   }
 }
 

components/cart/add-to-cart.tsx

@@ -7,6 +7,8 @@ import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
 import { useFormState, useFormStatus } from 'react-dom';
+import { useEffect } from 'react';
+import { useShopifyAnalytics } from 'lib/shopify/hooks/use-shopify-analytics';
 
 function SubmitButton({
   availableForSale,
@@ -70,7 +72,8 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [message, formAction] = useFormState(addItem, null);
+  const { sendAddToCart } = useShopifyAnalytics();
+  const [response, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
@@ -81,12 +84,24 @@ export function AddToCart({
   const selectedVariantId = variant?.id || defaultVariantId;
   const actionWithVariant = formAction.bind(null, selectedVariantId);
 
+  useEffect(() => {
+    if (response?.success && response.cartId) {
+      sendAddToCart({
+        cartId: response.cartId,
+        products: response.products,
+        totalValue: Number(response.products?.[0]?.price)
+      });
+    }
+  }, [response?.success, response?.cartId, sendAddToCart, response?.products]);
+
   return (
     <form action={actionWithVariant}>
       <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-      <p aria-live="polite" className="sr-only" role="status">
-        {message}
-      </p>
+      {response?.message && (
+        <p aria-live="polite" className="sr-only" role="status">
+          {response.message}
+        </p>
+      )}
     </form>
   );
 }

components/layout/shopify-analytics.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+import { AnalyticsEventName } from '@shopify/hydrogen-react';
+import { useShopifyAnalytics } from 'lib/shopify/hooks/use-shopify-analytics';
+
+export default function ShopifyAnalytics() {
+  const { sendPageView, pathname } = useShopifyAnalytics();
+  useEffect(() => {
+    sendPageView(AnalyticsEventName.PAGE_VIEW);
+  }, [pathname, sendPageView]);
+  return null;
+}

lib/constants.ts

@@ -29,3 +29,8 @@ export const TAGS = {
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
 export const DEFAULT_OPTION = 'Default Title';
 export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';
+
+export const DEFAULT_CURRENCY = 'AED';
+
+// use your logic to get language
+export const DEFAULT_LANGUAGE = 'EN';

lib/shopify/fragments/cart.ts

@@ -37,6 +37,10 @@ const cartFragment = /* GraphQL */ `
                 name
                 value
               }
+              price {
+                amount
+                currencyCode
+              }
               product {
                 ...product
               }

lib/shopify/hooks/use-shopify-analytics.ts

@@ -0,0 +1,68 @@
+import { usePathname } from 'next/navigation';
+import {
+  AnalyticsEventName,
+  getClientBrowserParameters,
+  sendShopifyAnalytics,
+  ShopifyAnalyticsProduct,
+  ShopifyPageViewPayload,
+  ShopifySalesChannel,
+  useShopifyCookies
+} from '@shopify/hydrogen-react';
+import { DEFAULT_CURRENCY, DEFAULT_LANGUAGE } from 'lib/constants';
+
+const SHOP_ID = process.env.NEXT_PUBLIC_SHOPIFY_SHOP_ID!;
+
+type SendPageViewPayload = {
+  pageType?: string;
+  products?: ShopifyAnalyticsProduct[];
+  collectionHandle?: string;
+  searchString?: string;
+  totalValue?: number;
+  cartId?: string;
+};
+
+type SendAddToCartPayload = {
+  cartId: string;
+  products?: ShopifyAnalyticsProduct[];
+  totalValue?: ShopifyPageViewPayload['totalValue'];
+};
+
+export function useShopifyAnalytics() {
+  const pathname = usePathname();
+  // send page view event
+  const sendPageView = (
+    eventName: keyof typeof AnalyticsEventName,
+    payload?: SendPageViewPayload
+  ) =>
+    sendShopifyAnalytics({
+      eventName,
+      payload: {
+        ...getClientBrowserParameters(),
+        hasUserConsent: true,
+        shopifySalesChannel: ShopifySalesChannel.headless,
+        shopId: `gid://shopify/Shop/${SHOP_ID}`,
+        currency: DEFAULT_CURRENCY,
+        acceptedLanguage: DEFAULT_LANGUAGE,
+        ...payload
+      }
+    });
+
+  // send add to cart event
+  const sendAddToCart = ({ cartId, totalValue, products }: SendAddToCartPayload) =>
+    sendPageView(AnalyticsEventName.ADD_TO_CART, {
+      cartId,
+      totalValue,
+      products
+    });
+
+  // setup cookies for shopify analytics & enable user consent
+  useShopifyCookies({
+    hasUserConsent: true
+  });
+
+  return {
+    sendPageView,
+    sendAddToCart,
+    pathname
+  };
+}

lib/shopify/index.ts

@@ -2,7 +2,7 @@ import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/cons
 import { isShopifyError } from 'lib/type-guards';
 import { ensureStartsWith } from 'lib/utils';
 import { revalidateTag } from 'next/cache';
-import { headers } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 import {
   addToCartMutation,
@@ -214,12 +214,19 @@ export async function addToCart(
   cartId: string,
   lines: { merchandiseId: string; quantity: number }[]
 ): Promise<Cart> {
+  // get shopify cookies
+  const shopifyY = cookies()?.get('_shopify_y')?.value;
+  const shopifyS = cookies()?.get('_shopify_s')?.value;
+
   const res = await shopifyFetch<ShopifyAddToCartOperation>({
     query: addToCartMutation,
     variables: {
       cartId,
       lines
     },
+    headers: {
+      ...(shopifyY && shopifyS && { cookie: `_shopify_y=${shopifyY}; _shopify_s=${shopifyS};` })
+    },
     cache: 'no-store'
   });
   return reshapeCart(res.body.data.cartLinesAdd.cart);

lib/shopify/types.ts

@@ -21,6 +21,7 @@ export type CartItem = {
   merchandise: {
     id: string;
     title: string;
+    price: Money;
     selectedOptions: {
       name: string;
       value: string;

lib/utils.ts

@@ -1,4 +1,6 @@
 import { ReadonlyURLSearchParams } from 'next/navigation';
+import { Cart } from './shopify/types';
+import { ShopifyAnalyticsProduct } from '@shopify/hydrogen-react';
 
 export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
   const paramsString = params.toString();
@@ -37,3 +39,30 @@ export const validateEnvironmentVariables = () => {
     );
   }
 };
+
+/**
+ * This function takes a cart and a quantity and returns an array of ShopifyAnalyticsProduct objects.
+ * */
+export const productToAnalytics = (
+  cartItems: Cart['lines'],
+  quantity: number,
+  variantId: string
+) => {
+  const line = cartItems.find((line) => line.merchandise.id === variantId);
+  if (!line) return;
+
+  const { merchandise } = line;
+
+  if (!merchandise) return;
+
+  return [
+    {
+      productGid: merchandise?.product.id,
+      variantGid: variantId,
+      name: merchandise?.product.title,
+      variantName: merchandise?.title,
+      price: merchandise?.price.amount,
+      quantity
+    } as ShopifyAnalyticsProduct
+  ];
+};

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "@shopify/hydrogen-react": "^2024.1.1",
     "clsx": "^2.1.0",
     "geist": "^1.3.0",
     "next": "14.1.4",