Expand my Community achievements bar.

capture products array in checkout page

Avatar

Level 2

Hi, I am trying to capture product name and SKU of all the products that added to cart on the checkout page. how to set up data elements and rule in Adobe Launch? I assume it may require custom code? Does anyone know?

SC

10 Replies

Avatar

Community Advisor

Yes. I have done this too many times to count.

Custom JS is probably required.

To be more helpful, can you answer a couple questions?

1) Do you know where the cart item data exists on the page?

2) Are you lucky enough to have this data in a data layer that can be easily accessed from JavaScript?

3) What do you want to do with this data (include in an Adobe Analytics beacon? Populate a 3rd Party Tag? Other?)

Hi Stewart,

Please see my answers below-

1)2) I have all the product infor (name, sku, category) in a data layer and can access from JacaScript.

3) I include this data in an Adobe Analytics beacn.

Avatar

Community Advisor

Would you mind providing an example of the data layer JSON object?

Would you mind providing the AA requirements? events, and evars

With this, I can get you pointed in the right direction.

1) Right now, below is the code I used in a Data element to capture the product information via JSON-

prodList = [];

for (var i=0;i< window.digitalData.cart.item.length;i++) {

  var prodName = window.digitalData.cart.item[i].productInfo.productName;

  var prodStyleNumber = window.digitalData.cart.item[i].productInfo.productstyleNumber;

  var prodSKU = window.digitalData.cart.item[i].productInfo.productID;

  var prodCategory = window.digitalData.cart.item[i].productInfo.productCategory;

  var prodQuantity = window.digitalData.cart.item[i].quantity;

   prodList.push(";"+prodName+";"+prodStyleNumber+";"+prodSKU+";"+prodCategory+";"+prodQuantity);

}

return prodList.join(",");

2) I set up eVar2 for Product Name, eVar3 for style number, eVar 4 for SKU and eVar 5 for category.

I also randomly set up an eVar12, which can capture the value of the value data element above. However, I cannot have the s.products work, nor have all the individual value flow into eVar 2-5 separately.

Avatar

Community Advisor

//try this

digitalData = {

  "cart": {

    "item": [{

      "productInfo": {

        "productName": "productName_1",

        "productstyleNumber": "productstyleNumber_1",

        "productID": "productID_1",

        "productCategory": "productCategory_1"

      },

      "quantity": "3"

    },{

      "productInfo": {

        "productName": "productName_2",

        "productstyleNumber": "productstyleNumber_2",

        "productID": "productID_2",

        "productCategory": "productCategory_2"

      },

      "quantity": "1"

    }]

  }

}

var cartItemCount = window.digitalData.cart.item.length||0;

var productStanzas=[];

for (var i=0; i<cartItemCount; i++) {

  var cartItem = window.digitalData.cart.item[i].productInfo;

  var stanza=[];

  stanza[0] = ""; //empty Catgeory

  stanza[1] = cartItem.productID;

  stanza[2] = ""; //empty quantity

  stanza[3] = ""; //empty unit price

  stanza[4] = ""; //empty product level events

  var stanzaEvars=[];

  stanzaEvars.push("eVar2="+cartItem.productName);

  stanzaEvars.push("eVar3="+cartItem.productstyleNumber);

  stanzaEvars.push("eVar4="+cartItem.productID);

  stanzaEvars.push("eVar5="+cartItem.productCategory);

  stanza[5] = stanzaEvars.join("|");

 

  productStanzas.push(stanza.join(";"));

}

var productString = productStanzas.join(",");

console.log(JSON.stringify(digitalData,"",2), productString);

Avatar

Community Advisor

This is the general idea based on the requirements for an Adobe product string:

A couple notes. 

1) I was not sure whether you wanted to use productName or productID in stanza[1].  I chose productID as it's typically a better identifier than product name (which might change over time or due to localization in foreign languages).

2) I chose to index directly into the product string components using stanza[0], stanza[1], stanza[2]... I do it this way because it is more robust than using the Array.push method.  If push should fail for any reason, your product string components can shift and mess up your data in nasty ways.

3) Be sure that eVars 2-5 are set up in your report suite as merch enabled, product syntax. If they are not, you will collect no data.

That's about it.

If you like this answer please mark it as correct so I will get my points!  IDK why I want them, but I want them.

-Cheers,

Stew Schilling

Analytics Architect

Search Discovery, Inc.

I pasted the code into the custom code in the data element,  it didn't work. I wonder if I need to do anything about the global configuration?

Avatar

Employee Advisor

Hi Siyan, were you able to get everything figured out?

Avatar

Community Advisor

Much of the code is just for exposition (to explain what I'm doing).

For your data element, you'd paste just this much and add a return line as such:

var cartItemCount = window.digitalData.cart.item.length||0;

var productStanzas=[];

for (var i=0; i<cartItemCount; i++) {

  var cartItem = window.digitalData.cart.item[i].productInfo;

  var stanza=[];

  stanza[0] = ""; //empty Catgeory

  stanza[1] = cartItem.productID;

  stanza[2] = ""; //empty quantity

  stanza[3] = ""; //empty unit price

  stanza[4] = ""; //empty product level events

  var stanzaEvars=[];

  stanzaEvars.push("eVar2="+cartItem.productName);

  stanzaEvars.push("eVar3="+cartItem.productstyleNumber);

  stanzaEvars.push("eVar4="+cartItem.productID);

  stanzaEvars.push("eVar5="+cartItem.productCategory);

  stanza[5] = stanzaEvars.join("|");

  productStanzas.push(stanza.join(";"));

}

var productString = productStanzas.join(",");

return productString;

Avatar

Community Advisor

Then in the AA custom code of your cart view rule, you'd set s.products as such:

s.products = _satellite.getVar("_your data element here_");

It's worth noting that since you presently cannot set s.products from anywhere except in AA custom code, you _could_ just use the code above and set s.products directly instead of using a data element.