Frameworks

Shopify Hydrogen

Shopify Hydrogen analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue.

#Add the script

1. #Put your site ID in an environment variable

   Also add it to Env in env.d.ts.

   export async function loader(args: Route.LoaderArgs) {
     // …your existing loader code
     return {
       ...deferredData,
       ...criticalData,
       stickybeakSiteId: args.context.env.PUBLIC_STICKYBEAK_SITE_ID,
     };
   }

   Add PUBLIC_STICKYBEAK_SITE_ID?: string; to the Env interface in env.d.ts so TypeScript knows about it.

2. #Add the tag to the Layout

   Pass the existing Hydrogen nonce to the tag in app/root.tsx:

   export function Layout({ children }: { children?: React.ReactNode }) {
     const nonce = useNonce();
     const data = useRouteLoaderData<RootLoader>("root");
   
     return (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           <meta name="viewport" content="width=device-width,initial-scale=1" />
           <Meta />
           <Links />
           {data?.stickybeakSiteId && (
             <script
               nonce={nonce}
               defer
               data-site={data.stickybeakSiteId}
               data-domain="example.com"
               src="https://app.usestickybeak.com/_cfw/s.js"
             />
           )}
         </head>
         <body>
           {children}
           <ScrollRestoration nonce={nonce} />
           <Scripts nonce={nonce} />
         </body>
       </html>
     );
   }

   Use your store's own domain for data-domain, not the myshopify.com or Oxygen preview address.

3. #Allow Stickybeak in the content security policy

   Add the origin to connectSrc in app/entry.server.tsx:

   const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     shop: {
       checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
       storeDomain: context.env.PUBLIC_STORE_DOMAIN,
     },
     connectSrc: ["https://app.usestickybeak.com"],
   });

   The nonce means scriptSrc needs no change.

4. #Deploy

   Deploy to Oxygen or your host; local development is not counted.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to links or buttons. For component events, use the React Router helper. See Custom goals.

<Link to="/collections/all" data-goal="shop_all_click">Shop all</Link>

<CartForm
  route="/cart"
  action={CartForm.ACTIONS.LinesAdd}
  inputs={{ lines }}
>
  <button type="submit" onClick={() => track("add_to_cart", { product: handle })}>
    Add to cart
  </button>
</CartForm>

#Track purchases

Shopify checkout runs on Shopify's pages, not in Hydrogen, so Stickybeak cannot record completed orders there. Track add_to_cart and initiate_checkout without revenue or amount; see Shopify checkout and Revenue.

#Page changes

React Router counts new paths. Product-variant query changes do not. See Single-page apps.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.