Az online vásárlás szépsége, hogy a webáruház a vásárlás teljes folyamatát nyomon tudja követni, majd ezeket az adatokat elemezve optimalizálni, vagy akár növelni tudja a vásárlások számát. Ez a cikk lépésről-lépésre bemutatja, hogyan állítsd be a webáruházadban az online vásárlás mérését.
Az online vásárlás mérésének feltétele, hogy a webáruház összes (nyilvános) oldala tartalmazzon Google Analytics mérőkódot. A beállításhoz továbbá Google Tag Managert is használni fogunk, hogy ne kelljen közvetlenül a kódba belenyúlni. Ezt a két eszközt mindenképpen tartalmaznia kell az oldalnak.
Mielőtt bármibe is belekezdenénk, lépjünk be a Google Analytics Ecommerce Settings menüpontjába és engedélyezzük az ecommerce funkciót, továbbá kapcsoljuk be az Enhanced Ecommerce lehetőséget. Egyelőre a Checkout labelinggel ne foglalkozz!
(Enhanced Ecommerce bekapcsolása)
Minden olyan oldalon, ahol a vásárlással kapcsolatban fontos információ jelenik meg (pl. termék oldal, kosár, fizetés) a számunkra fontos információkat a dataLayerbe kell elhelyeznünk. Ez egy konténer, ahonnan majd később az Analyticsbe át tudjuk küldeni az infókat.
A dataLayer segítségével a következő vásárlási pontokat tudjuk majd nyomon követni:
Minden egyes listaoldalon a következő kódot tegyük az oldalba. Ezzel mérni tudjuk az adott termék(ek) megjelenését és egyben a standard oldalletöltést is. Egyszerre akár több terméket is betehetünk a dataLayerbe:
dataLayer.push({ 'ecommerce': { 'currencyCode': 'HUF', // opcionális 'impressions': [ { 'name': 'Triblend Android T-Shirt', // vagy a név, vagy az id kötelező 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'list': 'Search Results', 'position': 1 }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'list': 'Search Results', 'position': 2 }] } });
Amikor egy felhasználó egy adott termékre kattint ezt a kódot kell használni:
dataLayer.push({ "event": "EEproductClick", //tetszőleges event név, később lesz jelentősége "ecommerce": { "currencyCode": "USD", "click": { "actionField": {"list":"category" }, "products": [{ "id":"9bf1d", "name":"Boss T-Shirt", "price":"37.00", "brand":"Converse", "category":" Men/Clothing/T-Shirts", "position":"2" }] } } });
Ezt a kódot minden egyes termékoldal megjelenésekor tartalmaznia kell az oldalnak.
dataLayer.push({ 'ecommerce': { 'detail': { 'actionField': {'list': 'Apparel Gallery'}, // a list opcionális. 'products': [{ 'name': 'Triblend Android T-Shirt', // név vagy id kötelező. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray' }] } } });
Ha a felhasználó a terméket a kosárba teszi, akkor ezt a kódot használjuk:
dataLayer.push({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'EUR', 'add': { 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1 }] } } });
Ha a felhasználó a terméket kiveszi a kosárból, akkor ezt a kódot használjuk:
dataLayer.push({ 'event': 'removeFromCart', 'ecommerce': { 'remove': { 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1 }] } } });
Onnantól kezdve, hogy a felhasználó a terméket a kosárba tette, elindul a checkout folyamat. Fontos, hogy a checkout-nak nem része maga a vásárlás, az egy másik rész lesz! A checkout folyamat összes pontját mérni tudjuk ugyanazzal az eventtel.
Checkout 1.lépés
dataLayer.push({ "event":"EEcheckout", //tesztőleges event név, ezt használjuk az összes lépésnél "ecommerce": { "checkout": { "actionField": {"step":1,"option" :"Kosár összefoglaló" }, "products": [{ "id":"98adsh", "name":" Converse T-Shirt", "price":"12.50", "brand":"Converse", "category":"Men/Clothing/T-Shirts", "variant":"red", "position":0, //megadhatjuk a termék kosárbeli pozícióját is "quantity":2 }, { "id":"m3g45", "name":"Boss Pants", "price":"38.00", "brand":"Boss", "category":"Men/Clothing/Pants", "variant":"blue", "position":1, "quantity":1 }] } } });
Checkout 2.lépés
A további checkout lépéseknél is fontos, hogy ugyanezt azt az eventet használjuk, amit az első pontban (pl "EEcheckout"). Fontos még, hogy a további pontoknál már nem szükséges újra megadni a termék adatait, elég volt az első lépésnél.
dataLayer.push({ "event":"EEcheckout", "ecommerce": { "checkout_option": { "actionField": {"step":1,"option": "Kosár összefoglaló"} //itt hivatkozunk az első lépésre } "checkout": { "actionField": {"step":2," option":"Fizetési info"} //ez a második lépés } } });
És akkor most kanyarodjunk kicsit vissza az Analyticshez. Az Enhanced Ecommerce bekapcsolásakor üresen hagytuk a Checkout labelling részt, mert nem tudtuk még milyen lépések lesznek. Most már tudjuk pontosan, hogy melyik checkout lépésnek mi a neve, ezért adjuk meg itt is a lépések neveit.
Amikor megtörtént a vásárlás, akkor a köszönöm oldalba ezt kell tenni:
Vásárlás:
dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': { 'id': 'T12345', // kötelező 'affiliation': 'Online Store', 'revenue': '35.43', // teljes összeg, áfával és szállítással 'tax':'4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' }, 'products': [{ // termékek listája 'name': 'Triblend Android T-Shirt', // név vagy id kötelező 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1, 'coupon': '' // opcionális }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'quantity': 1 }] } } });
Látható a kódban, hogy megjeleníthető egy kuponkód is a termék mellett, tehát azt is követni tudjuk ha valaki ezzel vásárol az oldalon. Erről egy kicsit később lesz szó.
Figyelem: Ha a vásárló a fizetés után nem érkezik vissza a köszönöm oldalra, akkor a tranzakció nem fog bekerülni Analytics-be! Ha kíváncsi vagy még milyen okai lehetnek hogy eltér a tranzakciószám GA és a webshop motor között, akkor olvasd el ezt a cikket.
Visszatérítés:
Előfordulhat, hogy a vásárlást lemondja vagy a felhasználó vagy a webáruház. Ilyenkor a már beküldött vásárlást vissza tudjuk vonni az analyticsből ha hivatkozunk az eredeti tranzakciós id-ra ezzel a kóddal:
dataLayer.push({ 'ecommerce': { 'refund': { 'actionField': {'id': 'T12345'} // kötelező } } });
Ahogy fentebb egy kicsivel láthattad, ha valaki promóciós kóddal érkezik az oldalra, akkor a vásárlásához hozzá tudjuk kötni, hogy milyen kuponnal jött az oldalra, milyen kuponnal vásárolt.
dataLayer.push({ 'ecommerce': { 'promoView': { 'promotions': [ // akár több promo kódot is kezelhetünk { 'id': 'JUNE_PROMO13', // id vagy név kötelező 'name': 'June Sale', 'creative': 'banner1', 'position': 'slot1' }, { 'id': 'FREE_SHIP13', 'name': 'Free Shipping Promo', 'creative': 'skyscraper1', 'position': 'slot2' }] } } });
Azzal, hogy minden oldalban elhelyeztük a szükséges kódokat, még nem kapja meg ezeket az Analytics! Ahhoz, hogy az összes event és információ átmenjen a GTM-ben kicsit módosítanunk kell az alap PageView tagünket.
Ha mindent jól csináltunk, akkor az adatokat az Analytics Conversions / Ecommerce menüpontjában tudjuk ellenőrizni:
analytics ecommerce adatok ellenőrzése
Vásárlói magatartás:
Checkout folyamat:
Ajánlom figyelmedbe az online vásárlás mérésével foglalkozó következő posztomat, amiben azt mutatom be, hogyan lehet egy vásárlási tranzakciót utólag módosítani vagy törölni:
Egy webáruház működése során előfordul, hogy a vásárlási tranzakciót valamiért módosítani / törölni kell. Mutatom hogyan csináld!
Ha segítségre lenne szükséged webáruházad beállításában, ajánlom figyelmedbe webanalitikai szolgáltatásunkat!
Havidíjas SEO és PPC ajánlatok Kis- és Középvállalkozások számára.
HAVIDÍJAS SEO AJÁNLATOK PPC AJÁNLATOK GA4 ANALITIKA BEÁLLÍTÁSA hírlevélre feliratkozóknak heti rendszerességgel küldjük meg a legfrissebb SEO híreket, posztokat és újdonságokat.