Začněte zdarmaVyzkoušejte zdarma

← Centrum nápovědy

Hydrogen a headless storefronty

Sledujte Hydrogen nebo jiný headless storefront na Shopify pomocí modulu ROASaurus.

Headless storefront nemá motiv Shopify, takže se vložení do motivu ROASaurus nespouští. Místo toho v prohlížeči načtete malý ES module z ROASaurus. Nepotřebuje žádný npm balíček. Pokladna zůstává na Shopify, kde pixel aplikace ROASaurus (instaluje se spolu s aplikací) sleduje pokladny a nákupy stejně jako dosud a objednávky dál přicházejí přes webhooky objednávek Shopify.

1. Načtěte modul

Klíč obchodu najdete v ROASaurus na stránce Setup › Shopify daného obchodu. Modul načítejte jen v prohlížeči (ne při vykreslování na serveru):

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 sleduje každé vydání 1.x. Jednu konkrétní verzi připnete pomocí /headless@1.0.0.js, nebo vždy tu nejnovější načtete přes /headless.js. V Content Security Policy povolte https://app.roasaurus.com pro skripty i připojení (Hydrogen: scriptSrc a connectSrc v createContentSecurityPolicy).

2. Připojte analytiku Hydrogen

Hydrogen 2026-04 a starší: vykreslete tuto komponentu uvnitř <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 a novější: přidejte ROASaurus jako cíl (destination) na analytickou sběrnici, jednou při každém načtení stránky.

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

Modul odesílá page_viewed jako PageView, product_viewed jako ViewContent, product_added_to_cart jako AddToCart (s přidaným množstvím) a cart_viewed jako zobrazení košíku. ROASaurus je přeposílá vašim reklamním platformám se stejnými ID událostí, jaké používají jejich pixely v prohlížeči.

3. Zapište atributy košíku

ID návštěvníka v košíku propojuje objednávku Shopify s kliknutím na reklamu. V Hydrogenu aktualizujte atributy košíku pomocí roasaurus.cartAttributes(), když se do košíku přidá produkt (například CartForm s CartForm.ACTIONS.AttributesUpdateInput nebo cart.updateAttributes() v akci košíku). Zachovejte atributy, které košík už má.

U jiných headless storefrontů je může zapisovat přímo modul, a to přes Storefront API s veřejným tokenem:

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 načte atributy košíku, přidá _tl, ID kliknutí a trh a uloží je pomocí cartAttributesUpdate. Košík zaznamenaný se souhlasem se navíc propojí s návštěvníkem, takže se objednávka spáruje, i když atributy chybí.

Souhlas

Modul se řídí Customer Privacy API od Shopify (window.Shopify.customerPrivacy), které Hydrogen načítá se svým nastavením consent. Dokud není známa marketingová volba zákazníka, události čekají. Když zákazník souhlas odmítne, neuchovává se žádné ID návštěvníka, ID kliknutí ani atribut košíku, události se odesílají bez identifikátorů a nepřeposílají se reklamním platformám. Pokud používáte vlastní cookie lištu, zavolejte roasaurus.setConsent(true) nebo setConsent(false).

Další volání

Pořád si nevíte rady? Napište nám.