Revision as of 15:01, 6 May 2019

Barion Pixel

The Barion Pixel is JavaScript code that allows you to track visitor activity on your website. It works by loading a JavaScript function which you can use whenever a site visitor takes an action that you want to track (this action is called an event).

In order to implement the Pixel, you will need:

access to your website's HTML code base
your Barion Pixel ID that you can access from your Barion Wallet

By default, the Pixel will track pages visited, and the devices your visitors use. In addition, you can use the Pixel's JavaScript function to track other events that are associated with webshop usage and e-commerce. Without collecting the consent of the website visitor you must still use the Barion Pixel on your website for fraud management purposes. (Tracking visitor behavior for the purposes of preventing fraud is considered a legitimate interest of Barion and the merchant in contract with Barion). The implementation of the base code is considered mandatory for using the Barion Smart Gateway.

Implementing the base code

Implementing the base code is not only required for you to be considered for special offers relating to the Barion Pixel, but also for using the Barion Smart Gateway at all. This is based on the fact that both Barion and you as the website owner have a legitimate interest in fraud management, and the data provided by the Barion Pixel greatly helps these efforts. This, as a legitimate interest case, is fully compliant with the GDPR, and must be implemented independently of any consent management software that your site may use.

Init (init)

User intent: View pages on your site
To be implemented at: Every page load, in the document head tag
Why do we need this: This provides very basic information on user sessions, and can be implemented very easily

To use the Pixel, you need to add the following code (referred to as the base code) between the opening and closing <head> tags on every page of your site. Most developers add it to their website's persistent header, so that it appears automatically on all loaded pages. Be sure to insert your unique Barion Pixel ID at both locations in the provided code example.

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. Sending the data happens asynchronously in the client's browser so that it does not affect user experience.

Implementation of the base code

   
        <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', 'https://pixel.barion.com/bp.js', 'bp');

            // send page view event
            bp('init', 'addBarionPixelId', '[YOUR BARION PIXEL ID GOES HERE]');
        </script>

        <noscript>
            <img height="1" width="1" style="display:none" src="https://pixel.barion.com/a.gif?__ba_pixel_id=[YOUR BARION PIXEL ID GOES HERE]&ev=contentView&noscript=1"/>
        </noscript>

Heartbeat (heartbeat)

User intent: Browse your site
To be implemented at: No further implementation needed beyond the init event
Why do we need this: This provides information on time spent on your various pages

Heartbeat events are sent each minute from each page that the init event is implemented at, as long as the user does not navigate away from the page or the session is not considered timed out. It can provide information about time spent viewing each site by users.

Minimal implementation

To be considered for the special contract terms in connection with the implementation of the Barion Pixel's full marketing capabilities, you have to implement the following events on your site. All events should be implemented in every location applicable, further detailed below. Events may require parameters, which must be included in the bp function call as a JS object. This contains additional information about an event, for example product IDs, categories, and the number of products purchased.

Consent (grantConsent, rejectConsent)

User intent: Give or reject Barion Pixel consent
To be implemented at: Inside your own consent management software
Why do we need this: Participation of webshop clients is entirely consent based complying with the GDPR

Consent events determine which of the sent data can be used by us for marketing purposes. Two consent events can be used to control user consent. The "grantConsent" event has to be sent when the visitor accepts the cookie policy that expressly allows Barion to use data for marketing purposes. Sending this event must be handled by your own consent management implementation that you are responsible for as outlined in our terms. The "rejectConsent" event should be sent when the customer rejects the cookie policy that includes Barion Pixel functionality. It should be noted that rejecting Barion marketing consent does not mean that no data should be sent towards Barion, as Barion has a legitimate interest using this data for fraud management. Rejecting Barion consent however means that the data from that session will not be used for marketing purposes at all, despite receiving it. All consent events are sent by calling the Pixel's consent function as shown below.

Consent event implementation example

   
        bp('consent', 'grantConsent');
        bp('consent', 'rejectConsent');

Content View (contentView)

Firing event: Page load of item pages minimally, preferably on all pages that refers to a single item, offer or promotion
User intent: View the page that shows a single offer described exclusively
Why do we need this: Offer descriptions help us know more about your offers

