Безплатен пробен периодОпитайте безплатно

← Помощен център

Hydrogen и headless витрини

Проследявайте Hydrogen или друга headless витрина на Shopify с модула на ROASaurus.

Headless витрината няма тема в Shopify, затова вграждането на ROASaurus в темата не се изпълнява. Вместо това зареждате в браузъра малък ES module от ROASaurus. Не е нужен npm пакет. Страницата за плащане остава в Shopify, където app pixel на ROASaurus (инсталиран заедно с приложението) проследява започнатите плащания и покупките както досега, а поръчките продължават да пристигат чрез webhook-овете на Shopify за поръчки.

1. Заредете модула

Ключът на магазина се намира на страницата Setup › Shopify на магазина в ROASaurus. Зареждайте модула само в браузъра (не по време на рендиране на сървъра):

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 следва всяка версия 1.x. Фиксирайте една точна версия с /headless@1.0.0.js или винаги вземайте най-новата с /headless.js. Разрешете https://app.roasaurus.com във вашата Content Security Policy за скриптове и връзки (Hydrogen: scriptSrc и connectSrc в createContentSecurityPolicy).

2. Свържете аналитиката на Hydrogen

Hydrogen 2026-04 и по-стари версии: рендирайте този компонент вътре в <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 и по-нови версии: добавете ROASaurus като дестинация в analytics bus, веднъж при всяко зареждане на страница.

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

Модулът изпраща page_viewed като PageView, product_viewed като ViewContent, product_added_to_cart като AddToCart (с добавеното количество) и cart_viewed като преглед на количката. ROASaurus ги препраща към рекламните ви платформи със същите ID на събитията като техните пиксели в браузъра.

3. Запишете атрибутите на количката

ID на посетителя в количката свързва поръчката в Shopify с кликването върху рекламата. В Hydrogen обновявайте атрибутите на количката с roasaurus.cartAttributes(), когато се добави продукт (например CartForm с CartForm.ACTIONS.AttributesUpdateInput или cart.updateAttributes() в action-а на количката). Запазете атрибутите, които количката вече има.

Другите headless витрини могат да оставят модула да ги записва чрез Storefront API с публичен токен:

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

Модулът чете атрибутите на количката, добавя _tl, click ID-тата и пазара и ги записва с cartAttributesUpdate. Количка, видяна със съгласие, се свързва и с посетителя, така че поръчката се съпоставя дори когато атрибутите липсват.

Съгласие

Модулът следва Customer Privacy API на Shopify (window.Shopify.customerPrivacy), който Hydrogen зарежда със своите настройки consent. Докато изборът на купувача за маркетинг не е известен, събитията изчакват. Ако откаже, не се пази нито ID на посетителя, нито click ID, нито атрибут на количката, а събитията се изпращат без идентификатори и не се препращат към рекламните платформи. Ако използвате собствен банер, извикайте roasaurus.setConsent(true) или setConsent(false).

Други извиквания

Все още не се получава? Пишете ни.