Szerveroldali tagging Shopify-on Stape-pel: a teljes GTM-beállítás lépésről lépésre

A szerveroldali Google Tag Manager (server-side GTM) egyre inkább alapfelszerelés a komolyabb webáruházaknál: pontosabb mérést, hosszabb süti-élettartamot és jobb adatvédelmet ad, mint a hagyományos böngészőoldali követés. A beállítása viszont Shopify-on nem egy kattintás — sok apró lépésből áll, és van néhány buktató, ami elsőre nem magától értetődő. Ez az Analytics Mania videó a teljes folyamatot végigveszi a nulláról: a Stape-fiók létrehozásától egészen a Custom Loader és a Cookie Keeper bekapcsolásáig.

Az alábbi összefoglaló magyarul, fejezetenként követi a videó gondolatmenetét — hogy el tudd dönteni, megéri-e végignézned a teljes, közel 40 perces anyagot, és hogy legyen egy térképed a saját beállításodhoz. Ez a cikk nem a kattintós leírás pótlása (azt a videó sokkal jobban megmutatja), hanem a logika és a döntési pontok magyar átirata.

Mi az a Stape, és miért van róla külön videó?

Röviden: a Stape egy tárhelyszolgáltató kifejezetten a szerveroldali Google Tag Manager konténered futtatására. A szerveroldali GTM-hez ugyanis kell egy szerver, ami valahol fut — a Google alapból a saját felhőjét (Google Cloud Platform) kínálja erre, de az drágább és körülményesebb. A Stape ugyanezt a szerepet tölti be, csak lényegesen olcsóbban és egyszerűbben, miközben megbízható marad.

Miért érdemes a Stape-et választani?

• Kedvezőbb ár, mint a Google Cloud — a díjszabás a szerverre érkező kérések számán alapul, és van egy ingyenes csomag is, amivel nyugodtan kipróbálhatod, mielőtt fizetnél.
• Shopify-plugin — a Stape ad egy Shopify-alkalmazást, ami beinjektálja a webes GTM-konténert az oldalba, és elintéz néhány olyan dolgot, ami a szerveroldali követéshez kell (pl. a checkout követéséhez szükséges custom pixelt).
• Kész konténer-sablonok — a Stape GitHub-repójából letölthető, előre beállított GTM-sablonok (GA4, Google Ads, Meta) rengeteg kézi munkát megspórolnak.
• Power-upok — a Custom Loader (kevesebb böngészőbővítmény zavarja a mérést) és a Cookie Keeper (lejárt sütik újraélesztése) olyan extrák, amiket a Google Cloud alapból nem ad.
• Saját (al)domain proxyzás — a mérés a te doménedről fut, ami a süti-élettartam és az adatvédelem szempontjából is előny.

És hogy miért van erről külön videó? Mert a szerveroldali tagging Shopify-on egy önálló, alapozó munka: mielőtt bármilyen konkrét mérést (Facebook Conversions API-t, Google Ads konverziót, GA4-et) rákötnél, előbb fel kell építeni magát az infrastruktúrát — fiók, szerver-konténer, domain, plugin, sablonok. A rövidebb, „gyorsan bekötöm a Facebook CAPI-t 10 perc alatt" típusú videók (mint a Facebook Conversions API 10 perc alatt) ezt az egészet előfeltételként kezelik — vagyis feltételezik, hogy a Stape-alap már megvan. Ez a videó pontosan azt az alapot rakja le. Ha még nulláról indulsz, itt a helyed; ha a Stape már fut nálad, ugorhatsz a konkrét mérésekre.

Előfeltétel: saját (al)domain

A szerveroldali tagginghez a Shopify-boltodnak saját doménnel vagy aldoménnal kell rendelkeznie — a Stape ingyen adott *.stape.io doménjén ugyan futna a szerver, de akkor elesnél a szerveroldali mérés lényegi előnyeitől (a süti-élettartam meghosszabbítása, a GTM/GA proxyzása a saját doméneden keresztül). Ezért végig a saját aldoménedet érdemes használni.

Stape-fiók és szerver-konténer létrehozása

A folyamat a stape.io-n indul: regisztráció, majd a hosztolás régiójának kiválasztása (EU-s forgalomnál értelemszerűen EU). Ezután a Google Tag Manageren létrehozol egy szerver típusú konténert, és a kiszolgáló beállításánál a manuális provisioningot választod — nem az automatikusat, mert az a Google Cloudra telepítene, te viszont a Stape-et használod. A GTM-ből kimásolt konfigurációt beilleszted a Stape-be, kiválasztod a csomagot (a videóban az ingyeneset), és pár perc múlva fut a szervered.

Egyedi (al)domain hozzárendelése

A szerverhez saját aldomaint kötsz (a videóban pl. abc.gtmplayground.com). Két CNAME rekordot kell felvenned a DNS-szolgáltatódnál (a videóban Cloudflare, de bármi más is jó) — a proxyzást ki kell kapcsolni. A verifikáció Cloudflare-rel pár perc, más szolgáltatóknál akár 72 óra is lehet.

A Stape Shopify-plugin telepítése

A Shopify App Store-ból telepíted a Stape pluginját, és aktiválod a widgetet. A pluginban:

