W3C DDL (Digital Data Layer)
The Digital Data Layer (DDL) is a standardized way of exposing data on your eCommerce site. If you implement according to the specification, you will not have to duplicate your work to expose data to multiple providers (e.g. Fresh Relevance, an analytics provider, and a tag management provider).
W3C DDL impacts two areas:
- Speed of implementation - product data is exposed in a standard way that we recognize and can work with immediately.
- Extended use of real-time data and decision making in creative and effective ways.
The W3C Digital Data Layer is based on storing information used by Fresh Relevance and any other third parties that you have on your website into 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.
All pages should have a user object. If a user is logged in, it will contain various details about the user.
The following example shows how to set these fields when no user is logged in.
Note: All URL attributes should have escape characters before the forward slash e.g. 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 -->
<!-- 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": "[email protected]",
//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 -->
See full specification details at http://www.w3.org/2013/12/ceddl-201312.pdf. Use an interactive validator to check if your website is compliant - http://digitaldatavalidator.com/.
Product Pages
Presenting product details that the user is viewing in this form means that we can extract the information immediately and without any additional work. Note that product is an array. On product pages, this will usually have only one entry.
The following example shows the essential data for the product page. Select Extended example to display 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",
//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 -->
<!-- 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 -->
Carts
The cart object must exist on all pages (not just on the cart/basket page) whenever items exist on the cart.
The following example shows the data structure required for a minimal cart:
<!-- 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 -->
<!-- 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 following example shows the data structure required for the purchase complete page:
<!-- 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 -->
<!-- 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": "[email protected]",
//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 -->
Adobe Commerce / Magento 2 users
The W3C DDL extension adds the W3C Digital Data Layer without any additional work. This exposes store data accurately for access by Fresh Relevance scripts.
Updated 2 months ago