Habár egyre könnyebb fejleszteni az AI segítségével, így is akadhat, hogy egyedi vagy előre készített webshop esetén nincsenek segítségünkre fejlesztők akik plusz adatokat tudnának beküldeni az egyes termékeinkhez GA4 vagy bármilyen más hirdetői és mérési rendszernek.
Ebben a cikkben átnézzük, hogyan van lehetőségünk külön fejlesztői kapacitás nélkül is plusz adatokat GTM segítségével beküldeni a már meglévő termék datalayer méréseinkkel együtt GA4-ben, vagy bármilyen más hirdetői platform felé.
Legyen szó arról, hogy aktuálisan hány kép vagy videó volt megtalálható a termékoldalon, milyen hosszú volt a leírás, volt-e akcióban vagy kiárusításban a termék, és még sorolhatnánk. Nem utolsó sorban a felhasználóhoz köthető adatokat is hozzárendelhetünk a termékekhez, rákattintott-e a részletes információkra, végig nézte-e a videót, megnyitotta-e a galériát, így a későbbiekben ezeket az információkat is felhasználhatjuk elemzéseink során. Ezzel is értékes adatokat nyerve, amelyből tovább fejleszthetjük oldalunkat, vagy még nagyobb rálátást kaphatunk a termékek felkapottságáról.
Hogyan néz ki a megoldás?
A megoldás viszonylag egyszerű, a legfontosabb az egész működéshez, hogy minden információ lementésekor, csatolnunk kell a termék SKU-t, vagy id-t is, amely a később felhasználáskor a kulcs lesz az átadásnál.
Ehhez a termék SKU-hoz rendelve minden információt, letárolva az adatokat visszahívhatjuk a szükséges pontokon, legyen szó kosárhoz adásról, checkoutról vagy a végső vásárlásról.
Adatok tárolása
A következő kódot azon a ponton érdemes lefuttatni, amikor már ismert a termék id, illetve a menteni kívánt adat. Ilyen például a kosárhoz adás. Azonban ha kapunk a termékoldalra való lépés során termékinformációkat, és valamilyen kattintás esemény során szeretnénk a szükséges információt menteni arra is van lehetőségünk.
Az adatokat pedig nem másban fogjuk tárolni mint a sessionStorage-ban, így a sütikkel járó megőrzési problémákat elkerüljük, és pontosan addig fognak tárolódni az adataink, ameddig szükségünk van rá, tehát a munkameneten belül.
A lenti kód megvizsgálja, hogy megtalálható-e a sessionStorage, illetve maga a menteni kívánt adat, majd ezeket menti a sessionStorage-ban együtt a termék SKU-val. Ha esetleg már létezne ilyen mentett információ, akkor beolvassa és ahhoz adja hozzá az új adatot. Így nyugottan több információt is hozzárendelhetünk ehhez a termék SKU-hoz nem csak egyet.
A kód:
<script> var gtmat = []; if (window['Storage'] && (typeof {{A menteni kívánt adat}} !== "undefined")){ var gtmcurrAT = { p_id : {{termék_id}}, //cseréljük ki a változót a termék SKU-val p_at : {{A menteni kívánt adat}} //cseréljük ki azzal az információval amit szeretnénk lementeni }; if(typeof {{Már meglévő adat}} !== null){ var gtmat = {{Már meglévő adat}}; } if (gtmat === null) { gtmat = []; } gtmat.push(gtmcurrAT); var gtmat = JSON.stringify(gtmat); sessionStorage.setItem('{item_neve}', gtmat); //az item_neve mezőbe írjunk be tetszés szerint egy értéket, amelyből később kiolvashatjuk az információt } </script> |
Adatok kiolvasás és átadása
Ha elérkeztünk ahhoz az eseményhez ahol szeretnénk átadni a plusz termékinformációt, akkor itt az ideje kiolvasni a sessionStorage-ban tárolt adatainkat. A sessionStorage-ból a következő egyszerű módon olvashatjuk ki az adatokat.
Első sorban készítsünk egy változót a GTM-ben:
function(){ return JSON.parse(sessionStorage.getItem('{item_neve}')); //használjuk a mentéskor beállított tetszés szerinti nevet. } |
Ezt a változót mentsük el tetszés szerinti névvel, pl: “JS – Fontos Plusz TermékInfo”
Végezetül érkezik a legfontosabb lépés, mégpedig a meglévő termékadat – datalayer – dúsítása, az újonnan letárolt információnkkal, akár a checkout, akár a purchase eseményeink során.
A lenti kód lényegében beolvassa a két információt, majd megkeresi a párokat termék SKU alapján, és ha ismert, akkor hozzáadja az új információnkat a már meglévő termékadatokhoz.
Ha nem ismert akkor lép a következő elemre és abban vizsgálja újból a termék SKU-t az általunk lementett információk között.
Fontos figyelnünk arra a lenti kódban, hogy az array1 esetében nekünk kell meghatározni a tömbböt. Ebben a tömbben megtalálhatónak kell lennie a termék(ek)nek, és kifejezetten ugyanannak a terméknek az SKU-ja amelyről információt mentettünk le az első lépés során.
Továbbá a két tömb SKU paraméterének típusára is figyelnünk kell, ha pl. integerként mentettük le az információinkat a termékoldalon, akkor az array1-ben lévő tömbben is integerként kell lennie a termék SKU-nak. Ellenkező esetben nem tudja párosítani a két elemet a kód, legalábbis hibára fog futni.
function(){ var array1 = {{checkout, vagy purchase eseménynél érkező tömb}}; var array2 = {{JS - Fontos Plusz TermékInfo}}; for (var i = 0; i < array1.length; i++) { var a = array2.find(function(p){return p.p_id == array1[i].id;}); if(typeof a !== "undefined"){ var product = array1[i]; product.{tömb_paramétere} = a.p_at; } } return array1; } |
Viszont a kód segítségével biztosított, hogy ha még hibára is futna a párosítás, akkor is átadásra kerül a weboldal által küldött információ, így biztonságban érezhetjük magunkat. Az adataink pedig biztosan beküldésre kerülnek a hirdetési rendszerek – GA4 felé még abban az esetben is ha undefined vagy null értéket kapunk vissza.
Összegzés
A fenti kód, illetve leírás csak egy példa, hogy rengeteg lehetőségünk van további fontos információkkal ellátni termékadatainkat a rendszerekben. Hogy mekkora ajtót nyit ki előttünk ez a beállítás, és hogy bármilyen plusz információt tároljunk termék szinten, és azokat felhasználjuk az elemzéskor.
Mielőtt minden adatunkat elkezdenénk menteni a fenti kód segítségével és GA4-be beküldeni érdemes megterveznünk, hogy melyeket szeretnénk biztosan felhasználni egy adatelemzés során. Így már biztosan tudjuk ez az információ egy LTV számítás, vagy egy adott kampány során olyan plusz konverziós pont lehet amire szeretnénk fókuszálni.