1. Beszúrod a webes GTM-konténer ID-ját (a web, nem a szerver konténerét), és megadod az előbb bekötött egyedi domaint.
2. A Data Layer fülön engedélyezed az e-commerce eseményeket — ehhez a plugin ad egy kódot, amit egy custom pixelként kell hozzáadni a Shopify Customer events közé (jogosultság: „not required"). Ez teszi elérhetővé a vásárlási adatokat a data layerben.

Enélkül a plugin ugyan telepítve van, de az adat még sehová nem megy — ahhoz a webes GTM-konténert is be kell állítani, hogy felszedje és továbbküldje az információt.

A konténer-sablonok importálása és beállítása

Itt jön a nagy időspórolás. A Stape GitHub-repója (shopify-gtm-container-templates) párban dolgozó sablonokat ad: minden mérési célhoz egy web- és egy szerver-sablon tartozik. Ha csak GA4 + Google Ads kell, azt a párt importálod; ha Facebook, akkor a másikat.

• A webes konténerbe importálod a web-sablont (admin → import container → merge).
• A szerver-konténerbe a szerver-sablont, ugyanígy.

Az automatikus import után is marad kézi munka: a Folders → Settings alatt ki kell tölteni néhány változót — a webes oldalon a GA4 measurement ID, a Meta pixel ID és a szerver-konténer URL-je; a szerver oldalon a Meta pixel ID és API token, valamint a Google Ads konverziós ID és label-ök (purchase, add to cart, begin checkout — mindegyiket a Google Ads felületén hozod létre, „set up using code" → Google Tag Manager).

Tesztelés: ahol a Shopify checkout mást csinál

A mérés ellenőrzése két részre bomlik, mert a Shopify checkoutján a webes GTM preview módja nem működik (a custom pixelek működése miatt):

• A checkout előtti oldalakon (termék, kosár) a szokásos preview mód + a GA4 DebugView működik: itt látod a view_item, add_to_cart eseményeket, ahogy a tagek tüzelnek és az adat megérkezik.
• A checkouton viszont a preview mód nem tölt be. Ilyenkor publikálni kell a webes konténert, és a böngésző fejlesztői eszközeivel (Network fül, collect kérésekre szűrve) nézed meg, mi megy ki a saját aldoménedre.

A page_location javítása a checkouton

Van egy alattomos részlet: a nem-checkout oldalakon a page_location szép és helyes, a checkouton viszont eltorzított, „web pixeles" URL kerül bele — ez a Shopify követési korlátaiból fakad. Ha ez zavar, a webes konténerben javíthatod:

1. A GA4 tagekhez adj egy page_location paramétert, aminek az értéke egy actual URL data layer változó.
2. A page view tag triggerét DOM ready-ről a state page_view eseményre állítsd át (különben néha lemaradna az actual URL-ről).
3. Biztonsági hálóként az actual URL változónak adj fallback (default) értéket — a beépített page location változót —, hogy ha az actual URL nem elérhető, akkor is legyen valami helyes.

Custom Loader és Cookie Keeper — a két power-up

A videó két záró lépése a Stape Shopify-pluginjában:

• Custom Loader: bekapcsolod a plugin megfelelő checkboxát, megadod a szerverből származó container identifier-t (a Stape → Power-ups → Custom Loader alatt generálod, Shopify platformot választva), és bejelölöd a GA4 adblock bypasst. Ez úgy módosítja a kérések URL-jét, hogy kevesebb böngészőbővítmény ismerje fel mérésként — így kevesebbet is blokkolnak belőle.
• Cookie Keeper: a sütik élettartamának meghosszabbítása — pontosabban a lejárt sütik újraélesztése. Ha egy látogató 8 nap után tér vissza és a sütijei már lejártak, a Cookie Keeper megpróbálja újra létrehozni őket. Ez fizetős funkció (bármelyik fizetős csomagban elérhető), és a Stape → Power-ups alatt kapcsolod be, kiválasztva, mely süticsoportokat (Stape, GA, LinkedIn stb.) hosszabbítsa meg.

Kulcs-tanulságok

• A Stape a szerveroldali GTM tárhelye — olcsóbb és egyszerűbb, mint a Google Cloud, ingyenes csomaggal és Shopify-specifikus extrákkal.
• Saját aldomain kötelező, és ne legyen mérésre utaló neve, különben a bővítmények blokkolhatják.
• A kész konténer-sablonok (GitHub) rengeteg időt spórolnak, de a mérési ID-kat és tokeneket kézzel kell bepótolni.
• A checkout külön eset: ott nincs preview mód, ezért publikálás után a fejlesztői eszközökkel tesztelsz; a page_location is torzulhat, ezt a webes konténerben javíthatod.
• A Custom Loader és a Cookie Keeper a szerveroldali tagging valódi hozzáadott értéke: kevesebb blokkolt mérés és tovább élő sütik.

Ha az alap megvan, jöhetnek a konkrét mérések: a Facebook Conversions API-t akár 10 perc alatt rákötheted, a Google Ads konverziókövetést szerveroldali GTM-mel pedig egy külön videó veszi végig. A GA4-alapokhoz a Google Analytics 4 bekötése Shopify-ra cikk ad kiindulást.

Forrás

Az eredeti (angol nyelvű) videó az Analytics Mania csatornától származik, a bemutatót Julius készítette. A teljes, lépésről lépésre kattintós beállításhoz nézd meg a fenti beágyazott videót — ez a cikk a gondolatmenet magyar összefoglalója, nem az eredeti tartalom pótlása.