This event should be fired when one of your users enters a page that refers to one of your items that can be bought, and describes it in general terms, with an offer to buy. This can be something like an offer page on an e-commerce website or a product page on a retail site. It is important to not confuse this with a full product detail page where the product itself is described in greater detail, but there is no information on price, shipping and other details that are relevant to you offer, like in the case of a product manual.

Content view event properties

name	required	type	description
contentType	YES	text	If this is a product page as per minimal requirements, this value should be "Product". Otherwise select a value that best fits from these: Page/Product/Article/Promotion/Banner/Misc.
currency	YES (in case of "Product")	text (ISO 4217)	The currency that the product price is provided in, preferably in the three letter ISO 4217 format (eg. HUF, EUR).
id	YES	text	An unique ID that you have for the offer, this can be your ID for the product, an SKU or a promotion ID.
name	YES	text	The full name that you have for the offer, for example a product name (eg. Red Bull 24pcs carton).
quantity	YES (in case of "Product")	float	The quantity of the product offered as initially given on the page.
unit	YES (in case of "Product")	text	The unit that your offer is measured in (eg. pieces, kg, m).
unitPrice	YES (in case of "Product")	float	The price of one measurement of your offer in the given currency.
brand	NO	text	The brand of the offer.
category	NO	text	The subcategory branch (preferred, eg. 'clothes\|shoes\|winter', separate levels with '\|') or single category (eg. 'winter shoes' or 'summer shoes') of the offer.
contents	NO	array	An array of JS objects for detailing multiple items of the offer. For more details see the table below.
creative	NO	text	The name or description of the promotion, for example a promotion picture filename or slogan.
customerValue	NO	float	A metric that you define that measures the value of the action performed to your business.
ean	NO	text	Contains the International Article Number (EAN) of the offer if available.
list	NO	text	THe function of the loaded page from one of these possible values: HomePage/SearchPage/ProductPage/Recommendation/ComparisonPage/BasketPage/Checkout/Misc
position	NO	text	The product's position in a list or collection (e.g. 2) or the position of the promotion on a page (e.g. banner_slot_1).
step	NO	integer	If the page is displayed along the checkout process, the checkout step number that the page is displayed in, numbered from 0 as the checkout initiation.
variant	NO	text	THe variant of the offer from the list of possible identical items (eg. the color of a phone or the time and venue of a concert or movie)

Content view event implementation example

   

        // example properties for a product page
        var contentViewProperties = {
            'contentType': 'Product',
            'currency': 'HUF',
            'id': 'item_42',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': '10',
            'unit': 'pcs.',
            'unitPrice': 4990.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': undefined,
            'creative': undefined,
            'customerValue': '150',
            'ean': 9780575115347,
            'list': 'ProductPage',
            'position': undefined,
            'step': undefined,
            'variant': 'hardcover'
        }

        // example properties on a home page for a promotion of a product
        var contentViewProperties = {
            'contentType': 'Promotion',
            'currency': 'HUF',
            'id': 'item_42',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': '10',
            'unit': 'pcs.',
            'unitPrice': 4990.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': undefined,
            'creative': 'book_promo_02',
            'customerValue': '150',
            'ean': 9780575115347,
            'list': 'HomePage',
            'position': 2,
            'step': undefined,
            'variant': 'hardcover'
        }

        // example properties on a checkout page for a promotion of a product
        var contentViewProperties = {
            'contentType': 'Promotion',
            'currency': 'HUF',
            'id': 'item_42',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': '10',
            'unit': 'pcs.',
            'unitPrice': 4990.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': undefined,
            'creative': 'also_bought_05',
            'customerValue': '150',
            'ean': 9780575115347,
            'list': 'Checkout',
            'position': 5,
            'step': 2,
            'variant': 'hardcover'
        }

        // Use one of these to add the event listener to the button click (use only one):

        // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
        window.addEventListener('onload', function() {
            bp('track', 'contentView', contentViewProperties);
        });

        // jQuery (if you use jQuery, if in your console "$" is defined on your site)
        $("window").load(function() {
            bp('track', 'contentView', contentViewProperties);
        });

Add to Cart (addToCart)

Firing event: Button click that results in a product to be selected for purchase
User intent: Select product for purchase
Why do we need this: Users demonstrate strong interest in your items by selecting them for purchase

