If you implement the W3C Digital Data Layer using the specification, it means that you won’t have to duplicate your work to expose data to multiple providers, for example, Fresh Relevance, an analytics provider, and a tag management provider.
There are two main areas where this is beneficial:
Increased speed of implementation
Because product data is exposed in a standard way that Fresh Relevance recognises and can work with immediately.Real-time data functionality
Extended use of real-time data and decision making in creative and effective ways.
Before you start
Things you need to know:
How it works
The W3C Digital Data Layer is based around storing information used by Fresh Relevance and any other third parties that you have on your website as a single global variable.
This variable, an array, is named digitalData and contains all data for the Digital Data Layer. All pages have a page object within this. Other contents are more specific to each page and context.
Home page
All pages should have a user object, if there is a logged in user then it contains various details about the user.
These examples shows how these fields should be set if there is no user logged in:
Simple
All URL attributes should have escape characters before the forward slash, for example, http:\/\/.
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
//Unique ID to identify the page
"pageID": "Home Page",
//The URL of the page
"destinationURL": "http:\/\/www.yoursite.com\/home"
},
"category": {
//The type of page e.g. Home, Product, Cart, login etc.
"pageType": "home"
}
},
"user": [
{
//This where a profile about the user is stored
//Stored as an array, although typically only one profile per user
"profile":[
{
"profileInfo":{
//The returning status of the user
"returningStatus": "false",
}
}
]
}
],
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Extended
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
//Unique ID to identify the page
"pageID": "Home Page",
//The name of the page, generally the taken from the title tag of the page
"pageName": "Your Site - Home",
//The URL of the page
"destinationURL": "http:\/\/www.yoursite.com\/home",
//The URL of the page the user has just come from
"referringURL": "http:\/\/www.yoursite.com\/sale"
},
"category": {
//The type of page e.g. Home, Product, Cart, login etc.
"pageType": "home"
}
},
"user": [
{
//This where a profile about the user is stored
//Stored as an array, although typically only one profile per user
"profile":[
{
"profileInfo":{
//A unique ID to identify the user
"profileID": "09876QWER",
//The user's email
"email": "user@example.com",
//The user's first name
"userFirstName": "First Name",
//The user's last name
"userLastName": "Last Name,
//This is used to identify which user group the logged in user is part of
segment: {
//The Id of the customer group
userGroupId: "2",
//The name of the customer group
userGroupName: "Professional Photographer"
}
//The language the user has the website set to
"language": "en-US",
//The returning status of the user
"returningStatus": "true"
}
}
]
}
],
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Product pages
Presenting the details of the product that the user is viewing in the following forms means that Fresh Relevance can extract the information immediately without any further work.
Product is an array, on product pages this usually has only one entry.
Simple
Here is a simple example showing the essential data for the product page:
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Nikon Coolpix L30 - Cameras",
"destinationURL": "http://www.yoursite.com/product/3"
},
"category": {
"pageType": "product"
}
},
"product": [
{
"productInfo": {
// Unique product ID
"productID": "nikoncoolpixl30",
//The name of the product
"productName": "Nikon Coolpix L30",
//Brief description of the Product
"description": "Coolpix L30 offers power and clarity with a high pixel count ",
//The Canonical URL of the product
"productURL": "http:\/\/www.yoursite.com\/product\/3",
//Large image of the product
"productImage": "http:\/\/www.yoursite.com\/product\/images\/3.jpg",
//Thumbnail image of the product
"productThumbnail": "http:\/\/www.yoursite.com\/product\/thumbnails\/3.jpg"
},
"price": {
// The base price of the item, as a number
"basePrice": 40.00,
//The relevant currency code the product is currently in
"currency": "GBP"
}
}
]
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Extended
This is an extended example showing a full list of data that can be contained in a product:
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Nikon Coolpix L30 - Cameras",
"destinationURL": "http:\/\/www.yoursite.com\/product\/3"
},
"category": {
"pageType": "product"
}
},
"product": [
{
"productInfo": {
// Unique product ID
"productID": "nikoncoolpixl30",
// Stock keeping Unit for the product, if different from the Product ID
"sku": "nikoncoolpixl30black",
//The name of the product
"productName": "Nikon Coolpix L30",
//Brief description of the Product
"description": "Coolpix L30 offers power and clarity with a high pixel count ",
//The Canonical URL of the product
"productURL": "http:\/\/www.yoursite.com\/product\/3",
//Large image of the product
"productImage": "http:\/\/www.yoursite.com\/product\/images\/3.jpg",
//Thumbnail image of the product
"productThumbnail": "http:\/\/www.yoursite.com\/product\/thumbnails\/3.jpg",
//The brand or manufacturer of the product
"manufacturer": "Nikon",
//The appropriate size and measurements, but could also be a number
"size": "64GB",
//The color of the product
"color": "Black"
},
"attributes": {
// A list of optional attributes
//This could be anything extra, that's not listed above
//Could be any data type, such as string, number etc.
"weight": 200,
"batteries": "2xAA",
"megapixels": 20
},
"category": {
//The main category that this product comes under
"primaryCategory": "Nikon Cameras",
//A sub-category that the product comes under
"subcategory1": "All: Cameras",
//Can include as many sub-categories as desired
"subcategory2": "Summer Sale",
//This could be used for any type of product, e.g. simple, configurable, downloadable
"productType": "simple"
},
"price": {
// The base price of the item, as a number
"basePrice": 40.00,
//The relevant currency code the product is currently in
"currency": "GBP",
//The tax rate that will be applied to the product in the cart
"taxRate": 0.20,
//Price of the item including tax and any sale savings
"priceWithTax": 48.00
},
//Product that has been linked to the main product, generally used for a configuration of a product
//But can be used for products specific to the main main product, like the example below
"linkedProduct": [
{
"productInfo": {
"productID": "nikoncharger",
"sku": "nikonchargerB",
"productName": "Nikon Camera Charger",
"description": "Coolpix L30 offers power and clarity with a high pixel count ",
"productURL": "http:\/\/www.yoursite.com\/product\/3a",
"productImage": "http:\/\/www.yoursite.com\/product\/images\/3a.jpg",
"productThumbnail": "http:\/\/www.yoursite.com\/product\/thumbnails\/3a.jpg",
"manufacturer": "Nikon",
"size": "1m",
"color": "Black"
}
}
]
}
]
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Cart page
The cart object exists on all pages (not just on the cart/basket page) whenever items exist on the cart.
Simple
Here are examples showing the data structure required for a cart page:
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Cart Page",
"destinationURL": "http:\/\/www.yoursite.com\/cart"
},
"category": {
"pageType": "basket"
}
},
"cart": {
//Unique ID to identify the cart
"cartID": "346346AFJ",
"price": {
// The sub-total of the cart, without delivery, p&p costs etc.
"basePrice": 40.00,
//The relevant currency code that the cart is in
"currency": "GBP"
},
"item": [
{
"productInfo": {
// Unique product ID
"productID": "nikoncoolpixl30",
//The name of the product
"productName": "Nikon Coolpix L30",
//Brief description of the Product
"description": "Coolpix L30 offers power and clarity with a high pixel count ",
//The Canonical URL of the product
"productURL": "http:\/\/www.yoursite.com\/product\/3",
//Large image of the product
"productImage": "http:\/\/www.yoursite.com\/product\/images\/3.jpg",
//Thumbnail image of the product
"productThumbnail": "http:\/\/www.yoursite.com\/product\/thumbnails\/3.jpg"
},
"price": {
//The base price of the item
"basePrice": 40.00,
//The currency that this product is currently in
"currency": "GBP"
},
// The quantity of products in the cart, must be a number
"quantity": 1
}
]
}
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Extended
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Cart Page",
"destinationURL": "http:\/\/www.yoursite.com\/cart"
},
"category": {
"pageType": "basket"
}
},
"cart": {
//Unique ID to identify the cart
"cartID": "346346AFJ",
"price": {
// The sub-total of the cart, without delivery, p&p costs etc.
"basePrice": 40.00,
//This can be used to store a discount code, used over the whole cart
"voucherCode": "INTRO555",
//The number value that the voucher takes off the value of the cart
"voucherDiscount": 5.00,
//The relevant currency code that the cart is in
"currency": "GBP",
//The tax rate that will be applied to the cart value as a decimal
"taxRate": 0.20,
//The number value of the shipping cost
"shipping": 10.00,
//Any details about the delivery of the items
"shippingMethod": "Courier",
//Price of all the items, plus tax, but excluding shipping and discounts
"priceWithTax": 48.00,
//The final price of everything, plus shipping, including discounts
"cartTotal": 53.00
},
"attributes": {
//Similar to products, this can be used for custom data
//Relating specifically to the cart itself
"loyaltyCardNo": "123456ASDF",
"paymentType": "Credit Card"
}
//An array of different items that are in the cart
"item": [
{
"productInfo": {
"productID": "nikoncoolpixl30",
"productName": "Nikon Coolpix L30",t
"description": "Coolpix L30 offers power and clarity with a high pixel count ",
"productURL": "http:\/\/www.yoursite.com\/product\/3",
"productImage": "http:\/\/www.yoursite.com\/product\/images\/3.jpg",
"productThumbnail": "http:\/\/www.yoursite.com\/product\/thumbnails\/3.jpg"
},
"price": {
"basePrice": 40.00,
"currency": "GBP"
},
// The quantity of products in the cart, must be a number
"quantity": 1
}
]
}
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Purchase complete page
Here are examples showing the data structure required for the purchase complete page:
Simple
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Confirmation Page",
//Should be where the customer's purchase is fully complete, after order review, payment etc.
"destinationURL": "http:\/\/www.yoursite.com\/confirm"
},
"category": {
//This will be what's used to identify that it is a purchase complete page
"pageType": "confirmation"
}
//The transaction object is used to store any data about the order just placed
"transaction": {
"transactionID": "T0123456789"
}
}
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
Extended
<!-- W3C Digital Data Layer Start -->
<script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Confirmation Page",
//Should be where the customer's purchase is fully complete, after order review, payment etc.
"destinationURL": "http:\/\/www.yoursite.com\/confirm"
},
"category": {
//This will be what's used to identify that it is a purchase complete page
"pageType": "confirmation"
}
//The transaction object is used to store any data about the order just placed
"transaction": {
"transactionID": "T0123456789",
"total": {
// The sub-total of the cart, without delivery, p&p costs etc.
"basePrice": 40.00,
//This can be used to store a discount code, used over the whole cart
"voucherCode": "INTRO555",
//The number value that the voucher takes off the value of the cart
"voucherDiscount": 5.00,
//The relevant currency code that the cart is in
"currency": "GBP",
//The tax rate that will be applied to the cart value as a decimal
"taxRate": 0.20,
//The number value of the shipping cost
"shipping": 10.00,
//Any details about the delivery of the items
"shippingMethod": "Courier",
//Price of all the items, plus tax, but excluding shipping and discounts
"priceWithTax": 48.00,
//The final price of everything, plus shipping, including discounts
"transactionTotal": 53.00
},
//This should store information about the user associated with the transaction
"profile": {
"profileInfo": {
//A unique ID to identify the user
"profileID": "09876QWER",
//The user's email
"email": "user@example.com",
//The user's first name
"userFirstName": "First Name",
//The user's last name
"userLastName": "Last Name"
},
//The billing address in standard address format
"address: {
//Line 1 should be company name, or the person's name
"line1": "Mr Firstname Lastname",
"line2": "30 St Mary Axe",
"city": "London",
"stateProvince": "Greater London",
"postalCode": "EC3A 8EP",
"country": "United Kingdom"
},
//Same as above for the delivery address
"shippingAddress": {
"line1": "Mr Firstname Lastname",
"line2": "30 St Mary Axe",
"city": "London",
"stateProvince": "Greater London",
"postalCode": "EC3A 8EP",
"country": "United Kingdom"
}
}
}
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->