Mandatory Data Layer values
Data values differs according to the page type. Page type mostly corresponds to your html template of your eshop / CMS.
1 2 3 4 5 6 7 8 |
persooDataLayer.push({ pageType: 'page_type_name', currency: 'EUR', impressedProducts: { locationRecommended: ['SDE2315','ROP8419','PDO8978'], locationMain: ['POL5246','MFI5496',...] } }) |
pageType: ‘page_type_name’ (string) – required – the Page Type has to be specified on all pages.
Please take note of the required Page Type naming convention:
- ‘
homepage
‘ – on the homepage - ‘
detail
‘ – on the product detail page - ‘
category
‘ – on the product list (category) page - ‘
basket
‘ – on the page of basket and through the checkout process all the way to the order confirmation page - ‘
error
‘ – on the error “404 page not found” page - ‘
search
‘ – on the page with search results - ‘
other
‘ – on other pages (contacts, blog, terms and conditions etc.)
currency: ‘eur’ (string) – required – currency as specified by ISO 4217 Currency Codes
impressedProducts: ‘locationID’ [product ids] (object) – optional – an object with locations containing IDs of their displayed products. Useful, if we want to prevent showing a product already displayed by the e-shop. Remember to keep the product IDs in the same format as in the product feed.
1 2 3 |
persooDataLayer.push({ pageType: 'homepage' }) |
pageType: ‘homepage’ (string) – povinné
1 2 3 4 |
persooDataLayer.push({ pageType: 'detail', itemID: '333' }) |
pageType: ‘detail’ (string) – required
itemID (string) – required – id of the currently displayed product. Needs to be identical with the id in the product feed.
categoryID (string) – optional – id of the category of the currently displayed product
hierarchy (string) – optional – tree structure of the categories of the currently displayed product. IDs of categories should be divided with colons and without spaces.
1 2 3 4 5 |
persooDataLayer.push({ pageType: 'category', hierarchy: 'cat1:cat12:cat22', categoryID: 'cat22' }) |
pageType: ‘category’ (string) – required
hierarchy (string) – required– hierarchy of the currently displayed category. IDs of categories should be divided with colons and without spaces.
categoryID (string) – optional– id of the currently displayed category
[filterParameters] (string or array) – optional – Those are the currently selected filters. If only one item is selected, the value is a string, if more than one is selected, return an array of strings. These parameters are especially important in stores that do not use traditional tree hierarchy, and use only parametrical filtering (e.g. very common in e-shops with clothing).
Important: the naming convention here has to be the same as in the product feed (e.g. if the product feed has “brand”: “adidas”, the data layer has to have the same “brand”: “adidas” when the filter is applied).
Empty basket confirmation – required
When visitor clears basket (deletes items or makes purchase), set the following values in the next pageview:
- set basketTotal to zero (basketTotal:0)
- remove basketItems
1 2 3 4 5 6 7 8 |
persooDataLayer.push({ pageType: 'basket', basketItems: { '333': {quantity: 2, price: 100}, '546': {quantity: 1, price: 140} }, basketTotal: 340 }) |
Example: There are two products “Red t-shirt with a short sleeve” with id ‘333’ and also “Black outdoor shoes” with id ‘546’.
Note: if there is a discount included in the process, this price in the data layer is after the discount with VAT.
pageType: ‘basket’ (string) – required
basketItems (object) – required – contains products placed in the basket. If the basket is emptied, reset the whole basketItems.
quantity (number) – required – amount of that particular product in the basket
price (number) – required – price of the particular product, with VAT
basketTotal (number) – required – total price of the products in the basket. Insert on each page, even the transaction confirmation page. If the basket is emptied, reset also basketTotal. Include VAT.
basketID (string) – optional – persistent basket ID to be referred to (e.g. in the e-mails). If we insert it into a URL parameter, server will be able to recollect this particular basket’s contents.
Following values need to be present on all pages regardless of pagetype. This allows Persoo to react to current basket contents.
Empty basket confirmation – required
When visitor clears basket (deletes items or makes purchase), set the following values in the next pageview:
- set basketTotal to zero (basketTotal:0)
- remove basketItems
1 2 3 4 5 6 7 |
persooDataLayer.push({ basketItems: { '333': {quantity: 2, price: 100}, '546': {quantity: 1, price: 140} }, basketTotal: 340 }) |
Example: There are two products “Red t-shirt with a short sleeve” with id ‘333’ and also “Black outdoor shoes” with id ‘546’.
Note: if there is a discount included in the process, this price in the data layer is after the discount.
Important! We need the variables basketItems and basketTotal on every page (if there is something in the basket).
basketItems (object) – required – contains products placed in the basket. Insert on all pages. If the basket is emptied, reset the whole basketItems.
quantity (number) – required – amount of that particular product in the basket
price (number) – required – price of the particular product, with VAT
basketTotal (number) – required – total price of the products in the basket. Insert on each page, even the transaction confirmation page. If the basket is emptied, reset also basketTotal. This is with VAT.
basketID (string) – optional – persistent basket ID to be referred to (e.g. in the e-mails). If we insert it into a URL parameter, server will be able to recollect this particular basket’s contents.
1 2 3 4 5 6 7 8 9 10 11 12 |
persooDataLayer.push({ pageType: 'basket', basketItems: { '333': {quantity: 2, price: 100}, '546': {quantity: 1, price: 140} }, basketTotal: 340, transaction: { id: 'tranNo123', revenue: 340, } }) |
Example: The visitor finished the order, and has the transaction ID = “transNo123” on the confirmation page.
pageType (string) – required
basketItems (object) – required – see above section “Basket status” (Note: the following page after this confirmation will have the basket reset).
quantity (number) – required – see above section “Basket status”
price (number) – required – see above section “Basket status”
basketTotal (number) – required – see above section “Basket status”. Must be filled with the whole order value. (Note: the following page after this confirmation will have the basket reset).
transaction (object) – required – contains info about the currently sent order.
id (string) – required – unique order ID
revenue (number) – required – total value of the order with VAT ( or the same number that is sent to Google Analytics).
Empty basket after transaction confirmation – required
During the next pageview, coming after confirmation page pageview, empty basket in data layer:
- set basketTotal to zero (basketTotal:0)
- remove basketItems
Optional Data Layer values
1 2 3 |
persooDataLayer.push({ uid: 'someuserID' }) |
The user’s id (usually email) needs to be sent to the data layer with each log-in, order finish, newsletter subscription etc.
1 2 3 |
persooDataLayer.push({ pageType: 'error' }) |
pageType: ‘error’ (string)
1 2 3 |
persooDataLayer.push({ pageType: 'search' }) |
pageType: ‘search’ (string)
query (string) – searched query
results (string) – number of results
The data layer is a javascript object defined in the page’s header. It tells Persoo, what has been happening on the page and what is displayed – which product ID, which category, etc. It’s necessary for correct setup of recommendation boxes.
How to set up Data Layer
Define Data Layer variable and fill it with correctly formatted values – see the list of required values above.
Creating a Data Layer example:
1 2 3 4 5 6 |
persooDataLayer = [] persooDataLayer.push({ ‘event’: 'pageview', ‘pageType’: 'detail', ‘itemID’: 'abc1234' }];) |
Push the required context and also 'event': 'pageview'
to send an event immediately (or push it into persooDataLayer later if needed).
This lets Persoo know a pageview happened.
Alternatively you can call persoo("send", "pageview")
after the the push and the event will be sent automatically with the pushed persooDataLayer context.
You don’t need to add other event context since it’s gathered from persooDataLayer automatically. See more about events in Sending events
Place Data Layer before Persoo Snippet!
The reasons is that Persoo Data Layer has to initialize first.
Consistency
Important! If you use Persoo to recommend products, it is essential that the data in the Data Layer and Product Feed match (product IDs, category IDs etc.).
Otherwise it won’t be possible to match correctly displayed category with products from this category, or categories often sold together (such as phones and phone accessories).
Updating Persoo boxes when dynamically changing page content
Important: If you load content dynamically through AJAX, you need to update the Data Layer and send a new “pageview” event with each content refresh.
The function for sending data on dynamic content change:
1 |
persoo('send','pageview', {'key1':'value1',...,'keyN':'valueN'}); |
where key:value
will correspond with the Data Layer contents + new changes (e.g. new filter selected). For example:
1 |
{.....category:"Shoes", priceRangeMin:"123", priceRangeMax:"200", color:"blue", material:”gore-tex”....} |