The add to cart event is, as its name suggests, connected to a user "adding a product to their cart". Usually this means that a user decide to purchase a product or service, and has added this item to their cart. Even if your website does not use carts in the literal sense, there is a point in a user session where the given user decides that they intend to purchase the product. This exact intent is what we want to capture here, so the button click which best matches the point of this intent, such as one labeled 'Buy' or 'Reserve' should be the one to attach this event to.

Add to cart event properties

name	required	type	description
contentType	YES	text	Usually, this value should be "Product".
currency	YES	text (ISO 4217)	The currency that the price is provided in, preferably in the three letter ISO 4217 format (eg. HUF, EUR).
id	YES	text	An unique ID that you have for the item, this can be your ID for the product, an SKU or a promotion ID.
name	YES	text	The full name that you have for the added item, for example a product name (eg. Red Bull 24pcs carton).
quantity	YES	float	The quantity of the item added to the cart.
totalItemPrice	YES	float	The total price of the added items in the given currency.
unit	YES	text	The unit that your item is measured in (eg. pieces, kg, hours).
unitPrice	YES	float	The price of one measurement of your item in the given currency.
brand	NO	text	The brand of the item.
category	NO	text	The subcategory branch (preferred, eg. 'clothes\|shoes\|winter', separate levels with '\|') or single category (eg. 'winter shoes' or 'summer shoes') of the item.
coupon	NO	text	The coupon code that was used when the item was added to cart.
contents	NO	array	An array of JS objects for detailing multiple items of the item. For more details see the table below.
creative	NO	text	The name or description of the promotion for the item, for example a promotion picture filename or slogan of the promotion that adds the items to the cart automatically.
customerValue	NO	float	A metric that you define that measures the value of the action performed to your business.
ean	NO	text	Contains the International Article Number (EAN) of the offer if available.
list	NO	text	THe function of the loaded page from one of these possible values: HomePage/SearchPage/ProductPage/Recommendation/ComparisonPage/BasketPage/Checkout/Misc
position	NO	text	The item's position in a list or collection (e.g. 2) or the position of the promotion on a page (e.g. banner_slot_1).
step	NO	integer	If the page is displayed along the checkout process, the checkout step number that the page is displayed in, numbered from 0 as the checkout initiation.
variant	NO	text	THe variant of the offer from the list of possible identical items (eg. the color of a phone or the time and venue of a concert or movie)

Add to cart event implementation example

   

        // sample product data
        var addToCartProperties = {
            'contentType': 'Product',
            'currency': 'HUF',
            'id': 'item_42',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': '10',
            'totalItemPrice': 49900.0,
            'unit': 'pcs.',
            'unitPrice': 4990.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': undefined,
            'coupon': '43763436874'
            'creative': undefined,
            'customerValue': '150',
            'ean': 9780575115347,
            'list': 'ProductPage',
            'position': undefined,
            'step': undefined,
            'variant': 'hardcover'
        }

        // Use one of these to add the event listener to the button click (use only one):

        // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
        document.getElementById('addtocart_button').addEventListener('click', function() {
            bp('track', 'addToCart', addToCartProperties);
        });

        // jQuery (if you use jQuery, if in your console "$" is defined on your site)
        $("#addtocart_button").click(function() {
            bp('track', 'addToCart', addToCartProperties);
        });

Initiate Checkout (initiateCheckout)

Firing event: Button click that starts the checkout process
User intent: Purchase the items in the cart
Why do we need this: Users usually are put off by adverts of an item they already purchased, but can be receptive to related products

Usually on a webshop, there is a checkout process that starts with clicking a button with items in your cart. This button click is the one that this event should be attached to. After this click, typically the user has to provide other data, such as a shipping address and method, and confirm the purchase (which should fire the initiate purchase event).

Initiate checkout event properties

name	required	type	description
contents	YES	array	An array of JS objects for detailing the actual items contained in the cart, meaning the shipping and coupons should be excluded. For the detailed format see the table below.
currency	YES	text (ISO 4217)	The currency that the price is provided in, preferably in the three letter ISO 4217 format (eg. HUF, EUR).
revenue	YES	float	The total revenue associated with the transaction in the given currency. This should include all costs the customer pays like shipping or tax.
step	YES	integer	In most cases, since this is the first checkout step, this should be 0.
contentType	NO	text	Usually this value should be "Product".
coupon	NO	text	The coupon code that is being used.
creative	NO	text	The name or description of the promotion for the cart, for example a promotion picture filename or slogan of the promotion that starts the checkout automatically.
customerValue	NO	float	A metric that you define that measures the value of the action performed to your business.
list	NO	text	In most cases this should be 'Checkout'.
option	NO	text	Additional information about the purchase.
orderNumber	NO	text	The unique ID of the purchase.
position	NO	text	The item's position in a list or collection (e.g. 2) or the position of the promotion on a page (e.g. banner_slot_1).
shipping	NO	float	The price of shipping associated with the purchase in the given currency.
shippingAddress	NO	object	The shipping address given in the format detailed below.
tax	NO	float	The tax associated with the purchase in the given currency.

