Pack Storefront KPI Events

Pack comes equipped with simple tracking features right out of the box, providing you with insights into unique visitors, page views, average visit duration, and bounce rate on your storefront. This offers a basic yet comprehensive overview of your site's performance, with more to come.

Existing Storefront Update Guide

When you upgrade to ^@pack/hydrogen@1.0.0 it includes changes to required environment variables and how you instantiate the Pack client. These changes are necessary for your storefront to send events to Pack for the storefront KPI dashboard in your admin to work.

1. Add PACK_STOREFRONT_ID to .env

PACK_STOREFRONT_ID is now a new required environment variable.

For those using typescript, make sure to update your remix.env.d.ts to include PACK_STOREFRONT_ID as part of your Env interface.

interface Env {
  ...
  PACK_STOREFRONT_ID: string;
  ...
}

2. Update server.ts imports from @pack/hydrogen

// server.ts
import { 
  createPackClient, 
  PackSession, 
  handleRequest 
} from '@pack/hydrogen';

1. Import PackSession which replaces PreviewSession
2. Import new handleRequest function

3. Update session storage

// server.ts
// packSession was previously previewSession
const [cache, session, packSession] = await Promise.all([
  caches.open('hydrogen'),
  AppSession.init(request, [env.SESSION_SECRET]),
  PackSession.init(request, [env.SESSION_SECRET]),
]);

1. Update previewSession to packSession
2. Update PreviewSession.init() to PackSession.init()

4. Update createPackClient options

// server.ts
const pack = createPackClient({
  cache,
  waitUntil,
  storeId: env.PACK_STOREFRONT_ID,
  token: env.PACK_SECRET_TOKEN,
  session: packSession,
  contentEnvironment: env.PACK_CONTENT_ENVIRONMENT,
});

1. Add in storeId, from newly required environment variable
2. Pass in packSession as the session
3. No longer need preview in the create Pack client options

5. Use new Pack handleRequest function

// server.ts
/**
 * Create a Remix request handler and pass
 * Hydrogen's Storefront client to the loader context.
 */
const response = await handleRequest(
  pack,
  request,
  createRequestHandler({
    build: remixBuild,
    mode: process.env.NODE_ENV,
    getLoadContext: () => ({
      cache,
      waitUntil,
      session,
      storefront,
      cart,
      env,
      pack,
    }),
  }),
);

1. Pass in the pack client, request, and Shopify's createRequestHandler as arguments
2. Don't forget to add the pack client to the getLoadContext

How we track storefront KPIs without cookies

Pack is committed to respecting your shoppers' privacy while striving to maintain accuracy in pageview tracking.

We do not create device-persistent identifiers as they are classified as personal data under GDPR regulations. Additionally, we avoid the use of cookies, browser cache, and local storage to ensure compliance and protect user privacy.

Every HTTP request includes the IP address and User-Agent, which we use to create a daily-changing identifier. This identifier is created by hashing the visitor's IP address, User-Agent and a secret salt into a random string, helping us count unique visitors each day without storing any personal data like IP addresses or User-Agent details.

If a visitor comes to your site five times in one day, they're counted as one unique visitor. However, if they visit once a day on five different days, they're counted as five unique visitors.