Difference between revisions of "Barion Pixel"

From Barion Documentation
Jump to navigation Jump to search
(Custom events)
(Custom events)
Line 158: Line 158:
 
Custom events may be defined, with arbitrary text data as parameters. One way to do so is to fire the customEvent event depicted in Figure 4. The event may hold up to 5 attributes: eventCategory, eventAction, eventProperty, eventLabel, eventValue. If You want to add custom properties to standard events You may do so by adding the “_” prefix to that particular event. This is denoted in Figure 5.
 
Custom events may be defined, with arbitrary text data as parameters. One way to do so is to fire the customEvent event depicted in Figure 4. The event may hold up to 5 attributes: eventCategory, eventAction, eventProperty, eventLabel, eventValue. If You want to add custom properties to standard events You may do so by adding the “_” prefix to that particular event. This is denoted in Figure 5.
  
<nowiki>
+
<nowiki>
  
 
// sample customData
 
// sample customData

Revision as of 11:24, 12 February 2019

The Barion pixel is a snippet of JavaScript code that allows you to track visitor activity on your website. It works by loading a small library of functions which you can use whenever a site visitor takes an action that you want to track (called an event).

In order to implement the pixel, you will need:

  • access to your website's code base
  • your pixel's base code and associated IDs (barionPixelID)

Implementation

The Barion pixel is a snippet of JavaScript code that loads a small library of functions you can use to track visitor activity on your website. It relies on Barion cookies. By default, the pixel will track URLs visited, domains visited, and the devices your visitors use. In addition, you can use the pixel's library of functions to track other events that are associated with webshop usage and ecommerce.

Base code

Before you can install the pixel, you will need your pixel's base code.

Figure 1

<script>

  (function(i,s,o,g,r,a,m){i['BarionAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window, document, 'script', 'http://track.barion.com/bt.js', 'bat');
  
  // initialize the pixel
  bat('init', 'addBarionPixelId', 'barionPixelID');

</script>
<noscript>

  <img height="1" width="1" style="display:none" src="http://track.barion.com/a.gif?__ba_client_id=[Your ClientID goes here]&__ba_website_id=[Your WebsiteID goes here]&__ba_pixel_id=[Your Barion Pixel ID goes here]&ev=PageView&noscript=1"/>

</noscript>
 

When run, this code will download a library of functions which you can then use for tracking. It also automatically tracks a single PageView conversion by calling the bat() function each time it loads. We recommend that you leave this function call intact.

Installing The Pixel

To install the pixel, we highly recommend that you add its base code between the opening and closing <head> tags on every page where you will be tracking website visitor actions. Most developers add it to their website's persistent header, so it can be used on all pages, but it could be used before the closing body tag (</body>) as well.

Placing the code within your <head> tags reduces the chances of browsers or third-party code blocking the pixel's execution. It also executes the code sooner, increasing the chance that your visitors are tracked before they leave your page.

There are two ways to track conversions with the pixel:

  • standard events, which are visitor actions that we have defined and that you report by calling a pixel function
  • custom events, which are visitor actions that you have defined and that you report by calling a pixel function

Standard Events

Standard events are predefined visitor actions that correspond to common, conversion-related activities, such as searching for a product, viewing a product, or purchasing a product. Standard events support parameters, which allow you to include an object containing additional information about an event, such as product IDs, categories, and the number of products purchased.

In order to track an event the event needs to be fired, that is the corresponding event with its properties need to be added inside Your javascript or page. This can be seen on Figure 2 and Figure 3.

Figure 2

var contentViewProperties = {
    'id': 'My blog page',
    'contentType': 'Page',
    'name': 'Very cool product',
}
bat('track', 'contentView', contentViewProperties);
 

Figure 3

$("#addtocart_button").click(function(){

    // sample product data
    var addToCartPorperties = {
        'id': 'a',
        'contentType': 'Page',
        'name': 'a',
        'ean': 'a',
        'unitPrice': 1000,
        'totalItemPrice': 2000,
        'unit': 'kg',
        'currency': 'huf',
        'quantity': 2,   
    }    

    bat('track', 'addToCart', addToCartPorperties);

});
 

All standard events are tracked by calling the pixel's bat('track') function, with the event name, and a JSON object as its parameters (sometimes optional). For example, here's a function call to track when a visitor has completed a purchase event, with currency and value included as a parameter. (Figure 2)

Standard event descriptions

With these standard events one can describe a lot of ecommerce related user actions in a meaningful way. Each event have its own set of properties that are needed in order to fully understand and record the users intentions/behaviour.

Standard event descriptions
Event name Description
setUserProperties With this event One can add user related information.
contentView User sees a certain content on a page (e.g. product, article, promotion, banner, etc). When a key page is viewed such as a product page. This event may be fired on pageload.
clickProduct A click on a product in any list (search, recommendation box, etc). Usually fired at user click
clickProductDetail A click of product details. (e.g. more info link). Usually fired when user clicks.
customizeProduct When a person customizes a product. (color, size, etc). Typically fired at user click.
clickPromo A click on an internal promotion. Fired at mouse click.
addToCart This event may be fired when a product is added to the shopping cart (users clicks on an add to cart button) upon user clicks.
removeFromCart This event may be fired when a product is removed to the shopping cart (users clicks on an add to cart button) upon user clicks.
initiateCheckout This event may be fired when a the user checks out the cart, clicks on the checkout button.
addPaymentInfo When payment information is added in the checkout flow, this event may be fired upon user click.
initiatePurchase A person clicks on a purchase button (and possibly enters the Thank You Page).
purchase When a purchase is made or checkout flow is completed. Successful or unsuccesful. This may be employed on the Thank you page (typically) on pageload.
search When a search is entered into a search field upon sending the form, this event may be fired.
signUp To track user signup, when a registration form is completed/sent to the server (just when the status is OK), this event may be fired upon pageload.
grantConsent User consent is granted for tracking.
revokeConsent User consent is revoked for tracking.
rejectConsent User consent is rejected for tracking.
error If one want to track errors this event may be used for that.

Custom events

Custom events may be defined, with arbitrary text data as parameters. One way to do so is to fire the customEvent event depicted in Figure 4. The event may hold up to 5 attributes: eventCategory, eventAction, eventProperty, eventLabel, eventValue. If You want to add custom properties to standard events You may do so by adding the “_” prefix to that particular event. This is denoted in Figure 5.

// sample customData var customData = { eventCategory: 'Video', eventAction: 'play', eventProperty: 'video', eventLabel: 'Fall Campaign', eventValue: 42 } bat('track', 'customEvent', customData);

Event Properties

Standard properties

User Properties

Item value type

Address value type

Events related to content browsing

Purchase related events

addToCart/removeFromCart

initiateCheckout, addPaymentInfo, initiatePurchase, purchase

Search event

signUp event