Hydrogen och headless-butiker

Spåra en Hydrogen-butik eller en annan headless Shopify-butik med ROASaurus-modulen.

En headless-butik har inget Shopify-tema, så ROASaurus-teminbäddningen körs inte. I stället laddar du en liten ES-modul från ROASaurus i webbläsaren. Den kräver inget npm-paket. Kassan ligger kvar på Shopify, där ROASaurus app-pixel (som installeras med appen) spårar kassan och köpen precis som tidigare, och ordrar kommer fortfarande in via Shopifys orderwebhooks.

1. Ladda modulen

Din butiksnyckel finns på butikens sida Setup › Shopify i ROASaurus. Ladda modulen bara i webbläsaren (inte under serverrenderingen):

const {createRoasaurus} = await import('https://app.roasaurus.com/headless@1.js');
const roasaurus = createRoasaurus({
  storeKey: 'YOUR_STORE_KEY',
  market: 'eu',      // optional: the Shopify Market handle of this storefront
  country: 'NL',     // optional: the shopper's country
});

/headless@1.js följer varje 1.x-version. Lås en exakt version med /headless@1.0.0.js, eller ta alltid den senaste med /headless.js. Tillåt https://app.roasaurus.com i din Content Security Policy för skript och anslutningar (Hydrogen: scriptSrc och connectSrc i createContentSecurityPolicy).

2. Koppla in analytics i Hydrogen

Hydrogen 2026-04 och tidigare: rendera den här komponenten inuti <Analytics.Provider>.

import {useAnalytics} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function RoasaurusAnalytics() {
  const {subscribe, register} = useAnalytics();
  const {ready} = register('ROASaurus');
  useEffect(() => {
    import(/* @vite-ignore */ 'https://app.roasaurus.com/headless@1.js').then(({createRoasaurus}) => {
      const roasaurus = createRoasaurus({storeKey: 'YOUR_STORE_KEY'});
      roasaurus.subscribeHydrogen(subscribe);
      ready();
    });
  }, []);
  return null;
}

Hydrogen 2026-10 och senare: lägg till ROASaurus som destination på analytics-bussen, en gång per sidladdning.

const roasaurus = createRoasaurus({storeKey: 'YOUR_STORE_KEY'});
roasaurus.addToBus(window.Shopify.analytics);

Modulen skickar page_viewed som PageView, product_viewed som ViewContent, product_added_to_cart som AddToCart (den tillagda kvantiteten) och cart_viewed som en varukorgsvisning. ROASaurus vidarebefordrar dem till dina annonsplattformar med samma händelse-id:n som plattformarnas webbläsarpixlar.

3. Skriv varukorgsattributen

Besökar-id:t på varukorgen kopplar Shopify-ordern till annonsklicket. I Hydrogen uppdaterar du varukorgens attribut med roasaurus.cartAttributes() när en produkt läggs till (till exempel ett CartForm med CartForm.ACTIONS.AttributesUpdateInput, eller cart.updateAttributes() i varukorgens action). Behåll de attribut som varukorgen redan har.

Andra headless-butiker kan låta modulen skriva dem via Storefront API med en publik token:

const roasaurus = createRoasaurus({
  storeKey: 'YOUR_STORE_KEY',
  shopDomain: 'your-store.myshopify.com',
  storefrontAccessToken: 'PUBLIC_STOREFRONT_TOKEN',
});
await roasaurus.beforeCheckout(cart);   // before you send the shopper to cart.checkoutUrl

Den läser varukorgens attribut, lägger till _tl, klick-id:na och marknaden och sparar dem med cartAttributesUpdate. En varukorg som setts med samtycke kopplas också till besökaren, så ordern matchas även när attributen saknas.

Samtycke

Modulen följer Shopifys Customer Privacy API (window.Shopify.customerPrivacy), som Hydrogen laddar med sina consent-inställningar. Tills kundens val för marknadsföring är känt väntar händelserna. Om kunden tackar nej sparas inget besökar-id, klick-id eller varukorgsattribut, och händelserna skickas utan identifierare och vidarebefordras inte till annonsplattformar. Med en egen banner anropar du roasaurus.setConsent(true) eller setConsent(false).

Andra anrop

roasaurus.track('Lead', {value: 50, currency: 'EUR'}) skickar valfri händelse.
roasaurus.identify({email}) kopplar en registrering till besöket (med samtycke).
roasaurus.handle('product_viewed', payload) tar emot payloads i Hydrogen-format från andra ramverk.

Kör du fast? Mejla oss.