Ugrás a fő tartalomra
Minden kollekcióSzervezőknekMarketing
Jegyértékesítés weboldalba építése
Jegyértékesítés weboldalba építése
Péter Kubovics avatar
Írta: Péter Kubovics
Több mint 2 héttel ezelőtt frissítve

A webes integrációval lehetőség nyílik a jegyértékesítés integrálására más weboldalakra egy widget segítségével. Így a vásárlók azon a weboldalon vásárolnak, amelyen a widget beépítésre kerül, és nem lesznek átirányítva a Cooltix oldalára.

Widget létrehozása

Minden eseményhez létrehozhatsz egy widgetet az admin felületen:
​Esemény > Marketing > Weboldal integráció

Amikor a widget létrejön, ki kell másolnod és be kell illesztened a céloldal kódjába arra a helyre, ahol a widgetnek meg kell jelennie. A kód a jövőben bármikor lemásolható, így bármikor módosíthatod a színeket.

Widget téma és szín

A widget létrehozásakor kiválaszthatod, hogy világos vagy sötét témát választasz, illetve beállíthatod az elsődleges színedet is, hogy illeszkedjen a weboldalad stílusához.

Integráció típusa

Két integráció közül választhatsz: a jegyek listájának megjelenítése közvetlenül a weboldalon, vagy elhelyezhetsz egy gombot, amely az oldal fölé nyíló ablakban nyitja meg a jegylistát.

A widget frissítése új verzióra

A Widget automatikusan frissíti magát a legújabb verzióra, neked nem kell tenned semmit hogy ez megtörténjen. Ha a régi, már nem támogatott Cooltix widgetet használod, akkor egyszerűen létrehozhatsz egy új widgetet, lecserélheted a régit a weboldalon, és a widget a jövőben frissíteni fogja magát.

Widget kódja

Termék lista közvetlenül a weboldalon

Az oldal body szekciójához add hozzá:

<iframe src="https://cooltix.com/widget/event-products/{eventId}?referrerUrl={referrerUrl}&theme=dark&primaryColorHex=ffffff" width="100%" height="100%" frameborder="0"></iframe>

Paraméterek

  • eventId az esemény azonosítója, amelynek termékeit meg szeretnéd jeleníteni. Az esemény Cooltix-es linkje tartalmazza, amit az admin felületről tudsz kimásolni.

  • theme (opcionális): az widget témája. Lehetséges értékek default (alapértelmezett Cooltix téma) vagy dark (sötét téma). Amennyiben a theme paraméter nincs beállítva, a widget a default témát használja.

  • primaryColorHex (opcionális): a widgetben használt elsődleges szín. Értéke tetszőleges szín kezdő '#' nélküli HEX reprezentációja lehet. Például #5433FF szín esetén 5433FF értéket kell küldeni.

  • referrerUrl (opcionális): az oldal URL-je, ahonnan a widgetet megnyitották. A vásárlás befejezése után a vásárló a vissza gombra kattintással erre az URL-re navigálhat. Amennyiben a referrerUrl paraméter nincs beállítva, akkor a widget megpróbálja automatikusan meghatározni a megnyitó oldal URL-jét.

  • date (opcionális): ismétlődő esemény esetén az előre kiválasztott időpont kezdő dátuma. Például a 2024. február 14. 10 órás kezdetű időpont kiválasztásához a 2024-02-14T10:00 értéket kell küldeni. Alapértelmezetten nincsen előre időpont kiválasztva.

  • locale (opcionális): a widget nyelve. Lehetséges értékek: hu, en, de, sr, ro. Az alapértelmezett nyelv a böngésző nyelve, ha támogatott, ellenkező esetben en.

  • discount (opcionális): az előre érvényesített kedvezmény kódja.

  • heroStyle (opcionális): az esemény részleteinek típusa. Lehetséges értékek: default (alapértelmezett) vagy hidden (rejtett, a hero nem jelenik meg). Amennyiben a heroStyle paraméter nincs beállítva, a widget a defaultstílust használja.

  • cookieConsent (opcionális): a Coolitx süti szabályzatának elfogadása. Lehetséges értékek: accepted (Cooltix sütik elfogadva), rejected (Cooltix sütik elutasítva). Amennyiben a cookieConsent paraméter nincs beállítva, a widget felkínálja a választási lehetőséget.

