Hydrogen i headless web-trgovine

Pratite Hydrogen ili drugu headless Shopify web-trgovinu pomoću ROASaurus modula.

Headless web-trgovina nema Shopify temu, pa se ROASaurus ugradnja u temu ne pokreće. Umjesto toga u pregledniku učitavate mali ES module s ROASaurusa. Nije potreban nikakav npm paket. Naplata ostaje na Shopifyju, gdje ROASaurus app piksel (instaliran zajedno s aplikacijom) i dalje prati naplate i kupnje kao i dosad, a narudžbe i dalje stižu putem Shopifyjevih webhookova za narudžbe.

1. Učitajte modul

Ključ trgovine nalazi se na stranici Setup › Shopify te trgovine u ROASaurusu. Modul učitajte samo u pregledniku (ne tijekom renderiranja na poslužitelju):

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 prati svako izdanje 1.x. Za jednu točno određenu verziju koristite /headless@1.0.0.js, a za uvijek najnoviju /headless.js. Dopustite https://app.roasaurus.com u svojoj Content Security Policy za skripte i veze (Hydrogen: scriptSrc i connectSrc u createContentSecurityPolicy).

2. Povežite Hydrogen analitiku

Hydrogen 2026-04 i stariji: renderirajte ovu komponentu unutar <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 i noviji: dodajte ROASaurus kao odredište na analitičku sabirnicu (analytics bus), jednom po učitavanju stranice.

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

Modul šalje page_viewed kao PageView, product_viewed kao ViewContent, product_added_to_cart kao AddToCart (s dodanom količinom) i cart_viewed kao pregled košarice. ROASaurus ih prosljeđuje vašim oglasnim platformama s istim ID-ovima događaja kao i njihovi pikseli u pregledniku.

3. Zapišite atribute košarice

ID posjetitelja na košarici povezuje Shopify narudžbu s klikom na oglas. U Hydrogenu ažurirajte atribute košarice pomoću roasaurus.cartAttributes() kada se doda proizvod (na primjer CartForm s CartForm.ACTIONS.AttributesUpdateInput ili cart.updateAttributes() u akciji košarice). Zadržite atribute koje košarica već ima.

Druge headless web-trgovine mogu prepustiti modulu da ih zapiše putem Storefront API-ja s javnim tokenom:

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

Modul čita atribute košarice, dodaje _tl, ID-ove klikova i tržište te ih sprema pomoću cartAttributesUpdate. Košarica zabilježena uz privolu također se povezuje s posjetiteljem, pa se narudžba poveže čak i kad atributi nedostaju.

Privola

Modul poštuje Shopifyjev Customer Privacy API (window.Shopify.customerPrivacy), koji Hydrogen učitava sa svojim postavkama consent. Dok se ne zna kupčev izbor za marketing, događaji čekaju. Ako kupac odbije, ne čuva se ni ID posjetitelja, ni ID klika, ni atribut košarice, a događaji se šalju bez identifikatora i ne prosljeđuju se oglasnim platformama. Ako imate vlastiti baner, pozovite roasaurus.setConsent(true) ili setConsent(false).

Ostali pozivi

roasaurus.track('Lead', {value: 50, currency: 'EUR'}) šalje bilo koji događaj.
roasaurus.identify({email}) povezuje registraciju s posjetom (uz privolu).
roasaurus.handle('product_viewed', payload) prima payloade u stilu Hydrogena iz drugih frameworka.

Još niste uspjeli? Pošaljite nam e-poruku.