Implementing-the-barion-base-and-full-pixel-in-requirejs-magento-webshops

The Base and Full Pixel implementation with RequireJS and/or Magento

If you are using the Magento e-commerce platform or have the RequireJS library installed in your webshop then both versions of the Barion Pixel will cause an error on the DevTools Console because of the usage of an anonymous define() module when the Barion Pixel is initialized through the standard JavaScript version.

To overcome this issue the Barion Pixel also has to be initialized through RequireJS which can be achieved in two simple steps: adding the main JS file of the Barion Pixel to the RequireJS config and then loading and initializing it with RequireJS.

Extending the RequireJS config

The first step is to add the Barion Pixel's main JS file to your existing RequireJS config. To do so you have to locate your already existing require.config call and add the 'barionPixel' property and its value to the 'paths' object in the config as it is shown in the following code snippet:

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

Initializing the Bairon Pixel through RequireJS

After adding the Barion Pixel main JS to your Require JS config you can initialize the Barion Pixel anywhere in your webshop's source code as long as the 'barionPixel' path is defined properly by adding the following code snippet with your valid Pixel ID to your webshop's codebase.

<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>
 

IMPORTANT! Do not forget to add your valid Barion Pixel ID in the above code instead of the values marked with red.

Usage of the Barion Pixel after initialization

After you have successfully initialized the Barion Pixel as described above and you see no error message related to it on the DevTools Console you can proceed with the implementation of the Full Barion Pixel if you wish to. The changes of the Pixel's initialization do not affect the bp() function call itself which can be used as designed and described in the Barion Pixel API reference.