Termék lista felugró ablakban

1. lépés

Oldal head szekciójához add hozzá:

<script src="https://static.cooltix.com/widget.js" defer></script>

2. lépés

Oldal body szekciójához add hozzá:

<button data-cooltix-event-products='{eventId}' >Jegyek megtekintése</button>

Paraméterek

  • eventId az esemény azonosítója, amelynek termékeit meg szeretnéd jeleníteni. Tartalmazza a Cooltix linket az eseményhez, amelyet az admin felületről másolhatsz ki.

  • data-cooltix-theme (opcionális): a widget témája. Lehetséges értékek: default (alapértelmezett Cooltix téma) vagy dark (sötét téma). Ha a data-cooltix-theme paraméter nincs beállítva, a widget a default témát használja.

  • data-cooltix-primary-color-hex (opcionális): a widgetben használt elsődleges szín. Értéke tetszőleges szín kezdő '#' nélküli HEX reprezentációja lehet. Például #5433FF szín esetén 5433FF értéket kell küldeni.

  • data-cooltix-referrerUrl (opcionális): az oldal URL-je, ahonnan a widgetet megnyitották. A vásárlás befejezése után a vásárló a vissza gombra kattintva navigálhat erre az URL-re. Ha a data-cooltix-referrerUrl paraméter nincs beállítva, a widget megpróbálja automatikusan meghatározni a megnyitó oldal URL-jét.

  • data-cooltix-date (opcionális): Ha a widget meg van nyitva, egy megadott alkalom kerül kiválasztásra az olyan eseményeknél, amelyek több alkalommal rendelkeznek. Ha az alkalom nem létezik, már lezárult, vagy nincs megadva, akkor a vásárlónak kell választania egy alkalmat.

Pixel események követése widgettel

A widgeten belül a nyomkövetési kódok inicializálásra kerülnek, ha be lettek állítva az admin felületen. Mivel a widget iframe-et használ, további beállításokra van szükség a Google Analytics számára, hogy lehetővé tegye az események beillesztését a host oldalba ágyazott nyomkövetési kódban. A Meta Pixel esetén nem szükséges további beállítás.

Google Analytics widget nyomkövetés beállítása

Az események fogadásához a webhelyednek fel kell iratkoznia a 'message' típusú eseményekre, és továbbítani kell őket a Google Analytics felé. Az alábbi példa kód minden e-kereskedelmi eseményt továbbít, amelyet küldünk, de ezt tovább szűrheted az eseménynevek ellenőrzésével.

gtag.js használata esetén

<script>
window.addEventListener('message', event => {
if (event.data.ecommerce) {
gtag('event', event.data.event, event.data.ecommerce);
}
});
</script>

Google Tag Manager használata esetén

Ahhoz, hogy az iFrame események a Tag Manager-en keresztül eljussanak az Analytics-be, három címke (tag) szükséges:

  1. Események kinyerése az iFrame-ből. Ez minden oldalbetöltésnél lefut.

  2. GA4 inicializálása. Ez minden oldalbetöltésnél lefut.

  3. E-kereskedelmi események küldése a dataLayer-ből GA4-be. Ez csak e-kereskedelmi események esetén fut le.

1. Az események kinyerése az iFrame-ből

Adj hozzá egy egyedi HTML tag-et a Google Tag Manager-ben az alábbi kóddal, és használd a "Minden oldal - Oldal megtekintése"-t, mint trigger (aktiválási szabály).

<script>
window.addEventListener('message', event => {
if (event.data.ecommerce) {
window.dataLayer.push({ ecommerce: null }); window.dataLayer.push(event.data);
}
});
</script>

2. GA4 inicializálása

Adj hozzá egy GA4 konfigurációs (Configuration) tag-et a Google Tag Manager-ben, és használd a "Minden oldal - Oldal megtekintése"-t trigger-ként. Ezt a lépést már elvégezhetted, ha korábban hozzáadtad a GA4-et az oldalhoz.

3. E-kereskedelmi események küldése a dataLayer-ből GA4-be

Adj hozzá egy GA4 esemény (Event) tag-et a Google Tag Manager-ben. Használd a {{Event}}-et eseménynévként, és a Custom event-et, mint trigger a következő eseménynévvel:

view_item|view_item_list|select_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_payment_info|add_shipping_info|purchase

Választ kapott a kérdésére?