Az-Alap-(Base)-Barion-Pixel-implementacioja: Difference between revisions

From Barion Documentation
Jump to navigation Jump to search
(Created page with "__NOTOC__ {{PageTitle|title= Az Alap (Base) Barion Pixel implementációja}} = Előkészületek = A legfontosabb dolog, amire az Alap (Base) Barion Pixel implementációjáho...")
 
No edit summary
 
(10 intermediate revisions by 3 users not shown)
Line 6: Line 6:
A Pixel ID beillesztésekor ügyelj arra, hogy a mintával azonos módon kerüljön be, tehát ne kerüljön bele esetleges extra idézőjel vagy zárójel, az egyetlen különbség a példakódtól a középső tíz és az utolsó két karakter lehet.
A Pixel ID beillesztésekor ügyelj arra, hogy a mintával azonos módon kerüljön be, tehát ne kerüljön bele esetleges extra idézőjel vagy zárójel, az egyetlen különbség a példakódtól a középső tíz és az utolsó két karakter lehet.


{{NotificationBox|title=IMPORTANT|text=
{{NotificationBox|title=FONTOS|text=
A boltod Barion Pixel ID-ját a Barion Tárcában találod. Minden bolthoz (minden egyedi POSKey-hez) külön Barion Pixel ID tartozik.
A boltod Barion Pixel ID-ját a Barion Tárcában találod. Minden bolthoz (minden egyedi POSKey-hez) külön Barion Pixel ID tartozik. A Barion Pixel ID-t a tárcádba belépve az ’Elfogadóhely kezelése’ menüpontban az elfogadóhely mellett a ’Műveletek’, majd a ’Részletek’ gombra kattintva találod meg.
|color=#FF0000}}
|color=#FF0000}}


{{NotificationBox|title=IMPORTANT|text=
{{NotificationBox|title=FONTOS|text=
Minden Barion Pixel ID a következő formátumú; először a "BP" karakterek, majd tíz karakter, majd két szám, amely három csoportot kötőjelek választanak el, ahogy a példában is látszik. A hibás megadás vagy rossz formátum a Pixel hibás működését okozza.<br>
Minden Barion Pixel ID a következő formátumú; először a "BP" karakterek, majd tíz karakter, majd két szám, amely három csoportot kötőjelek választanak el, ahogy a példában is látszik. A hibás megadás vagy rossz formátum a Pixel hibás működését okozza.<br>
Győződj meg róla, hogy a webshopod Barion Pixel ID-ját az alábbi példakódban található mindkét helyre beillesztetted, amiket a piros kiemelés mutat. A Barion Pixel ID eltér a próba és az éles Barion rendszereken.
Győződj meg róla, hogy a webshopod Barion Pixel ID-ját az alábbi példakódban található mindkét helyre beillesztetted, amiket a piros kiemelés mutat. A Barion Pixel ID eltér a próba és az éles Barion rendszereken.
Line 31: Line 31:
             scriptElement.src = 'https://pixel.barion.com/bp.js';
             scriptElement.src = 'https://pixel.barion.com/bp.js';
             firstScript.parentNode.insertBefore(scriptElement, firstScript);
             firstScript.parentNode.insertBefore(scriptElement, firstScript);
     
            window['barion_pixel_id'] = </nowiki><span style="color:red">'BP-0000000000-00'</span><nowiki>;           
 
             // Send init event
             // Send init event
             bp('init', 'addBarionPixelId', </nowiki><span style="color:red">'BP-0000000000-00'</span><nowiki>);
             bp('init', 'addBarionPixelId', window['barion_pixel_id']);
         </script>
         </script>


Line 47: Line 48:
Minél magasabban van a kód az oldalon annál jobb, mert maga a kód minimális idő alatt lefut, mivel a Barion Pixel funkcióinak nagy része külső forrásból van betöltve aszinkron módon, tehát nem fogja akadályozni vagy lassítani az oldal működését. Emellett elengedhetetlen, hogy egyszerűen az oldalba legyen helyezve a kód, hogy az oldallal együtt töltődhessen be. Hozzájáruláskezelési szoftver alkalmazása esetén fontos, hogy ezzel a kóddal ne foglalkozzon, mivel működése a csalásmegelőzési célokhoz is szükséges.
Minél magasabban van a kód az oldalon annál jobb, mert maga a kód minimális idő alatt lefut, mivel a Barion Pixel funkcióinak nagy része külső forrásból van betöltve aszinkron módon, tehát nem fogja akadályozni vagy lassítani az oldal működését. Emellett elengedhetetlen, hogy egyszerűen az oldalba legyen helyezve a kód, hogy az oldallal együtt töltődhessen be. Hozzájáruláskezelési szoftver alkalmazása esetén fontos, hogy ezzel a kóddal ne foglalkozzon, mivel működése a csalásmegelőzési célokhoz is szükséges.


== Static HTML pages ==
== Statikus HTML oldalak ==
 
If your site is served as a single HTML page optionally extended with CSS or JS files, but not pregenerated server-side, or as a collection of such pages, simply paste the code into the head of each and every page that you serve. If you don't know if your pages fall into this category, if your webshop doesn't use PHP, Ruby, AngularJS or some other server-side language, then it usually does.
 
== Dynamic HTML pages ==
 
If your site is dynamically generated by server-side templating software (such as PHP, ERB, CSHTML or Jinja), or you use a server side language to preprocess your HTML pages, you should also make sure to have the code in the head of every page of your site. The best practice to do this is to use a persistent layout HTML document which stores the elements of your site that are loaded into every page (such as navigation bars and external JS or CSS libraries), and paste our code into it. If you want, you can also create a loadable subpage usually called a template with our code, and include that page in your layout. The important thing is to ensure that our code appears in every HTML document that you serve as part of your webshop.
 
= Implementation through third party services =


Implementing the Base Barion Pixel is fully supported by the webshop providers UNAS ([[Az Alap (Base) és a Teljes (Full) Barion Pixel implementációja UNAS webshopokban|see documentation]]) and Shoprenter ([[Az Alap (Base) Barion Pixel implementációja Shoprenter webshopokban|see documentation]]).
Ha az oldalad egyetlen HTML oldalként valósul meg, esetleg külső JS vagy CSS fájlokkal kiegészítve, amit szerver oldalon nem módosítasz, vagy ilyen oldalak halmazaként létezik, egyszerűen illeszd a kódot minden kiszolgált oldal fejlécébe. Ha saját készítésű oldalad van, ami nem használ szerver oldali nyelveket vagy keretrendszereket, mint a PHP, Ruby vagy az AngularJS, valószínűleg ebbe a katágóriába tartozik.


We also support implementing the Base Barion Pixel through the Google Tag Manager ([[Implementing the Barion Pixel through the Google Tag Manager|see documentation]]).
== Dinamikusan generált HTML oldalak ==


= How it works =
Ha az oldaladat valamilyen szerver oldali szofverrel generálod (pl. PHP, ERB, CSHTML or Jinja), vagy valamely szerveroldali nyelvvel előfeldolgozod a HTML oldalaidat, figyelj arra, hogy minden oldal fejlécébe kerüljön bele az alapkód. Erre a bevett gyakorlat egy perzisztens layout dokumentum alkalmazása, ami a minden oldalon megjelenő elemeket tartalmazza (pl. az oldalsávot vagy CSS és JS könyvtárakat), amibe a mi kódunkat is be tudod illeszteni. Ha akarod, egy betölthető aloldalt is csinálhatsz, ami szerveroldalon belekerül a layoutba, ami tartalmazza a mi kódunkat. Az egyetlen fontos dolog, hogy az összes a webshopod részeként kiszolgált HTML oldalban legyen benne a mi kódunk.


The Base Barion Pixel by itself serves two purposes. It loads the Barion Pixel code, comprised of a JS file called "bp.js" containing the functions of the Pixel and an HTML document named "barion.html" that is used for placing third-party cookies into your webpage. The other function, which is performed by the "bp" function call is to send an "init" event towards our servers which initializes the session if not already present and also tracks the page view event and some general, mostly technical data about the user. In itself, the Base Barion Pixel will not perform any marketing-related functions and it will not load any further code into your users' browser.
= Külső szolgáltatáson keresztüli implementáció =


You can view what data the Pixel sends yourself in your browser's console. The message text after implementation is usually "Testing message", which means your Pixel has not yet been authorized to actually send any data besides the type of the event that is triggered. After Barion authorizes your Pixel to send user data, this changes to "Sending message". Below this message, the actual data that is sent or would be sent can be inspected, but in the case of the "init" event, this data is filled by the Pixel automatically.
Az Alap (Base) Barion Pixel implementációja támogatva van az UNAS webáruházakban ([[Az Alap (Base) és a Teljes (Full) Barion Pixel implementációja UNAS webshopokban|lásd a dokumentációt]]) és a Shoprenter webáruházakban ([[Az Alap (Base) és a Teljes (Full) Barion Pixel implementációja Shoprenter webshopokban|lásd a dokumentációt]]).


It is also important to note that since your website and Barion have a legitimate interest in preventing payment fraud, the Base Barion Pixel should be loaded irrespective of other marketing consent management software. We will not use any data that lack marketing consent for marketing related purposes, only to combat attempts at payment fraud. This is fully compliant with the General Data Protection Regulation 2016/679 of the European Union and any other regulations that implement this nationally.
Ezen kívül támogatjuk a Google Tag Manager-en keresztüli implementációt ([[Az Alap (Base) Barion Pixel implementációja a Google Tag Managerben|lásd a dokumentációt]]).

Latest revision as of 13:13, 3 February 2021

Az Alap (Base) Barion Pixel implementációja

Előkészületek

A legfontosabb dolog, amire az Alap (Base) Barion Pixel implementációjához szükséged van, az a boltod Barion Pixel ID-ja. Ezt a Pixel ID-t kell az alábbi kódba mindkét pirossal jelölt helyen beillesztened.
A Pixel ID beillesztésekor ügyelj arra, hogy a mintával azonos módon kerüljön be, tehát ne kerüljön bele esetleges extra idézőjel vagy zárójel, az egyetlen különbség a példakódtól a középső tíz és az utolsó két karakter lehet.

FONTOS
A boltod Barion Pixel ID-ját a Barion Tárcában találod. Minden bolthoz (minden egyedi POSKey-hez) külön Barion Pixel ID tartozik. A Barion Pixel ID-t a tárcádba belépve az ’Elfogadóhely kezelése’ menüpontban az elfogadóhely mellett a ’Műveletek’, majd a ’Részletek’ gombra kattintva találod meg.
FONTOS
Minden Barion Pixel ID a következő formátumú; először a "BP" karakterek, majd tíz karakter, majd két szám, amely három csoportot kötőjelek választanak el, ahogy a példában is látszik. A hibás megadás vagy rossz formátum a Pixel hibás működését okozza.
Győződj meg róla, hogy a webshopod Barion Pixel ID-ját az alábbi példakódban található mindkét helyre beillesztetted, amiket a piros kiemelés mutat. A Barion Pixel ID eltér a próba és az éles Barion rendszereken.

Az alapkód implementációja

   
        <script>
            // Create BP element on the window
            window["bp"] = window["bp"] || function () {
                (window["bp"].q = window["bp"].q || []).push(arguments);
            };
            window["bp"].l = 1 * new Date();
    
            // Insert a script tag on the top of the head to load bp.js
            scriptElement = document.createElement("script");
            firstScript = document.getElementsByTagName("script")[0];
            scriptElement.async = true;
            scriptElement.src = 'https://pixel.barion.com/bp.js';
            firstScript.parentNode.insertBefore(scriptElement, firstScript);
            window['barion_pixel_id'] = 'BP-0000000000-00';            

            // Send init event
            bp('init', 'addBarionPixelId', window['barion_pixel_id']);
        </script>

        <noscript>
            <img height="1" width="1" style="display:none" alt="Barion Pixel" src="https://pixel.barion.com/a.gif?ba_pixel_id='BP-0000000000-00'&ev=contentView&noscript=1">
        </noscript>
    

Implementáció közvetlenül HTML-be

Ha közvetlen hozzáférésed van a weboldalad kódjához, azaz a megjelenített oldalak HTML kódját közvetlenül tudod szerkeszteni, illeszd az Alap (Base) Barion Pixel kódot a weboldalad '<head>' tagjébe. Ez az oldal tetején a doctype deklarációk alatt található, és az oldal metaadatait tartalmazza, mint például az oldal címe.

Minél magasabban van a kód az oldalon annál jobb, mert maga a kód minimális idő alatt lefut, mivel a Barion Pixel funkcióinak nagy része külső forrásból van betöltve aszinkron módon, tehát nem fogja akadályozni vagy lassítani az oldal működését. Emellett elengedhetetlen, hogy egyszerűen az oldalba legyen helyezve a kód, hogy az oldallal együtt töltődhessen be. Hozzájáruláskezelési szoftver alkalmazása esetén fontos, hogy ezzel a kóddal ne foglalkozzon, mivel működése a csalásmegelőzési célokhoz is szükséges.

Statikus HTML oldalak

Ha az oldalad egyetlen HTML oldalként valósul meg, esetleg külső JS vagy CSS fájlokkal kiegészítve, amit szerver oldalon nem módosítasz, vagy ilyen oldalak halmazaként létezik, egyszerűen illeszd a kódot minden kiszolgált oldal fejlécébe. Ha saját készítésű oldalad van, ami nem használ szerver oldali nyelveket vagy keretrendszereket, mint a PHP, Ruby vagy az AngularJS, valószínűleg ebbe a katágóriába tartozik.

Dinamikusan generált HTML oldalak

Ha az oldaladat valamilyen szerver oldali szofverrel generálod (pl. PHP, ERB, CSHTML or Jinja), vagy valamely szerveroldali nyelvvel előfeldolgozod a HTML oldalaidat, figyelj arra, hogy minden oldal fejlécébe kerüljön bele az alapkód. Erre a bevett gyakorlat egy perzisztens layout dokumentum alkalmazása, ami a minden oldalon megjelenő elemeket tartalmazza (pl. az oldalsávot vagy CSS és JS könyvtárakat), amibe a mi kódunkat is be tudod illeszteni. Ha akarod, egy betölthető aloldalt is csinálhatsz, ami szerveroldalon belekerül a layoutba, ami tartalmazza a mi kódunkat. Az egyetlen fontos dolog, hogy az összes a webshopod részeként kiszolgált HTML oldalban legyen benne a mi kódunk.

Külső szolgáltatáson keresztüli implementáció

Az Alap (Base) Barion Pixel implementációja támogatva van az UNAS webáruházakban (lásd a dokumentációt) és a Shoprenter webáruházakban (lásd a dokumentációt).

Ezen kívül támogatjuk a Google Tag Manager-en keresztüli implementációt (lásd a dokumentációt).