Pack Digital

Client-side Rendering is currently available

We are currently only compatible with SWC minification (the default). The Terser minification with Pack Digital will error out during the build process.

Environment Variables

Add the following to your .env file:

NEXT_PUBLIC_INTELLIGEMS_ORG_ID=<Intelligems-ID>
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=<Storefront-API-Token>

Provider Integration

The IntelligemsPackProvider component stores Intelligems data in React Context so hooks and components can access it throughout your app.

import { IntelligemsPackProvider } from "@intelligems/headless/pack";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <IntelligemsPackProvider
        organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
        storefrontApiToken={
          process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
        }
        activeCurrencyCode="USD" // Must be provided
        antiFlicker={true}
      >
        ...
      </IntelligemsPackProvider>
    </>
  );
}

Page Views Tracking

useIgTrack is a client-side hook tracking page views.

To provide accurate analytics ensure it is configured with valid parameters:

• cartOrCheckoutToken

• currency

• country

import React from "react";

import {
  IntelligemsPackProvider,
  useIgTrack,
} from "@intelligems/headless/pack";

const IntelligemsTracker = () => {
  const { checkout } = React.useContext(StoreContext);

  useIgTrack({
    cartOrCheckoutToken: checkout?.id,
    currency: checkout?.totalTaxV2?.currencyCode,
    country: "US",
  });

  return null;
};

export default function App({ children }) {
  return (
    <IntelligemsPackProvider
      organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
      storefrontApiToken={
        process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
      }
      antiFlicker={true}
    >
      <StoreProvider>
        <IntelligemsTracker />
        {children}
      </StoreProvider>
    </IntelligemsPackProvider>
  );
}