Initiate checkout event implementation example

   

        // sample product data
        var initiateCheckoutProperties = {
            'contents': [{
                'contentType': 'Product',
                'currency': 'HUF',
                'id': 'item_42',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 7500.0,
                'unit': 'pcs',
                'unitPrice': 2500.0,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
                {
                'contentType': 'Product',
                'currency': 'USD',
                'id': 'item_42en',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 25.935,
                'unit': 'pcs',
                'unitPrice': 8.645,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
            ]
            'currency': 'HUF',
            'revenue': 17500.0,
            'step': 0,
            'contentType': 'Product',
            'coupon': '43763436874'
            'creative': 'preselected_cart_01',
            'customerValue': '150',
            'list': 'Checkout',
            'option': 'To postal office, no street address',
            'orderNumber': 852,
            'position': 1,
            'shipping': 2500.0,
            'shippingAddress': {
                'city': 'Budapest',
                'country': 'HU',
                'deliveryMethod': 'DHL',
                'fullName': 'John Doe',
                'phone': '+36 1 1111 111',
                'region': 'HU-BU',
                'street': 'Műegyetem rkpt. 3.',
                'street2': '2. porta',
                'zip': '1111'
            },
            'tax': '0.0'
        }

        // Use one of these to add the event listener to the button click (use only one):

        // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
        document.getElementById('checkout_button').addEventListener('click', function() {
            bp('track', 'initiateCheckout', initiateCheckoutProperties);
        });

        // jQuery (if you use jQuery, if in your console "$" is defined on your site)
        $("#checkout_button").click(function() {
            bp('track', 'initiateCheckout', initiateCheckoutProperties);
        });

Initiate Purchase (initiatePurchase)

Firing event: Button click that completes the checkout process
User intent: Pay for the items in the cart
Why do we need this: Users usually are put off by adverts of an item they already purchased, but can be receptive to related products

This event should be fired at the same time as the user is redirected to a payment solution's own website, for example when the user is sent to the Barion Smart Gateway for payment. It should also be fired if the user chose a non-payment checkout option, for example payment on receipt, but the transaction is considered complete. This should be the last confirmation of the checkout process, after which the sale is considered to have taken place. Ideally after pressing this button the user should reach either a 'payment pending' then a 'thank you' page, or simply the 'thank you' page.

Initiate purchase event properties

name	required	type	description
contents	YES	array	An array of JS objects for detailing the actual items contained in the cart, meaning the shipping and coupons should be excluded. For the detailed format see the table below.
currency	NO	text (ISO 4217)	The currency that the price is provided in, preferably in the three letter ISO 4217 format (eg. HUF, EUR).
revenue	NO	float	The total revenue associated with the transaction in the given currency. This should include all costs the customer pays like shipping or tax.
step	YES	integer	In most cases, since this is the first checkout step, this should be 0.
contentType	NO	text	Usually this value should be "Product".
coupon	NO	text	The coupon code that is being used.
creative	NO	text	The name or description of the promotion for the cart, for example a promotion picture filename or slogan of the promotion that starts the checkout automatically.
customerValue	NO	float	A metric that you define that measures the value of the action performed to your business.
list	NO	text	In most cases this should be 'Checkout'.
option	NO	text	Additional information about the purchase.
orderNumber	NO	text	The unique ID of the purchase.
position	NO	text	The item's position in a list or collection (e.g. 2) or the position of the promotion on a page (e.g. banner_slot_1).
shipping	NO	float	The price of shipping associated with the purchase in the given currency.
shippingAddress	NO	object	The shipping address given in the format detailed below.
tax	NO	float	The tax associated with the purchase in the given currency.

Initiate purchase event implementation example

   

        // sample product data
        var initiatePurchaseProperties = {
            'contents': [{
                'contentType': 'Product',
                'currency': 'HUF',
                'id': 'item_42',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 7500.0,
                'unit': 'pcs',
                'unitPrice': 2500.0,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
                {
                'contentType': 'Product',
                'currency': 'USD',
                'id': 'item_42en',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 25.935,
                'unit': 'pcs',
                'unitPrice': 8.645,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
            ]
            'currency': 'HUF',
            'revenue': 17500.0,
            'step': 6,
            'contentType': 'Product',
            'coupon': '43763436874'
            'creative': 'preselected_cart_01',
            'customerValue': '150',
            'list': 'Checkout',
            'option': 'To postal office, no street address',
            'orderNumber': 852,
            'position': 1,
            'shipping': 2500.0,
            'shippingAddress': {
                'city': 'Budapest',
                'country': 'HU',
                'deliveryMethod': 'DHL',
                'fullName': 'John Doe',
                'phone': '+36 1 1111 111',
                'region': 'HU-BU',
                'street': 'Műegyetem rkpt. 3.',
                'street2': '2. porta',
                'zip': '1111'
            },
            'tax': '0.0'
        }

        // Use one of these to add the event listener to the button click (use only one):

        // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
        document.getElementById('confirm_payment').addEventListener('click', function() {
            bp('track', 'initiatePurchase', initiatePurchaseProperties);
        });

        // jQuery (if you use jQuery, if in your console "$" is defined on your site)
        $("#confirm_payment").click(function() {
            bp('track', 'initiatePurchase', initiatePurchaseProperties);
        });

Additional Events

This is the list of all events that are supported by Barion Pixel. Implementing these is currently not normally part of contract terms, but supplying these will improve our service to your site, as we will receive more and better data about your users. This will improve our capability to provide our services, especially in connection to your market and your users.

Click Product (clickProduct)

Firing event: Button click on an item
User intent: View an item
Why do we need this: Users demonstrate interest in your items by clicking them

This event should be fired each time when a user selects any of your items. This could be for example on a product selection page, a result on a search or filter page, an item on a promotion. The page type on which the button is on should be specified in the 'list' property. In case of product bundles, you can use the 'contents' property to list each item in the bundle, while the direct properties should refer to the bundle as a whole as an item.

Click product event properties

name	required	type	description
contentType	YES	text	The type of the content of the page where the item was selected. Possible values (only these are accepted): Page/Product/Article/Promotion/Banner/Misc.
currency	YES	text (ISO 4217)	Currency that the item is listed in for purchase. 3 digit ISO 4217 format is preferred (eg. HUF, EUR).
id	YES	text	Unique ID of the item clicked on your site.
name	YES	text	Full name of the item clicked.
quantity	YES	integer	The quantity of a product clicked measured in the unit provided (e.g. 2).
unit	YES	text	The measurement unit of the item clicked. (e.g. pcs, kg).
unitPrice	YES	float	Price of one unit (that you provided) of the item clicked (in the currency that you provided).
brand	NO	text	Brand of the item clicked.
category	NO	text	shoes\|winter' or 'clothes\|shoes\|summer', separate levels with '\|') of the item clicked.
contents	NO	array	An array of JS objects for detailing multiple items clicked. For more details see the table below.
creative	NO	text	The name or description of the promotion for the item, for example a promotion picture filename or slogan of the promotion that selects the item.
customerValue	NO	float	The value of a user performing this event to the business.
ean	NO	text	Contains the International Article Number (EAN) of the item if available.
list	NO	text	The collection that the product clicked is in from one of these possible values: HomePage/SearchPage/ProductPage/Recommendation/ComparisonPage/BasketPage/Checkout/Misc
position	NO	text	The product's position in the list or collection (e.g. 2) or the position of the creative (e.g. banner_slot_1)
step	NO	integer	A number that represents the progress in the checkout process. Usually at a click product event, this is 0.
variant	NO	text	The variant of the product (e.g. 'black') clicked.

Click product event implementation example

   

        // sample product data for single product
        var clickProductProperties = {
            'contentType': 'Product',
            'currency': 'HUF',
            'id': 'item_42',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': 1,
            'unit': 'pcs',
            'unitPrice': 2500.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': []
            'creative': 'book_42',
            'customerValue': '150.0',
            'ean': 9780575115347,
            'list': 'Checkout',
            'position': 1,
            'step': 2,
            'variant': 'hardcover'
        }


        // sample product data for bundle offer
        var clickProductProperties = {
            'contentType': 'Product',
            'currency': 'HUF',
            'id': 'item_42pack',
            'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
            'quantity': 1,
            'unit': 'pcs',
            'unitPrice': 15000.0,
            'brand': 'Gollancz',
            'category': 'books|hardcover|scifi, books|hardcover|comedy',
            'contents': [{
                'contentType': 'Product',
                'currency': 'HUF',
                'id': 'item_42',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 7500.0,
                'unit': 'pcs',
                'unitPrice': 2500.0,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
                {
                'contentType': 'Product',
                'currency': 'USD',
                'id': 'item_42en',
                'name': "Hitchhikers' Guide to the Galaxy, hardcover, ISBN: 9780575115347",
                'quantity': 3,
                'totalItemPrice': 25.935,
                'unit': 'pcs',
                'unitPrice': 8.645,
                'brand': 'Gollancz',
                'category': 'books|hardcover|scifi, books|hardcover|comedy',
                'description': 'The Hitchhiker's Guide to the Galaxy[1] (sometimes referred to as HG2G,[2] HHGTTG,[3] H2G2,[4] or tHGttG) is a comedy science fiction series created by Douglas Adams.'
                'ean': 9780575115347,
                'imageURL': 'https://images-na.ssl-images-amazon.com/images/I/51MzUz8rQcL._SX305_BO1,204,203,200_.jpg',
                'variant': 'hardcover'
                },
            ]
            'creative': 'bundle_offer_01',
            'customerValue': '150.0',
            'ean': 9780575115347,
            'list': 'Checkout',
            'position': 1,
            'step': 2,
            'variant': 'hardcover'
        }

        // Use one of these to add the event listener to the button click (use only one):

        // vanilla JS (if you don't use jQuery, if in your console "$" is not defined on your site)
        document.getElementById('book_42').addEventListener('click', function() {
            bp('track', 'clickProduct', clickProductProperties);
        });

        // jQuery (if you use jQuery, if in your console "$" is defined on your site)
        $("#book_42").click(function() {
            bp('track', 'clickProduct', clickProductProperties);
        });

Click Product Detail (clickProductDetail)

Firing event: Button click requesting extended details about an item
User intent: View extended information about an item
Why do we need this: Users demonstrate high interest in your items by looking up details about them

This event should fire on a button click that can be either a webpage or an asynchronous request for more details about an item. It should be implemented at any button that results in more details being shown about an item.

Click product detail event properties

name	required	type	description
contentType	YES	text	The type of the content of the page where the item was selected. Possible values (only these are accepted): Page/Product/Article/Promotion/Banner/Misc.
currency	YES	text (ISO 4217)	Currency that the item is listed in for purchase. 3 digit ISO 4217 format is preferred (eg. HUF, EUR).
id	YES	text	Unique ID of the item clicked on your site.
name	YES	text	Full name of the item clicked.
unit	YES	text	The measurement unit of the item clicked. (e.g. pcs, kg).
unitPrice	YES	float	Price of one unit (that you provided) of the item clicked (in the currency that you provided).
brand	NO	text	Brand of the item clicked.
category	NO	text	shoes\|winter' or 'clothes\|shoes\|summer', separate levels with '\|') of the item clicked.
contents	NO	array	An array of JS objects for detailing multiple items clicked. For more details see the table below.
creative	NO	text	The name or description of the promotion for the item, for example a promotion picture filename or slogan of the promotion that selects the item.
customerValue	NO	float	The value of a user performing this event to the business.
ean	NO	text	Contains the International Article Number (EAN) of the item if available.
list	NO	text	The collection that the product clicked is in from one of these possible values: HomePage/SearchPage/ProductPage/Recommendation/ComparisonPage/BasketPage/Checkout/Misc
position	NO	text	The product's position in the list or collection (e.g. 2) or the position of the creative (e.g. banner_slot_1)
step	NO	integer	A number that represents the progress in the checkout process. Usually at a click product event, this is 0.
quantity	NO	integer	The quantity of a product clicked measured in the unit provided (e.g. 2).
variant	NO	text	The variant of the product (e.g. 'black') clicked.