Implementing the Base Barion Pixel

From Barion Documentation
Revision as of 17:07, 28 January 2020 by Eszest (talk | contribs)
Jump to navigation Jump to search

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 numbers in the middle and the two at the back.

IMPORTANT
All Barion Pixel IDs conform to the format of "BP", ten numbers, 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.
Be sure to insert your unique Barion Pixel ID at both locations in the provided code example, marked by a red outline. Always double check your Barion Pixel ID. 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);
      
            // 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>

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.

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

Retrieved from "https://docs.barion.com/index.php?title=Implementing_the_Base_Barion_Pixel&oldid=2303"