Product page
Below is an example of filling the data layer digitalData
for a page with a detailed description of the product.
Page contents
Introduction
On the product detail of the online store, the following objects must be declared and filled:
- Required:
product
,page
,website
,user
,cart
,version
- Optional (depends on page content):
campaigns
,recommendation
product
The digitalData.product
object must be declared and filled on any page that has digitalData.page.type
= ‘product’.
Example:
window.digitalData = {
...,
product: {
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thump.png",
name: "Leather skirt",
description: "Description",
manufacturer: "Gucci",
category: ['Clothing','Skirts','Mini'],
currency: "GBP",
unitPrice: 100,
unitSalePrice: 100,
skuCode: 'TBL6065RW'
stock: 21,
voucher: "MYVOUCHER1",
color: "black",
size: "41",
variations: [
...,
{
id: "1234567890",
skuCode: "TBL6065RF",
size: "43"
},
...
]
},
...
}
page
You need to declare and fill in only 2 variables in the digitalData.page
object. All other variables will be automatically filled by the SegmentStream library.
Example:
window.digitalData = {
...,
page: {
type: 'product',
category: 'Product Detail'
},
...
}
We recommend passing giving the
digitalData.page.category
variable a value of ‘Sold Out’ on products that aren’t in stock.
website
You need to declare and fill in only 6 variables in the digitalData.website
object. The following 3 variables are required: website.type
, website.currency
, website.environment
. The remaining variables depend on the characteristics of your site.
Example:
window.digitalData = {
...,
website: {
region: "London",
regionId: "11",
type: "desktop",
language: "en-gb",
currency: "GBP",
environment: "production"
},
...
}
user
The composition of the digitalData.user
object strongly depends on the requirements of the project. We recommend that you fill at least the following variables: userId
, user.email
, user.isLoggedIn
, user.firstName
, user.isSubscribed
If you do not have information about a particular property of a visitor, do not declare the variable. For example: you do not know if the visitor is subscribed to the email-list. Correct: do not declare the variable
digitalData.user.isSubscribed
, Wrong: declare a variable and assign it a value of FALSE.
Even if the visitor is not authorized, but has been authorized in the past, pass the information about him to the object
digitalData.user
. This will help with the targeting of personalization campaigns and in the management of advertising systems.
Example:
window.digitalData = {
...,
user: {
firstName: "John",
userId: "4638mn1",
email: "[email protected]",
isLoggedIn: true,
isSubscribed: false
},
...
}
cart
The digitalData.cart
object must be declared and filled when loading each page of the site.
If the user’s cart is empty fill the object as described in the cart object description
Example:
window.digitalData = {
...,
cart: {
id: "CART2203",
currency: "GBP",
subtotal: 100,
total: 105,
lineItems: [
...,
{
product: {
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thumb.png",
name: "Big Boots",
description: "Product description",
manufacturer: "Timberland",
category: ["Footwear","Boots"],
currency: "GBP",
unitPrice: 60,
unitSalePrice: 50,
skuCode: "TBL6065RW"
},
quantity: 2,
subtotal: 100
},
...
]
},
...
}
version
The digitalData.version
variable must be declared and filled when loading each page of the site.
More about the version variable
Example:
window.digitalData = {
...,
version: '1.1.3',
...
}
Optional properties
campaigns
The digitalData.campaigns
array must be declared and filled if the page you are loading has banners whose effectiveness you plan to track.
More about the campaigns array
Example:
window.digitalData = {
...,
campaigns: [
...,
{
id: "PROMO124",
name: "SS18 SALE",
description: "1500 models for sale",
category: "Banner",
subcategory: "Sales",
design: "600x120",
position: "left"
},
...
],
...
}
recommendation
The digitalData.recommendation
array must be declared and filled if there is at least 1 list of products on the loaded page.
More about the recommendation array
Example:
window.digitalData = {
...,
recommendation: [
...,
{
listName: "Recently viewed products",
listId: "recentlyViewed",
items: [
...,
{
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thumb.png",
name: "Big Boots",
description: "Product description",
manufacturer: "Timberland",
category: ["Footwear","Boots"],
currency: "GBP",
unitPrice: 60,
unitSalePrice: 50,
skuCode: "TBL6065RW"
},
...
]
},
...
],
...
}
Whole object
In the end, your code will be similar to:
window.digitalData = {
product: {
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thump.png",
name: "Leather skirt",
description: "Description",
manufacturer: "Gucci",
category: ['Clothing','Skirts','Mini'],
currency: "GBP",
unitPrice: 100,
unitSalePrice: 100,
skuCode: 'TBL6065RW'
stock: 21,
voucher: "MYVOUCHER1",
color: "black",
size: "41",
variations: [
{
id: "1234567890",
skuCode: "TBL6065RF",
size: "43"
}
]
},
page: {
type: 'product',
category: 'Product Detail'
},
website: {
type: "desktop",
currency: "GBP",
environment: "production"
},
user: {
firstName: "John",
userId: "4638mn1",
email: "[email protected]",
isLoggedIn: true,
isSubscribed: false
},
cart: {
id: "CART2203",
currency: "GBP",
vouchers: [
"MYVOUCHER1"
],
voucherDiscount: 10,
tax: 10,
shippingCost: 5,
shippingMethod: "Delivery",
subtotal: 100,
total: 95,
lineItems: [
{
product: {
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thumb.png",
name: "Big Boots",
description: "Product description",
manufacturer: "Timberland",
category: ["Footwear","Boots"],
currency: "GBP",
unitPrice: 60,
unitSalePrice: 50,
skuCode: "TBL6065RW"
},
quantity: 2,
subtotal: 100
}
]
},
version: '1.1.3',
campaigns: [
{
id: "PROMO124",
name: "SS18 SALE",
description: "1500 models for sale",
category: "Banner",
subcategory: "Sales",
design: "600x120",
position: "left"
}
],
recommendation: [
{
listName: "Recently viewed products",
listId: "recentlyViewed",
items: [
{
id: "1234567890",
url: "http://website.com/product.html",
imageUrl: "http://website.com/image.png",
thumbnailUrl: "http://website.com/image_thumb.png",
name: "Big Boots",
description: "Product description",
manufacturer: "Timberland",
category: ["Footwear","Boots"],
currency: "GBP",
unitPrice: 60,
unitSalePrice: 50,
skuCode: "TBL6065RW"
}
]
},
]
}
/* Here you should place the snippet of the initialization of the SegmentStream library */
For convenience, we did not list the repeating elements of the recommendations, items, campaigns, lineItems arrays but left just one example in each.