Návod pro Shopify / Shopify Plus eshopy: jak rozjet server-side tracking přes DataNostro bez vlastní Shopify aplikace. Používáme nativní Shopify Custom Pixel + GTM web/server kontejnery, takže máš plnou kontrolu nad consent a datalayerem.

Pro koho je tenhle návod

Shopify nebo Shopify Plus (potřebuješ Customer Events sekci, dostupné na všech tarifech)
Doba: 75–120 minut první nastavení
Pro headless Shopify (Hydrogen, Storefront API) je postup jiný — viz dolní sekce

Co budeš potřebovat

Shopify admin přístup (Owner nebo Staff s Customer Events oprávněním)
Účet v Google Tag Manager — web + sGTM container
DNS přístup pro tracking subdoménu
DataNostro účet a vytvořený kontejner

Krok 1 — Vytvoř Custom Pixel s GTM datalayer bridge

Shopify od 2023 má Customer Events framework — sandboxed JavaScript, který emituje strukturované eventy. Tady přemostíme do dataLayer, který GTM rozumí.

Shopify admin → Settings → Customer Events → Add custom pixel.
Pojmenuj DataNostro GTM Bridge, customer privacy = data sale opt-out off (řeší Consent Mode), permission = Not Required (necháme rozhodnout cookie banner).
Do code editoru vlož:

// DataNostro GTM Bridge — emits dataLayer events from Shopify Customer Events
window.dataLayer = window.dataLayer || [];

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_view",
    page_location: event.context.window.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  const v = event.data.productVariant;
  window.dataLayer.push({
    event: "view_item",
    ecommerce: {
      currency: v.price.currencyCode,
      value: v.price.amount,
      items: [{
        item_id: v.product.id,
        item_name: v.product.title,
        item_variant: v.title,
        price: v.price.amount,
        quantity: 1,
      }],
    },
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  const line = event.data.cartLine;
  window.dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      currency: line.cost.totalAmount.currencyCode,
      value: line.cost.totalAmount.amount,
      items: [{
        item_id: line.merchandise.product.id,
        item_name: line.merchandise.product.title,
        price: line.cost.totalAmount.amount,
        quantity: line.quantity,
      }],
    },
  });
});

analytics.subscribe("checkout_completed", (event) => {
  const c = event.data.checkout;
  window.dataLayer.push({
    event: "purchase",
    ecommerce: {
      transaction_id: c.order.id,
      value: c.totalPrice.amount,
      currency: c.currencyCode,
      tax: c.totalTax ? c.totalTax.amount : 0,
      shipping: c.shippingLine ? c.shippingLine.price.amount : 0,
      items: c.lineItems.map(l => ({
        item_id: l.variant.product.id,
        item_name: l.title,
        item_variant: l.variant.title,
        price: l.variant.price.amount,
        quantity: l.quantity,
      })),
    },
  });
});

Save → enable. Tenhle pixel teď bude na všech stránkách (včetně checkoutu, který je u Shopify v izolovaném subdomain) automaticky emitovat GA4-formát eventy do window.dataLayer.

Krok 2 — Přidej GTM container do Shopify

Shopify nedovoluje přidat <script> tag do thematu jednoduše — ale skrz Custom Pixel + theme.liquid edit to půjde.

Shopify admin → Online Store → Themes → … → Edit code.
Otevři theme.liquid a hned za otevírací <head> vlož standardní GTM snippet:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Nahraď GTM-XXXXXX svým ID. Save.

⚠️ Pozor na Shopify Checkout: standardní theme.liquid se nenačítá v checkoutu (je to izolovaný subdoména). Custom Pixel z kroku 1 ale ano — proto je purchase event emitovaný správně i tam.

Krok 3 — Deployni sGTM kontejner v DataNostro

Stejně jako u jiných CMS:

V Google Tag Manager vytvoř nový Server container.
Admin → Export Container, stáhni JSON.
DataNostro dashboard → Kontejnery → Vytvořit nový → upload JSON.
DataNostro vrátí URL endpointu (např. track.tvujeshop.cz) a DNS pokyny.

Krok 4 — DNS

U DNS providera tvojí shop domény (ne myshopify.com — Shopify nedovolí měnit jeho DNS) přidej CNAME:

