Hydrogen og headless-nettbutikker

Spor en Hydrogen-nettbutikk eller en annen headless Shopify-nettbutikk med ROASaurus-modulen.

En headless-nettbutikk har ikke noe Shopify-tema, så ROASaurus-appinnbyggingen i temaet kjører ikke. I stedet laster du inn en liten ES-modul fra ROASaurus i nettleseren. Den trenger ingen npm-pakke. Checkout blir værende på Shopify, der app-pixelen til ROASaurus (installert sammen med appen) sporer checkouts og kjøp som før, og bestillinger kommer fortsatt inn via Shopifys bestillings-webhooks.

1. Last inn modulen

Butikknøkkelen din står på siden Setup › Shopify for butikken i ROASaurus. Last inn modulen bare i nettleseren (ikke under serverrendering):

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ølger alle 1.x-versjoner. Lås én bestemt versjon med /headless@1.0.0.js, eller bruk alltid den nyeste med /headless.js. Tillat https://app.roasaurus.com i Content Security Policy-en din for skript og tilkoblinger (Hydrogen: scriptSrc og connectSrc i createContentSecurityPolicy).

2. Koble til analytics i Hydrogen

Hydrogen 2026-04 og eldre: render denne komponenten inne i <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 og nyere: legg til ROASaurus som destinasjon på analytics-bussen, én gang per sideinnlasting.

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

Modulen sender page_viewed som PageView, product_viewed som ViewContent, product_added_to_cart som AddToCart (antallet som ble lagt til) og cart_viewed som en handlekurvvisning. ROASaurus videresender dem til annonseplattformene dine med de samme event-ID-ene som plattformenes nettleserpixler.

3. Skriv handlekurvattributtene

Besøks-ID-en på handlekurven kobler Shopify-bestillingen til annonseklikket. I Hydrogen oppdaterer du handlekurvens attributter med roasaurus.cartAttributes() når et produkt legges til (for eksempel et CartForm med CartForm.ACTIONS.AttributesUpdateInput, eller cart.updateAttributes() i handlekurvens action). Behold attributtene handlekurven allerede har.

Andre headless-nettbutikker kan la modulen skrive dem via Storefront API med et offentlig 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 leser handlekurvens attributter, legger til _tl, click id-ene og markedet, og lagrer dem med cartAttributesUpdate. En handlekurv som er sett med samtykke, kobles også til den besøkende, så bestillingen matches selv når attributtene mangler.

Samtykke

Modulen følger Shopifys Customer Privacy API (window.Shopify.customerPrivacy), som Hydrogen laster inn med sine consent-innstillinger. Inntil kundens valg for markedsføring er kjent, venter eventene. Hvis kunden avslår, lagres ingen besøks-ID, click id eller handlekurvattributt, og eventene sendes uten identifikatorer og videresendes ikke til annonseplattformer. Med ditt eget banner kaller du roasaurus.setConsent(true) eller setConsent(false).

Andre kall

roasaurus.track('Lead', {value: 50, currency: 'EUR'}) sender hvilken som helst event.
roasaurus.identify({email}) kobler en registrering til besøket (med samtykke).
roasaurus.handle('product_viewed', payload) tar imot payloads i Hydrogen-format fra andre rammeverk.

Står du fast? Send oss en e-post.