Gatsby

Version tracking is handled automatically by the provider; no additional SSR markup is required.

Environment Variables

Add the following to your .env file:

GATSBY_INTELLIGEMS_ORG_ID=<Intelligems-ID>
GATSBY_STOREFRONT_ACCESS_TOKEN=<Storefront-API-Token>

Provider Integration

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

import { IntelligemsGatsbyProvider } from "@intelligems/headless/gatsby";

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

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 {
  IntelligemsGatsbyProvider,
  useIgTrack,
} from "@intelligems/headless/gatsby";

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

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

  return children;
};

export const wrapRootElement = ({ element }) => (
  <IntelligemsGatsbyProvider
    organizationId={process.env.GATSBY_INTELLIGEMS_ORG_ID}
    storefrontApiToken={process.env.GATSBY_STOREFRONT_ACCESS_TOKEN}
    antiFlicker={true}
  >
    <StoreProvider>
      <IntelligemsTracker>{element}</IntelligemsTracker>
    </StoreProvider>
  </IntelligemsGatsbyProvider>
);