Type:   CNAME
Name:   track
Target: containers.datanostro.com
TTL:    300 (pro testování), pak 3600

Po propagaci (5–60 min) DataNostro vystaví Let's Encrypt SSL.

Krok 5 — Přepni Web GTM tagy na server-side

V GTM web containeru:

Vytvoř GA4 Configuration tag (pokud ještě nemáš).

Fields to Set:

Field: server_container_url
Value: https://track.tvujeshop.cz

Triggers: page_view, view_item, add_to_cart, purchase (názvy eventů z Custom Pixel kroku 1).
Submit → Publish.

Krok 6 — Test end-to-end

Shopify preview mode nebo password-protected store + udělej testovací nákup 1 Kč.
V DataNostro Aktivita sleduj real-time events.
V GA4 DebugView ověř purchase event s correct value + items.
V Meta Events Manager Test Events ověř Meta CAPI hit.

Headless Shopify (Hydrogen, Storefront API)

U headless setupu nepoužíváš theme.liquid — datalayer eventy posíláš ručně z React/Vue komponent. Použij analytics.publish nebo přímo window.dataLayer.push ve fetch hooks po commitu objednávky. Custom Pixel pro checkout v Hydrogen funguje stejně, protože Customer Events API je společné.

Časté problémy

„Purchase event chybí — vidím page_view, ale ne objednávku"

Custom Pixel se v checkoutu načítá izolovaně. Pokud událost checkout_completed nedorazí, zkontroluj Customer Events log v Shopify admin (Customer Events → Pixel detail → Errors). Nejčastější příčina: syntaxe v JS kódu.

„Shopify mi blokuje 3rd-party doménu"

Shopify má Content Security Policy, která omezuje, kam můžou eventy chodit. Custom Pixel běží v sandboxu — ten může volat libovolné domény přes fetch. Web GTM (z theme.liquid) také, pokud je povolený inline script (default je yes).

„Order ID v GA4 neodpovídá Shopify Order Number"

V Custom Pixelu používej c.order.id (interní ID). Pokud chceš zobrazované Order Number (např. #1042), použij c.order.name. Pak v GTM serverside transformuj zpět na transaction_id field.

Další kroky

Power-Ups — Cookie Keeper, Click ID Restorer — důležitější pro Shopify, kde Safari ITP řeže _ga cookie agresivně
Meta CAPI deduplication — Shopify často duplikuje purchase events mezi Pixel + CAPI
Google Ads Enhanced Conversions — využije e-mail z checkoutu pro lepší match

Shopify — instalace server-side trackingu (Custom Pixel + GTM)

Pro koho je tenhle návod

Co budeš potřebovat

Krok 1 — Vytvoř Custom Pixel s GTM datalayer bridge

Krok 2 — Přidej GTM container do Shopify

Krok 3 — Deployni sGTM kontejner v DataNostro

Krok 4 — DNS

Krok 5 — Přepni Web GTM tagy na server-side

Krok 6 — Test end-to-end

Headless Shopify (Hydrogen, Storefront API)

Časté problémy

„Purchase event chybí — vidím page_view, ale ne objednávku"

„Shopify mi blokuje 3rd-party doménu"

„Order ID v GA4 neodpovídá Shopify Order Number"

Další kroky

V této kategorii

Shopify — instalace server-side trackingu (Custom Pixel + GTM)

Pro koho je tenhle návod

Co budeš potřebovat

Krok 1 — Vytvoř Custom Pixel s GTM datalayer bridge

Krok 2 — Přidej GTM container do Shopify

Krok 3 — Deployni sGTM kontejner v DataNostro

Krok 4 — DNS

Krok 5 — Přepni Web GTM tagy na server-side

Krok 6 — Test end-to-end

Headless Shopify (Hydrogen, Storefront API)

Časté problémy

„Purchase event chybí — vidím page_view, ale ne objednávku"

„Shopify mi blokuje 3rd-party doménu"

„Order ID v GA4 neodpovídá Shopify Order Number"

Další kroky

V této kategorii

PrestaShop — instalace server-side trackingu

WordPress / WooCommerce — instalace server-side trackingu