Implementing the Base Barion Pixel: Difference between revisions
No edit summary |
|||
| (8 intermediate revisions by 4 users not shown) | |||
| Line 7: | Line 7: | ||
{{NotificationBox|title=IMPORTANT|text= | {{NotificationBox|title=IMPORTANT|text= | ||
Your Barion Pixel ID can be found in your Barion | Your Barion Pixel ID can be found in the Details page of your Barion shop. Every webshop (with a unique POSKey) has a different Barion Pixel ID. You can find your Barion Pixel ID in your Barion wallet: click ’Manage my shops’ menu, ’Actions’ next to your shop and then ’Details’. | ||
|color=#FF0000}} | |color=#FF0000}} | ||
{{NotificationBox|title=IMPORTANT|text= | {{NotificationBox|title=IMPORTANT|text= | ||
All Barion Pixel IDs conform to the format of "BP", ten | All Barion Pixel IDs conform to the format of "BP", ten characters, then two numbers, connected by two dashes, as is provided in the example. Incorrect entries and other formats, such as IDs beginning with "BPT" will prevent the Barion Pixel from operating correctly.<br> | ||
Be sure to insert your unique Barion Pixel ID at both locations in the provided code example, marked by a red outline | Be sure to insert your webshop's unique Barion Pixel ID at both locations in the provided code example, marked by a red outline. The Barion Pixel ID is different in the sandbox and live Barion systems. | ||
|color=#FF0000}} | |color=#FF0000}} | ||
| 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', | bp('init', 'addBarionPixelId', window['barion_pixel_id']); | ||
</script> | </script> | ||
| Line 43: | Line 44: | ||
= Direct HTML implementation = | = Direct HTML implementation = | ||
If you have direct access to the codebase of your website, meaning you can directly edit the HTML code of the pages that are displayed, paste the Base Barion Pixel code | If you have direct access to the codebase of your website, meaning you can directly edit the HTML code of the pages that are displayed, paste the Base Barion Pixel code into the `<head>` tag of your website. This can be found just after the doctype declarations, and is comprised of various site metadata, such as the title of the current page. | ||
The higher it is in the page markup the better, since our code takes a minimal time to run as the majority of Barion Pixel functions are loaded from an external source which loads asynctronously so that it won't block your page from loading or cause slowdowns. You should also just directly place the code that it is served with the HTML file, so that it is loaded with the page. Marketing consent management software should not interact with this code, since it should also be present for fraud prevention purposes. | The higher it is in the page markup the better, since our code takes a minimal time to run as the majority of Barion Pixel functions are loaded from an external source which loads asynctronously so that it won't block your page from loading or cause slowdowns. You should also just directly place the code that it is served with the HTML file, so that it is loaded with the page. Marketing consent management software should not interact with this code, since it should also be present for fraud prevention purposes. | ||
| Line 57: | Line 58: | ||
= Implementation through third party services = | = 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]]). | 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) és a Teljes (Full) Barion Pixel implementációja Shoprenter webshopokban|see documentation]]). | ||
We also support implementing the Base Barion Pixel through the Google Tag Manager ([[Implementing the Barion Pixel through the Google Tag Manager|see documentation]]). | We also support implementing the Base Barion Pixel through the Google Tag Manager ([[Implementing the Barion Pixel through the Google Tag Manager|see documentation]]). | ||
Latest revision as of 13:20, 3 February 2021
Implementing the Base Barion Pixel
Getting Ready
The first prerequisite to implement the Base Barion Pixel irrespective of your webshop is knowing your your Barion Pixel ID. You must paste this Pixel ID into the following code at both locations marked with a red outline.
The Pixel ID should be pasted without any extra parentheses, breackets or quotes, just as it is in the provided sample, the only difference being the ten characters in the middle and the two at the back.
Be sure to insert your webshop's unique Barion Pixel ID at both locations in the provided code example, marked by a red outline. The Barion Pixel ID is different in the sandbox and live Barion systems.
Implementation of the base code
<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>
Direct HTML implementation
If you have direct access to the codebase of your website, meaning you can directly edit the HTML code of the pages that are displayed, paste the Base Barion Pixel code into the `<head>` tag of your website. This can be found just after the doctype declarations, and is comprised of various site metadata, such as the title of the current page.
The higher it is in the page markup the better, since our code takes a minimal time to run as the majority of Barion Pixel functions are loaded from an external source which loads asynctronously so that it won't block your page from loading or cause slowdowns. You should also just directly place the code that it is served with the HTML file, so that it is loaded with the page. Marketing consent management software should not interact with this code, since it should also be present for fraud prevention purposes.
Static HTML pages
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 (see documentation) and Shoprenter (see documentation).
We also support implementing the Base Barion Pixel through the Google Tag Manager (see documentation).
How it works
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.
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.
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.