Let's say I want to implement s.products in DTM, using a W3C-standard data layer. My fictional cart has three items in it:
- One Green Wug for 2.97, which will be shipped to me.
- Three Blue Wugs for a total of 39.64, which will be picked up at store number 101.
- One Red Wug for 29.98, which is on backorder.
First, to set up the data layer, I might guide the developers to include products in their data layer, as an array. I went ahead and added this data layer to the current page, so later on you can follow along in a developer console if you'd like. My data layer looks like this, with my overall cart data at the top and my individual items in an array:
//CART
digitalData.cart = {
cartID: "306702397",
price:{
cartTotal: "72.59",
voucherCode: "", //promo code
voucherDiscount: "" //promo amount
},
//CART ITEMS
item:[
//product 1 example: shipped
{
quantity:"1",
price:{
basePrice: "2.97"
},
productInfo:{
sku: "100087613",
productName: "Green Wug",
fulfillmentMethod: "shipped"
}
},
//product 2 example: pickup
{
quantity:"3",
price:{
basePrice: "36.94"
},
productInfo:{
sku: "204642286",
productName: "Blue Wug",
fulfillmentMethod: "pick up in store",
fulfillmentStore: "101"
}
},
//product 3 example: on backorder
{
quantity:"1",
price:{
basePrice: "29.98"
},
productInfo:{
sku: "203202930",
productName: "Red Wug",
fulfillmentMethod: "backorder"
}
}
]
}
Then in DTM, I have logic that loops through that to create the products string. This must be in the custom code- generally I find it easiest to do in the rule's custom code for that page.
I'm going to use a javascript FOR loop to look at each item in my array and build a products string from it. On a product view or a cart view page, all the products string needs is ";SKU", so I will loop through my products array to extract the sku, and append it to my s.products string, along with the leading semi-colon and a trailing comma (which sets up the string for further products, if needed, and doesn't cause any harm if it isn't needed.)
s.prodList=[]; //define the variable array to prevent errors
for (var i=0;i<digitalData.cart.item.length;i++){
s.prodList.push(";"+digitalData.cart.item[i].productInfo.sku)
_satellite.notify(s.prodList.join(","),1)//for debugging purposes, to run for each loop
}
s.products=s.prodList.join(",")
The purchase page, which includes units and revenue, takes it one step further, to create ";SKU;UNITS;PRICE" :
s.prodList=[]; //define the variable array to prevent errors
for (var i=0;i<digitalData.cart.item.length;i++){
s.prodList.push(";"+digitalData.cart.item[i].productInfo.sku+";"
+digitalData.cart.item[i].quantity+";"+digitalData.cart.item[i].price.basePrice);
_satellite.notify(s.prodList.join(","),1)//for debugging purposes, to run for each loop
}
s.products=s.prodList.join(",")
And if I need merchandising eVars, like for "fulfillment method" in eVar8, I might do the following. Things are getting more complicated, so I'm going to split things out a tad more.
s.prodList=[]; //define the variable to prevent errors
for (var i=0;i<digitalData.cart.item.length;i++){
var prodSku=digitalData.cart.item[i].productInfo.sku;
var prodQuantity=digitalData.cart.item[i].quantity;
var prodPrice=digitalData.cart.item[i].price.basePrice;
var prodMethod=digitalData.cart.item[i].productInfo.fulfillmentMethod;
s.prodList.push((";"+prodSku+";"+prodQuantity+";"+prodPrice+";;eVar8="+prodMethod))
_satellite.notify(s.prodList.join(","),1)//for debugging purposes, to run for each loop
}
s.products=s.prodList.join(",")
The above would create the following products string:
s.products=";100087613;1;2.97;;eVar8=shipped,;204642286;3;39.64;;eVar8=pick up in store,;203202930;1;29.98;;eVar8=backorder"
Or, with prettier formatting:
;100087613;1;2.97;;eVar8=shipped,
;204642286;3;39.64;;eVar8=pick up in store,
;203202930;1;29.98;;eVar8=backorder
Take a look in a debugger to see if it worked!