Next.js

NEXT_PUBLIC_TRACKBEE_PAK=pk_live_your_key_here

import Script from 'next/script';
import { Suspense } from 'react';
import { TrackBee } from '@/components/trackbee';

const TRACKBEE_STUB = `
window.trackbee = window.trackbee || (function () {
  var q = [];
  function stub(method) {
    return function () { q.push([method].concat([].slice.call(arguments))); };
  }
  return { q: q, track: stub('track'), consent: stub('consent'), cartToken: stub('cartToken') };
})();`;

export const metadata = {
  title: 'Northbound',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          id="trackbee-stub"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{ __html: TRACKBEE_STUB }}
        />
        <Script
          src="https://cdn.trackbee.ai/g/trackbee-tracking-sdk.min.js"
          strategy="beforeInteractive"
          data-pak={process.env.NEXT_PUBLIC_TRACKBEE_PAK}
          data-identity-mode="internal"
        />
        <Suspense fallback={null}>
          <TrackBee />
        </Suspense>
        {children}
      </body>
    </html>
  );
}

export {};

declare global {
  interface Window {
    trackbee: {
      track: (event: string, data?: Record<string, unknown>) => void;
      consent: (options: { userData?: boolean; personalization?: boolean }) => void;
      cartToken: (token: string) => void;
    };
  }
}

'use client';

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { useCart } from '@/components/cart-provider';
import { useConsent } from '@/components/consent-provider';

export function TrackBee() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  // useConsent and useCart are NOT part of the SDK. They are placeholders for your own code:
  // whatever reads the visitor's answer out of your consent banner, and whatever holds the
  // current cart. Build them, or swap these two lines for however your app already exposes
  // that state. The rest of this component is what matters.
  //
  // This example assumes consent is null until the visitor has answered, and that cart is
  // null when there is no cart yet.
  const consent = useConsent();
  const cart = useCart();

  useEffect(() => {
    if (!consent) return;
    window.trackbee.consent({
      userData: consent.analytics,
      personalization: consent.marketing,
    });
  }, [consent]);

  useEffect(() => {
    if (cart?.token) window.trackbee.cartToken(cart.token);
  }, [cart?.token]);

  useEffect(() => {
    if (!consent) return;
    window.trackbee.track('page_view');
  }, [consent, pathname, searchParams]);

  return null;
}

import { getProduct } from '@/lib/shop';
import { TrackProductView } from './track-product-view';

export default async function ProductPage({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const product = await getProduct(handle); // getProduct is NOT part of the SDK. It is a placeholder for your own code.
  const variant = product.variants[0];

  return (
    <>
      <TrackProductView product={product} variant={variant} />
      <h1>{product.title}</h1>
      {/* ... */}
    </>
  );
}

'use client';

import { useEffect } from 'react';
import type { Product, Variant } from '@/lib/shop';

export function TrackProductView({ product, variant }: { product: Product; variant: Variant }) {
  useEffect(() => {
    window.trackbee.track('product_view', {
      product_id: product.id,
      variant_id: variant.id,
      price: variant.price,
      currency: variant.currencyCode,
      product_title: product.title,
      variant_title: variant.title,
      product_type: product.type,
      product_url: `https://northbound.example/products/${product.handle}`,
      image_url: variant.image?.url,
      vendor: product.vendor,
      sku: variant.sku,
    });
  }, [product, variant]);

  return null;
}

'use client';

import { useTransition } from 'react';
import { addToCart } from '@/lib/shop';
import type { Product, Variant } from '@/lib/shop';

export function AddToCartButton({
  product,
  variant,
  quantity = 1,
}: {
  product: Product;
  variant: Variant;
  quantity?: number;
}) {
  const [pending, startTransition] = useTransition();

  function onClick() {
    startTransition(async () => {
      // addToCart is NOT part of the SDK. It is a placeholder for your own code.
      await addToCart(variant.id, quantity);

      // Send it once the cart actually accepted the line, not on click
      window.trackbee.track('add_to_cart', {
        product_id: product.id,
        variant_id: variant.id,
        price: variant.price,
        quantity,
        currency: variant.currencyCode,
        product_title: product.title,
        variant_title: variant.title,
        product_type: product.type,
        product_url: `https://northbound.example/products/${product.handle}`,
        vendor: product.vendor,
        sku: variant.sku,
      });
    });
  }

  return (
    <button onClick={onClick} disabled={pending}>
      {pending ? 'Adding...' : 'Add to cart'}
    </button>
  );
}

next build && next start