Hydrogen og headless-storefronts

Spor en Hydrogen-storefront eller en anden headless Shopify-storefront med ROASaurus-modulet.

En headless-storefront har intet Shopify-theme, så ROASaurus' theme-embed kører ikke. I stedet indlæser du et lille ES-modul fra ROASaurus i browseren. Det kræver ingen npm-pakke. Checkout forbliver på Shopify, hvor ROASaurus' app pixel (installeret med appen) tracker checkouts og køb som før, og ordrer kommer stadig ind via Shopifys ordre-webhooks.

1. Indlæs modulet

Din shop-nøgle står på shoppens side Setup › Shopify i ROASaurus. Indlæs kun modulet i browseren (ikke under server-rendering):

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-udgivelser. Lås én bestemt version med /headless@1.0.0.js, eller tag altid den nyeste med /headless.js. Tillad https://app.roasaurus.com i din Content Security Policy for scripts og forbindelser (Hydrogen: scriptSrc og connectSrc i createContentSecurityPolicy).

2. Forbind analytics i Hydrogen

Hydrogen 2026-04 og tidligere: Render denne komponent inde 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 senere: Tilføj ROASaurus som destination på analytics-bussen, én gang pr. sideindlæsning.

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

Modulet sender page_viewed som PageView, product_viewed som ViewContent, product_added_to_cart som AddToCart (det tilføjede antal) og cart_viewed som en kurvvisning. ROASaurus videresender dem til dine annonceplatforme med de samme event-id'er som platformenes browserpixels.

3. Skriv kurvattributterne

Besøgs-id'et på kurven kobler Shopify-ordren til annoncekliket. I Hydrogen opdaterer du kurvens attributter med roasaurus.cartAttributes(), når et produkt tilføjes (for eksempel en CartForm med CartForm.ACTIONS.AttributesUpdateInput eller cart.updateAttributes() i kurvens action). Bevar de attributter, kurven allerede har.

Andre headless-storefronts kan lade modulet skrive dem via Storefront API med et offentligt 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

Det læser kurvens attributter, tilføjer _tl, klik-id'erne og markedet og gemmer dem med cartAttributesUpdate. En kurv, der er set med samtykke, knyttes også til den besøgende, så ordren matches, selv når attributterne mangler.

Samtykke

Modulet følger Shopifys Customer Privacy API (window.Shopify.customerPrivacy), som Hydrogen indlæser med sine consent-indstillinger. Indtil kundens valg om marketing kendes, venter events. Hvis kunden afviser, gemmes der intet besøgs-id, klik-id eller kurvattribut, og events sendes uden identifikatorer og videresendes ikke til annonceplatforme. Med dit eget banner kalder du roasaurus.setConsent(true) eller setConsent(false).

Andre kald

roasaurus.track('Lead', {value: 50, currency: 'EUR'}) sender et vilkårligt event.
roasaurus.identify({email}) knytter en tilmelding til besøget (med samtykke).
roasaurus.handle('product_viewed', payload) modtager payloads i Hydrogen-format fra andre frameworks.

Sidder du stadig fast? Skriv til os.