Search code examples
javascriptarrayssplite-commercegoogle-tag-manager

Javascript for GTM - splitting ecommerce array name element values then returning last section of each as new array


I have a circumstance where I need to use an ecommerce dataLayer array that has incorrect product IDs (currently no dev available to adjust it). The correct product IDs are actually available in the last section of the name values. For single items that's easy to split, then pop and grab the last part of the value and use for id.

I'm not fluent enough to successfully accomplish that for multi element arrays yet, and since it's for Google Tag Manager, no support for ES6. Note in my example array below, the id element values match the last section of the name values, but with extra unneeded characters.

Getting the name (or id) element values as an array is easy enough:

function() {
  var products = {{ecommerce.checkout.products}};
  return products.map(function(prod) { return prod.name; });
}

Which returns my expected array of name values: [ "Webasto Jumper Harness SmarTemp Control - 5012138A", "Valvoline Premium Blue One Solution Gen2 10W30 - C891017GA", "Cummins Solenoid Bracket 3937235" ]

My latest failed attempt to use that product name array, split and pop each of those items for an updated array:

function() {
  var products = {{ecommerce.checkout.products}};
  var ogNames = products.map(function(prod) { return prod.name; });
  var newIDs = ogNames.forEach(function(item) { item.split(" ");
    var last = item.pop(); return item});
return newIDs;
} 

What I'm hoping to get would be simply this [ "5012138A", "C891017GA", "3937235" ]

Here is an example of the ecommerce.checkout.products array that I'm working with:

[
  {
    name: "Webasto Jumper Harness SmarTemp Control - 5012138A",
    id: "5012138AWEBASTO",
    price: "38.49",
    brand: "Webasto",
    category: "Webasto Parts",
    variant: "",
    quantity: 1
  },
  {
    name: "Valvoline Premium Blue One Solution Gen2 10W30 - C891017GA",
    id: "C891017GAVALVOLINE",
    price: "17.5",
    brand: "Valvoline",
    category: "Valvoline Oil",
    variant: "",
    quantity: 1
  },
  {
    name: "Cummins Solenoid Bracket 3937235",
    id: "3937235CECO",
    price: "144.8",
    brand: "Cummins",
    category: "Cummins Genuine Parts",
    variant: "",
    quantity: 1
  }
]

***Triple bonus points if you can show how I can create a new array from the original ecommerce.checkout.products array, replacing all id values with the last section of all corresponding name values split on (" ") and pop().

Thanks for taking a look everyone! I appreciate your expertise and any insight you can provide.


Solution

  • If you want something like this:

    enter image description here

    Then this should be it:

    var newArray = originalArray.map(function(obj){obj.id = obj.name.split(" ").slice(-1)[0];return obj;});
    

    This should all be GTM-friendly.

    I'm using slice instead of pop since pop is mutating and it's quite a good habit to not mutate without need.

    Note that this should be viewed as a temporary solution, a hack.