Implementing the Full Barion Pixel

Implementing the Full Barion Pixel

Prerequisites

Implementing the Full Barion Pixel first and foremost requires an implementation of the Base Barion Pixel on your webshop. It is not necessary that the Base implementation be accepted by Barion however before the start of the implementation, just be aware that only approved events will be sent towards Barion. As the Full Barion Pixel, with the Consent Management implementation in particular, requires that you send user data for marketing purposes towards us, it requires a separate agreement and approval from Barion.

Where to start?

The preferred starting point for implementing the Full Barion Pixel is the Content View event, for cases where the content type is 'Product' in particular. This event is a very often used one, since it should be implemented in every product page at least. This event is also easy to implement, since it should be triggered every page load. However, do not forget that further events should be implemented too after content view event like grant consent, add to cart, initiate checkout, initiate purchase, purchase etc.

The first step is to create a JS object that contains the event parameters, as detailed in the Barion Pixel API reference. See below for an example.

Content View properties in JS object

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

This can simply be inserted into your page JS code, so that it executes on every page load. This means that if you have a simple HTML page, you can insert this into a script tag, or if you use a template system, you can create a template from this code. GTM users can also put this in a tag that fires every page load, hovewer getting the actual parameters is beyond the scope of this guide as it varies from webshop to webshop. The best place to start might be to check if it is available in a Google Analytics data layer, or you can just grab it from the HTML directly with JS selectors. If you are not familiar with the concept of JS selectors, refer to the bottom of this guide for a quick summary.

After creating this object, the event must be fired by calling the "bp" function in the way shown below. The first parameter tells the Pixel that this is an user fired event, the second parameter is the event name, while the last parameter passed should be the object that you just created.

Firing the Content View event

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

Firing this event should generate a "Testing message" line in your browser console, accessible in most browsers in the Developer Tools with the F12 key. After your Pixel is reviewed and approved, the message should change to "Sending message". In the same message, you can see the object that you created extended with other data that the Pixel collects. This data is only actually sent after the Pixel is approved, but the fact that the event is implemented is transmitted while it is in the testing stage, too.

Implementing other events

Other events that fire on page loads are just as easy to implement as the Content View event was. For example the Purchase event can be implemented in a very similar fashion, by setting up an object with the required parameters referring to the API documentation, and then just calling the "bp" function with the relevant event name and the object.

Most events hovewer are to be fired by a button click event. This means that an event listener must be placed on your page that attaches the event to a trigger that is fired when you click a certain element on your page. For more information on event listeners and JS selectors, refer to the bottom of the page for a quick summary.

Attaching the "bp" function call is straightforward once you found the element that the event should be attached to. Simply call the "bp" function as you would on a page load event, just place the function call inside the callback function of the event listener, as it is with the example below.

Attaching an event trigger to a button click

       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);
       });

Implementing button click events step by step

JS selectors

JS selectors are a group of functions that can be used to find an element in your HTML document and use it in your code. These are called getElementById, getElementsByClassName, getElementsByName, and getElementsByTagName that find elements by their id, class, name attributes or their tag types respectively.

Event listeners

JavaScript in your browser allows you to create triggers that execute based on some user action. This functionality is achieved by the "addEventListener" function. This function can be called from any element in your page, and takes two arguments. The first one is the type of event that the trigger should fire on, this can be set to various values, but for our purposes, this is almost always 'click'. This makes the event trigger if the user clicks the element that the event listener is attached to. The second parameter is the so-called callback function. This is the function that will execute when the event listener is triggered. This function in our case can be a simple anonymous function wrapping the "bp" function call.