Alap-es-full-barion-pixel-implementacio-RequireJS-Magento-webaruhazakban

Az Alap és Teljes Barion Pixel implementálása RequireJS és/vagy Magento környezetben

A Barion Pixel alapértelmezett natív JavaScript-es alapkódja a Magento e-kereskedelmi platform és/vagy a RequireJS segítségével felépített weboldalak esetében hibát generál a DevTools Console-on egy anonim define() modul használata miatt.

Ezt a problémát úgy lehet a legegyszerűbben elhárítani, ha a Barion Pixel-t úgyszintén a RequireJS eszközön keresztül töltjük be amit két egyszerű lépésben tudunk megtenni: a Barion Pixel működését biztosító JS fájl hozzáadása a RequireJS konfigurációhoz és a Barion Pixel inicializálása a RequireJS-n keresztül.

A RequireJS konfiguráció módosítása

A Barion Pixel működését biztosító JS fájl hozzáadásához keressük meg a forráskódban a már meglévő require.config függvényhívásunkat és a paraméterben átadott objektumban található 'paths' névre hallgató al-objektumhoz adjuk hozzá a Barion Pixel JS fájl elérési útvonalát 'barionPixel' néven az alábbi módon:

<script>
    require.config({
        paths: {
            'barionPixel': 'https://pixel.barion.com/bp.js'
        }
    });
</script>

A Bairon Pixel inicializálása a RequireJS segítségével

Miután hozzáadtuk a RequireJS config-hoz a Barion Pixel JS elérési útvonalát a fent leírt módon, következő lépésként máris inicializálhatjuk a Barion Pixel-t. Az inicializálás a forráskódban tetszőleges helyen megtörténhet a saját Pixel ID-nk illetve az alábbi kódrészlet alkalmazásával feltéve, hogy a RequireJS config-ban már korábban elhelyeztük a Barion Pixel JS elérési útvonalát.

<script>
	require(['barionPixel'], function() {
		window.barionpixel_function = 'bp';   
		// 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();
		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>
 

FONTOS! A fenti kódrészletben minden esetben cseréld le a pirossal jelölt értéket a saját, valódi Pixel ID-ra.

A Barion Pixel használata

Miután a fent leírt módon sikeresen inicializáltad a Barion Pixelt és a DevTools Console fülén megszűnt minden Barion Pixel-re vonatkozó hibaüzenet, folytathatod a Teljes Barion Pixel implementációját amennyiben ezt szeretnéd. A Pixel inicializálásában végrehajtott módosítások nem befolyásolják a bp() függvényhívás működését, így azt az eredeti szándékának és a Barion Pixel API referenciájában leírtaknak megfelelően használhatod.