A Teljes (Full) Barion Pixel implmentációja

Előfeltételek

A teljes Barion Pixel implementálása előtt az Alap (Base) Barion Pixel implementálását kell elvégezned a webáruházadban. A teljes kód implementáláshoz nem szükséges megvárni az alap kód jóváhagyását, de azt vedd figyelembe, hogy csak jóváhagyott implementálás esetén kerülnek események elküldésre a Barion felé. Mivel a Teljes Barion Pixel - különös tekintettel a hozzájárulás-kezelés implementálására - adatokat továbbít a Barion felé marketing célú felhasználásra, ezért Neked külön megállapodás és jóváhagyás szükséges a webshopodra a Bariontól.

Hol kezdjem el?

A Teljes Barion Pixel implementálásának egy jó kiindulópontja a 'Tartalom megtekintése' (contentView) esemény bekötése, olyan esetekben amikor a contentType kulcs értéke 'Product'. Gyakran használjuk, mert ezt az eseményt minimum a termékoldalakon implementálni kell, viszonylagosan könnyű befűzni és oldalbetöltődéskor kell elküldeni. De ne felejtsd el, hogy további események bekötésére is szükség lesz, úgy mint a grantConsent, addToCart, initiateCheckout, initiatePurchase, purchase stb.

Első lépésben készíts egy JS objektumot, amely tartalmazza az esemény paramétereit. A részleteket lásd az Barion Pixel API referencia című fejezetben. Az alábbi példában mutatjuk hogyan tedd ezt meg:

A contentView esemény paraméterei termékoldalon egy JS objektumban.

       const contentViewProperties = {
           'contentType': 'Product',
           'currency': 'HUF',
           'id': 'item_42',
           'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
           'quantity': 10.0,
           'unit': 'pcs.',
           'unitPrice': 4990.0,
           'brand': 'Gollancz',
           'category': 'books|hardcover|scifi, books|hardcover|comedy',
           'customerValue': 150.0,
           'ean': '9780575115347',
           'imageUrl': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
           'list': 'ProductPage',
           'variant': 'hardcover'
       }

Ezt egyszerűen be kell illeszted az oldal JS kódjába, hogy minden oldalbetöltésekor végrehajtódjon. Ez azt jelenti, hogy ha egy egyszerű HTML oldalad van akkor betudod illeszteni azt egy script tag-be, vagy ha sablonrendszert használsz egy sablont hozhatsz létre ebből a kódból. A Google Tag Manager felhasználók ezt egy olyan tag-be is beilleszthetik, amely minden termékoldal-betöltésekor lefut. A paraméterek feltöltése túlmutat ezen dokumentáción mert az webáruházonként nagyon változó megoldást kívánna. A legvalószínűbb ahol ezeket a paramétereket megtalálod a GTM-hez az a Data Layer vagy javascript selector-okkal veszed ki közvetlenül a HTML-ből. Amennyiben a JS selector-okkal kevés gyakorlatod van nézd meg az oldal alján található rövid összefoglalót.

Az objektum létrehozása után az eseményt a "bp" függvény meghívásával küldhetjük el az alább látható módon. Az első paraméter mondja meg a Pixelnek, hogy ez egy felhasználó által aktivált esemény, a második paraméter az esemény neve, míg az utolsó átadott paraméterben az imént létrehozott objektumot kell tenni.

A contentView esemény elküldése

       bp('track', 'contentView', contentViewProperties);

Az esemény elküldéskor a „Testing message” sort generálja a böngésző konzoljában, amely elérhető a legtöbb böngészőben a fejlesztői eszközökben, amelyet az F12 billentyűvel hívhatunk meg. A Pixel implementációjának ellenőrzése és jóváhagyása után az üzenetek "Sending message" -re váltanak. Ugyanebben az üzenetben láthatod a létrehozott objektumot a Pixel által összegyűjtött egyéb adatokkal együtt. Ezek az adatok csak a Pixel jóváhagyása után kerülnek valójában elküldésre, de az esemény végrehajtásának funkciója a tesztelési időszakban is zavartalanul működik.

Egyéb események implementálása

Másik eseményt amit oldalbetöltésre kell küldeni éppen olyan könnyű implementálni mint a contentView eseményt. Például a vásárlási (purchase) esemény bekötése nagyon hasonló, építsd fel a JS objektumot a kívánt paramétereknek megfelelően az API dokumentáció szerint, és csak hívd meg a "bp" függvényt az ide való esemény névvel és az eseményhez tartozó JS objektummal.

Több eseményt azonban gombnyomásra kell küldened. Ez azt jelenti, hogy egy eseményfigyelőt szükséges elhelyezned az oldaladon, amely az esemény elküldését váltja ki ha egy bizonyos elemre kattintott a látogató az oldaladon. További információt találsz az eseményfigyelőkről és JS selector-okról az oldal alján található rövid összefoglalóban.

A 'bp' függvény hívását ugyanarra az elemre kell rákötni mint magát az eseményt. Csak egyszerűen hívd meg a 'bp' függvényt ha az oldalbetöltődés váltja ki az eseményt, vagy csak helyezd el egy callback függvényén az eseményfigyelőnek amennyiben klikkelés alapú az esemény, úgy ahogyan a lenti példában is láthatod.

Amikor egy gombra klikkelés a kiváltó esemény

       var clickProductProperties = {
           'contentType': 'Product',
           'currency': 'HUF',
           'id': 'item_42',
           'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
           'quantity': 1.0,
           'unit': 'pcs',
           'unitPrice': 2500.0,
           'brand': 'Gollancz',
           'category': 'books|hardcover|scifi, books|hardcover|comedy',
           'creative': 'book_42',
           'customerValue': 150.0,
           'ean': '9780575115347',
           'list': 'Checkout',
           'positioning': '1',
           'step': 2,
           'variant': 'hardcover'
       }

       // Use one of these to add the event listener to the button click (use only one):

       // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
       document.getElementById('book_42').addEventListener('click', function() {
           bp('track', 'clickProduct', clickProductProperties);
       });

       // jQuery (if you use jQuery, if in your console "$" is defined on your site)
       $("#book_42").click(function() {
           bp('track', 'clickProduct', clickProductProperties);
       });

Klikk alapú események bekötése lépésről lépésre

JS selectors

A JS selector-ok függvények egy csoportja, amit a kódodban használhatsz egy elem megtalálására a HTML dokumentumban. Ezeket úgy hívjuk mint: getElementById, getElementsByClassName, getElementsByName és getElementsByTagName, ezek bizonyos elemeket találnak meg az id, osztály, név attribútum vagy a címke nevének megfelelően.

Eseményfigyelők

A JavaScript a böngészőben lehetővé teszi olyan triggerek létrehozását, amelyek egyes felhasználói műveletek alapján futnak csak le. Ezt a funkcionalitást az "addEventListener" funkció valósítja meg és az oldal bármely eleméből meg lehet hívni, két bementi paramétert igényel. Az első az esemény típusa, amelyen az eseményt szükséges küldeni, ez különféle értékekre állítható, de pixel szempontjából ez szinte mindig a kattintás ('click') lesz. Ennek megfelelően az eseményt az váltja ki, ha a látogató rákatintt a kívánt elemre, mégpedig arra amelyhez az eseményfigyelő hozzá van rendelve. A második paraméter az úgynevezett visszahívási funkció. Ez a függvény fog végrehajtódni, amikor az eseményfigyelő aktiválódik. Ebben az esetben a "bp" függvényhívás lesz az amit végre kell hajtani. Lásd a fenti példán.

A-Teljes-(Full)-Barion-Pixel-implementacioja