docs.article_back

docs.nav_links

Pixel de conversie pe Shopify

Instalează pixelul de conversie Styrar pe Shopify folosind un Custom Pixel.

ClaudeChatGPTCursor

Shopify nu mai permite inserarea unui tag <script> brut în checkout — urmărirea terților trece prin Custom Pixels, un mediu izolat (sandboxed) construit pe API-ul Customer Events al Shopify. Acest ghid arată cum să integrezi pixelul de conversie Styrar într-un pixel personalizat.

Sandbox-ul nu îți oferă acces direct la DOM, așa că, în loc să inserezi tag-ul de script al Styrar, apelezi direct endpoint-ul de urmărire cu fetch de fiecare dată când se declanșează un eveniment Shopify de tip customer event.

În curând: configurare automată cu aplicația Shopify Styrar

Când aplicația Shopify Styrar va fi disponibilă și instalată în magazinul tău (și legată de contul tău Styrar), Styrar va plasa pixelul de conversie pentru tine în Settings → Customer events. Nu va trebui să lipești cod Custom Pixel și nici să permiți manual api.styrar.com.

Până atunci, folosește pașii Custom Pixel de mai jos.

Configurare

  1. În admin-ul tău Shopify, accesează Settings → Customer events → Add custom pixel.

  2. Denumește-l (de exemplu „Styrar conversions") și adaugă un cod precum acesta:

    JavaScript
    analytics.subscribe('checkout_completed', (event) => {
  const url = new URL(window.location.href);
  const clickToken = url.searchParams.get('styrar_ck') ||
    (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
  if (!clickToken) return;

  fetch('https://api.styrar.com/v1/pixel/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      clickToken,
      eventName: 'purchase',
      value: event.data.checkout.totalPrice.amount,
      eventData: { currency: event.data.checkout.totalPrice.currencyCode },
    }),
    keepalive: true,
  });
});

    Abonează-te la orice eveniment se potrivește conversiei care te interesează — checkout_completed, payment_info_submitted, product_added_to_cart, și altele sunt toate disponibile.

  3. Permite accesul la rețea. Shopify blochează implicit cererile de ieșire din pixelii personalizați. În setările aceluiași pixel, adaugă api.styrar.com la Permissions → Connect to third-party servers, altfel cererea de mai sus va eșua silențios.

  4. Setează pixelul ca Active.

O notă despre token-ul de click

Sandbox-ul pixelului Shopify nu poate citi localStorage așa cum o poate face o pagină normală, așa că styrar_ck trebuie să fie încă prezent în URL (sau dus mai departe ca atribut de coș) până când se declanșează evenimentul tău. Dacă fluxul tău de checkout elimină parametrul de query înainte de checkout_completed, capturează token-ul mai devreme — la page_viewed — și stochează-l ca atribut de coș pentru a-l putea citi mai târziu.

Acest lucru folosește în continuare exact același endpoint public, neautentificat, POST /v1/pixel/track, ca pe orice altă platformă.

Conexe