Ξεκινήστε δωρεάν δοκιμήΔοκιμάστε δωρεάν

← Κέντρο βοήθειας

Hydrogen και headless βιτρίνες

Παρακολουθήστε μια βιτρίνα Hydrogen ή άλλη headless βιτρίνα Shopify με το module του ROASaurus.

Μια headless βιτρίνα δεν έχει θέμα Shopify, επομένως το theme embed του ROASaurus δεν εκτελείται. Αντί γι’ αυτό, φορτώνετε στο πρόγραμμα περιήγησης ένα μικρό ES module από το ROASaurus. Δεν χρειάζεται πακέτο npm. Το checkout παραμένει στο Shopify, όπου το app pixel του ROASaurus (εγκαθίσταται μαζί με την εφαρμογή) παρακολουθεί τα checkouts και τις αγορές όπως πριν, και οι παραγγελίες εξακολουθούν να φτάνουν μέσω των webhooks παραγγελιών του Shopify.

1. Φορτώστε το module

Το store key σας βρίσκεται στη σελίδα Setup › Shopify του καταστήματος στο ROASaurus. Φορτώστε το module μόνο στο πρόγραμμα περιήγησης (όχι κατά το 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 ακολουθεί κάθε έκδοση 1.x. Κλειδώστε μία συγκεκριμένη έκδοση με το /headless@1.0.0.js ή παίρνετε πάντα την πιο πρόσφατη με το /headless.js. Επιτρέψτε το https://app.roasaurus.com στο Content Security Policy σας για scripts και συνδέσεις (Hydrogen: scriptSrc και connectSrc στο createContentSecurityPolicy).

2. Συνδέστε τα analytics του Hydrogen

Hydrogen 2026-04 και παλαιότερες εκδόσεις: κάντε render αυτό το component μέσα στο <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);

Το module στέλνει το page_viewed ως PageView, το product_viewed ως ViewContent, το product_added_to_cart ως AddToCart (με την ποσότητα που προστέθηκε) και το cart_viewed ως προβολή καλαθιού. Το ROASaurus τα προωθεί στις διαφημιστικές σας πλατφόρμες με τα ίδια ID συμβάντων με τα pixel προγράμματος περιήγησής τους.

3. Γράψτε τα cart attributes

Το ID επισκέπτη στο καλάθι συνδέει την παραγγελία του Shopify με το κλικ στη διαφήμιση. Στο Hydrogen, ενημερώστε τα cart attributes με το roasaurus.cartAttributes() όταν προστίθεται ένα προϊόν (για παράδειγμα με ένα CartForm με CartForm.ACTIONS.AttributesUpdateInput ή με το cart.updateAttributes() στο cart action σας). Διατηρήστε τα attributes που έχει ήδη το καλάθι.

Άλλες headless βιτρίνες μπορούν να αφήσουν το module να τα γράψει μέσω του Storefront API με ένα δημόσιο 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

Διαβάζει τα cart attributes, προσθέτει το _tl, τα click ID και την αγορά (market) και τα αποθηκεύει με το cartAttributesUpdate. Ένα καλάθι που καταγράφηκε με συγκατάθεση συνδέεται επίσης με τον επισκέπτη, ώστε η παραγγελία να αντιστοιχίζεται ακόμη κι όταν λείπουν τα attributes.

Συγκατάθεση

Το module ακολουθεί το Customer Privacy API του Shopify (window.Shopify.customerPrivacy), το οποίο το Hydrogen φορτώνει με τις ρυθμίσεις consent του. Μέχρι να γίνει γνωστή η επιλογή του αγοραστή για το μάρκετινγκ, τα συμβάντα περιμένουν. Αν αρνηθεί, δεν διατηρείται κανένα ID επισκέπτη, click ID ή cart attribute, και τα συμβάντα στέλνονται χωρίς αναγνωριστικά και δεν προωθούνται σε διαφημιστικές πλατφόρμες. Με δικό σας banner, καλέστε roasaurus.setConsent(true) ή setConsent(false).

Άλλες κλήσεις

Έχετε ακόμη πρόβλημα; Στείλτε μας email.