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.

The first step is to create a JS object that contains the event parameters, as detailed in the 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.

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.