Implementing the Base Barion Pixel: Difference between revisions
No edit summary |
No edit summary |
||
| Line 7: | Line 7: | ||
Afterwards, the exact details differ based on the platform that your webshop uses. | Afterwards, the exact details differ based on the platform that your webshop uses. | ||
= | = Direct HTML implementation = | ||
If your | |||
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 as follows 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. | |||
{{NotificationBox|title=IMPORTANT|text= | {{NotificationBox|title=IMPORTANT|text= | ||
| Line 39: | Line 42: | ||
</noscript> | </noscript> | ||
</nowiki> | </nowiki> | ||
== Static HTML pages == | |||
== Dynamic HTML pages == | |||
Revision as of 16:34, 28 January 2020
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.
Afterwards, the exact details differ based on the platform that your webshop uses.
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 as follows 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.
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);
// Send init event
bp('init', 'addBarionPixelId', 'BP-0000000000-00');
</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>