This guide helps you implement the W3C specification to seamlessly share data with Fresh Relevance and other service providers.
Benefits
When you implement the W3C Digital Data Layer using the specification, you won't need to duplicate efforts to expose data to multiple providers, such as:
Fresh Relevance
Analytics providers
Tag management providers
This standardization offers two main advantages:
Faster implementation
Product data is exposed in a standard format that Fresh Relevance recognizes and works with immediately.
Enhanced real-time functionality
Enables more creative and effective use of real-time data for decision making.
Before you start
Things you need to know:
Review the complete specification at W3C Digital Data Layer specification.
Validate your website's compliance using this interactive validator.
How it works
The W3C Digital Data Layer stores information as a single global JavaScript variable named digitalData. This array contains all data for the Digital Data Layer:
All pages have a page object.
Other content varies by page type and context.
Implementation examples
Home page
All pages should include a user object. If no user is logged in, set fields as shown in these examples.
Basic home page implementation
<!-- 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 home page implementation
<!-- 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
The product details should be presented in the following format to allow Fresh Relevance to extract information immediately. The product element is an array that typically has only one entry on product pages.
Basic product page implementation
<!-- 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 product page implementation
<!-- 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 should exist on all pages (not just the cart/basket page) whenever items exist in the cart.
Basic cart page implementation
<!-- 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 cart page implementation
<!-- 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
The data structure for the purchase confirmation page should include transaction details.
Basic confirmation page implementation
<!-- 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 confirmation page implementation
<!-- 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 -->
Best practices
Use escape characters before forward slashes in URLs, for example, http:\/\/.
Always include a try-catch block around your Digital Data Layer code
Ensure all page types have the correct pageType value
Include the user object on all pages
For authenticated users, include detailed profile information
Keep the structure consistent across all pages