Az ügyfelek visszajelzésének gyűjtése fontos lépés egy cég életében. A weboldalas kérdőívek esetében azonnali információkat kaphatunk egy új termékről, egy módosításról, vagy egy olyan aspektusáról a weboldalnak, amelyre még nem is gondoltunk. Sok esetben ez egy popup-on keresztül történik, ahol a felhasználó szövegesen adhat visszajelzést, jobb esetben egy csúszka, vagy 1-5-ös skálán keresztül.
Körbenézve a piacon számos megoldást találhatunk egy ilyen popup kérdőív, űrlap elkészítéséhez, azonban könnyen találhatjuk magunkat egy több száz dolláros előfizetés markában. Értelemszerűen ezeknek a fejlesztése, az adataink tárolása, az eszköz folyamatos fejlődése költséges, így meg is kell békélnünk az árával.
Szerencsére találhatunk olyan alternatív megoldásokat is, amelyekkel egy kis kerülő beépítésével egy elég jól működő popupot készíthetünk, amely kérdőív eredményeit azonnal egy Google Táblázatban kapjuk meg. Ebben a cikkben ennek a kivitelezését nézzük át. Mindenekelőtt érdemes megtervezni, hogyan kapcsolódhat a többi adatunkhoz a megszerzett információ.
Popup előkészítése
Az első lépés lesz a popup előkészítése. Rengeteg sablont, illetve template-t találhatunk az interneten keresztül, így bátran keressünk néhányat. Érdemes a codepen.io oldalán elindulni, ahol számos példát találunk, és egyúttal az oldal kódszerkesztőjében személyre szabhatjuk is a popupot.
A lenti beágyazásban is található egy példa, amelyet mi hoztunk létre, és nyugodtan másolható. Lényegében bal oldalt található egy kép, míg jobb oldalt a figyelemfelhívó szöveg. A kód még ebben a formájában nem teljesen használható, hiszen magát a triggert, azt, hogy mikor fog megjelenni, majd a Google Tag Managerben fogjuk beállítani. Habár ez már egy kész popup, magát az űrlapot, ahol az információt begyűjtjük, a következő fejezetben nézzük át.
See the Pen
Popup template by Sándor Kecskés (@sandor_kecskes)
on CodePen.
https://codepen.io/sandor_kecskes/pen/BaXMEyR
A fenti kódban, egy egyszerű csúszka segítségével adhat visszajelzést a felhasználó, amit az éppen aktuális kérdéskör alapján módosíthatunk. Akár egy feliratkoztató űrlappá alakíthatjuk, vagy részletesebb, akár szöveges mezővel ellátott visszajelzést is kérhetünk.
Űrlap előkészítése
Mielőtt azt hinnénk, hogy már kész is vagyunk, a legfontosabb lépés következik, hiszen az űrlap mögött, valamilyen rendszernek is állnia kell, ahol ezek a visszajelzések begyűjtése és tárolása is történik. Ha előfizetünk egy popup rendszerre, akkor ott ezt a háttérrendszert, a válaszok tárolását automatikusan megkapjuk, azonban a mi esetünkben mindent manuálisan végzünk el, így erre is egy megoldást kell keresnünk.
Már több leírás is található a következő beállításhoz, amelyet használni fogunk. Mégpedig a Google Formst, avagy az Űrlapokat. Az eszköz használatát kissé tovább gondolva, megoldhatjuk, hogy az általunk készített popupban lévő űrlap, megegyezzen a Google Formsban felépítettel. Egyúttal amikor a felhasználó rákattint a visszajelzés küldése lehetőségre, akkor az egy a Google Formsban kitöltött válasznak feleljen meg. A megoldás nagyszerűsége, hogy így azonnal minden választ egy Google Táblázatban fogunk megkapni, amelyben lévő adatokat azonnal elemezhetünk, de akár prezentációt is könnyen készíthetünk belőlük.
Tehát lépjünk a https://docs.google.com/forms/ oldalra, majd hozzunk létre egy új űrlapot. Várhatóan már ismert maga a platform, így hozzuk létre a szükséges kérdéseket, állítsuk be a kérdés típusát. Ismételten az itt beállított kérdéseket a popupban lévő űrlapban is be kell állítanunk.
Ha készen vagyunk a kérdések létrehozásával, akkor a jobb felső sarokban található három pöttyre kattintva válasszuk a Get pre-filled link lehetőséget.
Ekkor az űrlap kitöltésére érkezünk, ahol kiválaszthatunk egyes értékeket, majd a Get link opcióval lekérhetjük az előre kitöltött űrlap linkjét. Ami hasonlóan fog kinézni:
https://docs.google.com/forms/d/e/1FAIpQLSddHRA9kzLJFe_PqH2KdmgdAKKSgHh0oAAjB-DIQYl5Vt9RFw/viewform?usp=pp_url&entry.1776425210=3
Popup űrlap beállítása
Miután elkészítettük a linkünket, ezt felhasználva tudunk tovább lépni, és a popupban lévő űrlapot átalakítani ennek megfelelően. Minden Google Űrlap egy egyedi azonosítót tartalmaz, ami a /d/e/ után következő kódrészlet. Amikor kimásoljuk ezt a linket, akkor a végén egy “viewform” részt találunk, azonban a Google-nek hála van lehetőségünk módosítani, és ezt átalakítani “formResponse” akcióra, így már is hívás befogadására alkalmas lesz a link.
Ha figyelmesek voltunk akkor az előző codepen előnézetben már szerepelt egy kész űrlap, de most nézzük át pontosabban. Az előbb említett linkre a form action részében lesz szükségünk. Ahogy láthatjuk a formResponse után már nincs szükségünk további paraméterekre ezen a ponton.
A 3-as ponton észrevehetjük, hogy egy input mező található, aminek a name értéke megegyezik a linkben található további paraméterével, mint pl. az entry.1776425210. Így lesz lehetőségünk minden egyes mezőt behivatkozni a popup űrlapunkban, amit a Google Formsban hoztunk létre. Tehát ha több kérdést szeretnénk használni hasonló formában készítsünk különböző inputokat, amelyek természetesen különbözhetnek a range típustól. Lehet akár text, checkbox vagy email.
A 4-es pontban végül egy űrlap elküldése gomb található, amivel a felhasználó beküldheti a válaszát.
Ha jelenleg rákattintanánk a küldés gombra, akkor az oldal egy-az-egyben átirányítana a Google Forms oldalára. Ezt ugye szeretnénk elkerülni, és pontosan ezt a célt szolgálja a fenti képen lévő 2-es pont. Ebben meghatározzuk a targetet, tehát a célt, hogy hova legyen átirányítva a felhasználó, ami egy üres iframe lesz, a lenti kód alapján.
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
A gyakorlatban nem fog történni semmi, mégis a háttérben meghatározott ez a lépés.
Ha készen vagyunk a popuppal, és az űrlap behivatkozásával, akkor léphetünk a GTM-ben történő használatra.
Popup beállítása GTM-ben
A következő lépés, hogy az elkészített kódunkat egy Custom HTML, vagy Egyedi HTML blokkban helyezzük a Google Tag Managerben. Ehhez a lépéshez hozzunk létre egy új taget, vagy címkét, majd másoljuk be a kódunkat. Figyeljünk arra, hogy ha a codepen.io felületén dolgoztunk, hogy a CSS részt egy <style> blokkba helyezzük, míg a JS részt, egy <script> blokkba.
Ezt követően jöhet a trigger beállítása, vagyis az az esemény, amikor megjelenjen a popup. Ehhez pedig a GTM-ben található lehetőségek tárházát tudjuk használni.
A következőket lefutásokat választhatjuk, és állíthatjuk be:
- Adott oldalon azonnal megjelenés,
- Adott oldalon, megvárva, míg biztosan minden elem betöltődött,
- Kattintásokra, bármilyen elemre az oldalon,
- Űrlap kitöltésre, információ megjelenésre,
- YouTube videó megtekintésekor,
- Egyedi eseményekkor,
- Időzítés alapján,
- A fenti pontok kombinációja esetén
Egy pontot fogunk nem megtalálni, amelyet sok popup ajánl, az pedig az exit-intent, vagyis amikor a felhasználó elhagyni próbálja az oldalt. Erre is szerencsénkre kész megoldást találunk. Többek között az Analytics Mania oldalán, de a beforeunload eseményt is felhasználhatjuk erre. Viszont az utóbbival vigyázzunk, mert közbeszólhat a weboldal működésében.
Egyéb fontos beállítások
Amire még érdemes figyelnünk, és lekezelnünk egy ilyen popup futtatása során, az az, hogy a felhasználónak ne minden egyes oldalmegtekintéssel jelenjen meg. Erre is már megoldást kínál a fentebb linkelt kód. Ugyanis bezárás során letárolásra kerül egy süti gtmPopupClosed paraméter néven, amelynek értéke true lesz a bezárást követően. Ennek jelenleg 1 nap a tárolási ideje, de növelhetjük 1 hétre vagy csökkenthetjük akár 12 órára.
Ezt követően készíthetünk GTM-ben egy változót, amellyel figyeljük ennek a sütinek az értékét.
És egy Exception, vagy blokkoló triggerrel pedig megakadályozhatjuk hogy megjelenjen a felhasználónak a popup.
A sikeres kitöltést is hasonlóan követhetjük, ha erre egy külön kitételt készítünk a fenti megoldás alapján, és annak a felhasználónak már biztosan nem fog megjelenni a popup.
GTM Popup teljesítményének mérése
Amiről még nem esett szó, az a Popup mérése, ugyanis ezt is automatikusan megkapjuk, amikor egy popup kezelői rendszerre előfizetünk. Semmi pánik, ez is ugyanúgy megoldható a kód alapján. Az egész alapját a GA4 fogja képezni, mivel oda fogjuk beküldeni egyrészt a popup megjelenését, a sikeres kitöltését, illetve a bezárását.
Ebben az esetben nincs más teendőnk, csak a HTML kódot, illetve a releváns JS kódot módosítani, és data layereket készíteni. A dokumentációban található segítség alapján, a következő kódok hozzáadása történt.
Jól látható, hogy a HTML kódban bekerült a megjelenésre vonatkozó datalayer, a sikeres kitöltés funkcióhoz, a hozzá tartozó datalayer, míg a bezárásnál is hasonló módon hozzáadásra került a kód.
Ha készen vagyunk, akkor ezt követően létrehozhatjuk a hozzá tartozó GA4 eseményeket GTM-en belül. Ehhez hozzunk létre egy új címkét, amelyben a GA4 eseményt válasszuk ki, és a trigger, vagyis a lefutását, az adott eseményhez kötjük.
Ezt végezzük el minden datalayer esetében, és már is készen vagyunk a méréssel.
Megéri manuálisan létrehozni egy ilyen popupot?
Ha gyorsan azonnal szeretnénk egy gyors popup-ot létrehoznunk, akkor a kész dobozos megoldások lesznek várhatóan jók a számunkra. Ott nem kell törődnünk a kódolással, vagy a lefutás beállításával.
Viszont, amennyiben rendelkezünk egy kevés GTM és HTML kódolási tudással, akkor igen, sokkal részletgazdagabb popupokat hozhatunk létre, és sokkal több lehetőségünk van meghatározni, hogy milyen esetben jelenjen meg a popup. Várhatóan költséghatékonyabb megoldás lesz, lényegében ingyenes megoldásról beszélünk, a befektetett munkát leszámítva.
A bekért információkat is még van lehetőségünk bővíteni, nem csak a felhasználó által megadott adatokkal, hanem például IP cím alapján város begyűjtésével. Természetesen erről a felhasználót is tájékoztatni kell, azonban ehhez hasonló megoldásokkal nem biztos, hogy rendelkeznek egyes eszközök.
Még akkor lehet egy jó megoldás, ha egy popup-ot folyamatosan szeretnénk futtatni, akár több hónapig, mivel a sikeres kitöltés esetén például soha többé nem jelenik meg a felhasználónak a popup. Ez az egyes popup rendszerek árazási stratégiája miatt megérheti ezzel a módszerrel elkészíteni, hiszen a legtöbb esetben popup megjelenés alapján kapunk limitet.
Források:
