Smar Documentation: Difference between revisions

From Barion Documentation
Jump to navigation Jump to search
Line 30: Line 30:
The ''grantConsent'' event listener is attached to a button with ''cc-allow'' class:
The ''grantConsent'' event listener is attached to a button with ''cc-allow'' class:
     <nowiki><button class="cc-btn cc-allow">Accept</button></nowiki>
     <nowiki><button class="cc-btn cc-allow">Accept</button></nowiki>
The ''addToCart'' event listener is attached to any element with add-to-cart class and a button with ''add-to-cart'' id.  
The ''addToCart'' event listener is attached to any element with add-to-cart class and a button with ''add-to-cart'' id (if the ''add to cart'' button redirects to the /cart page, then this attribute can be omitted.).  
     <nowiki><span class="add-to-cart">Add to cart</span>
     <nowiki><span class="add-to-cart">Add to cart</span>
<button id="add-to-cart">Add to cart</button></nowiki>
<button id="add-to-cart">Add to cart</button></nowiki>
Line 41: Line 41:
! grantConsent
! grantConsent
| Customer grants access to storing marketing cookies
| Customer grants access to storing marketing cookies
| Fill the _grantconsent_ attribute with the appropriate selector<br/>A ''grantconsent'' is also sent, when the user clicks on a button with ''.cc-btn-accept-all'' class<br/>A ''grantconsent'' is also sent, if the checkbox with ''#marketing-cookies-checkbox'' is checked
| <p>Fill the ''grantconsent'' attribute with the appropriate selector</p><p>A ''grantconsent'' is also sent, when the user clicks on a button with ''.cc-btn-accept-all'' class</p><p>A ''grantconsent'' is also sent, if the checkbox with ''#marketing-cookies-checkbox'' is checked</p>
|-
|-
! rejectConsent
! rejectConsent
| Customer rejects access to storing marketing cookies
| Customer rejects access to storing marketing cookies
| Fill the ''rejectconsent'' attribute with the appropriate selector<br/>A ''rejectConsent'' is also sent, if the checkbox with ''#marketing-cookies-checkbox'' is unchecked
| <p>Fill the ''rejectconsent'' attribute with the appropriate selector</p><p>A ''rejectConsent'' is also sent, if the checkbox with ''#marketing-cookies-checkbox'' is unchecked</p>
|-
|-
! contentView
! contentView
Line 53: Line 53:
! categorySelection
! categorySelection
| Category page
| Category page
| Automatic
|-
! addToCart
| Add product to cart
| <p>If clicking the ''add to cart'' button redirects to the ''/cart'' page, then it is automatic</p> or <p>Fill the ''add2cart'' attribute with the appropriate selector</p>
|-
! initiateCheckout
| Does not send
|
|-
! initiatePurchase
| Does not send
|
|-
! purchase
| Customer reaches the thank you page after ordering
| Automatic
| Automatic
|}
|}

Revision as of 09:32, 8 September 2021

Documentation of smar.js

Prerequisites

The current version of smar.js does not send initiateCheckout and initiatePurchase events. All pages (including the order summary) need to include the following libraries:

  • jQuery 1.1+
  • bp.js

Installation

Paste the following snippet before the closing body tag:

   <script src="https://pixel.barion.com/smar.js" id="barion_smar" async="true" grantconsent="<accept button selector>" rejectconsent="<reject button selector>" add2cart="<add to cart button selector>"></script>

Write the selectors for the buttons to the attributes respectively.

  • grantconsent: The selector of the element on which the user clicks a grantConsent event should be sent
  • rejectconsent: The selector of the element on which the user clicks a rejectConsent event should be sent
  • add2cart: The selector of the element on which the user clicks an addToCart event should be sent. This attribute is optional.

As the smar.js library relies on jQuery, all the selector or selectors can be used here. More information on selectors can be found here: jQuery selectors

Examples

Here is an example of the embedding code:

   <script src="https://pixel.barion.com/smar.js" async="true" id="barion_smar" grantconsent="button.cc-allow" rejectconsent="button.cc-dismiss" add2cart=".add-to-cart, button#add-to-cart"></script>

The selectors can be checked with the help of Google Chrome console (Ctrl + Shift + I on Windows), then click on the arrow icon in the top left corner, then click on the button as shown on the screenshot below. In the selected line, copy a unique label from the class attribute of the button tag to the appropriate attribute of the embedding script tag.

The grantConsent event listener is attached to a button with cc-allow class:

   <button class="cc-btn cc-allow">Accept</button>

The addToCart event listener is attached to any element with add-to-cart class and a button with add-to-cart id (if the add to cart button redirects to the /cart page, then this attribute can be omitted.).

   <span class="add-to-cart">Add to cart</span>
<button id="add-to-cart">Add to cart</button>
Event Description Identifiers
grantConsent Customer grants access to storing marketing cookies

Fill the grantconsent attribute with the appropriate selector

A grantconsent is also sent, when the user clicks on a button with .cc-btn-accept-all class

A grantconsent is also sent, if the checkbox with #marketing-cookies-checkbox is checked

rejectConsent Customer rejects access to storing marketing cookies

Fill the rejectconsent attribute with the appropriate selector

A rejectConsent is also sent, if the checkbox with #marketing-cookies-checkbox is unchecked

contentView Product page Automatic
categorySelection Category page Automatic
addToCart Add product to cart

If clicking the add to cart button redirects to the /cart page, then it is automatic

or

Fill the add2cart attribute with the appropriate selector

initiateCheckout Does not send
initiatePurchase Does not send
purchase Customer reaches the thank you page after ordering Automatic