Pack Storefront KPI Events
For events to work you must have ^@pack/hydrogen@1.0.0
installed on your project and update your server.ts
.
This new version of @pack/hydrogen
introduces new requirements. Follow our guide here, to prevent any unwanted side effects.
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fstorefront-kpis.1f3541be.png&w=3840&q=75)
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.
Make sure to add this into your Hydrogen storefront environment variables too. You can do this by going to Shopify > Hydrogen > Your Storefront > Storefront settings > Environment and variables > Add variables
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';
- Import
PackSession
which replacesPreviewSession
- 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]),
]);
- Update
previewSession
topackSession
- Update
PreviewSession.init()
toPackSession.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,
});
- Add in
storeId
, from newly required environment variable - Pass in
packSession
as thesession
- 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,
}),
}),
);
- Pass in the
pack
client,request
, and Shopify'screateRequestHandler
as arguments - Don't forget to add the
pack
client to thegetLoadContext
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.