#GTMTips: Create String From Multiple Object Properties

Facebook’s pixel has an attribute named content_ids (required for Dynamic Ads), which requires an Array of content IDs as its value. It’s very possible you’re running this pixel on a site which already has Enhanced Ecommerce for Universal Analytics implemented, and now you want to use the same Enhanced Ecommerce data that your developers have already made available in this Facebook pixel.

Or perhaps you want to concatenate a list of strings, such as article tags (['culture', 'politics']), and send it as a comma-separated string to Google Analytics ('culture,politics').

This is easy to do - just follow this tip!

Tip 61: Build an Array or concatenated string from multiple object properties

With JavaScript’s Array methods, this is easy to do. Here’s a walkthrough using an actual example.

Let’s say you have an order receipt page on your ecommerce store, where you have implemented the following Enhanced Ecommerce purchase setup:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'ecommerce',
  ecommerce: {
    purchase: {
      actionField: {
        id: 'order1',
        revenue: '10.00'
      },
      products: [{
        id: 'product1',
        price: '6.00',
        quantity: 1
      },{
        id: 'product2',
        price: '4.00',
        quantity: 1
      }]
    }
  }
});

If you know your Enhanced Ecommerce, this code represents a well-formed purchase object, and if you have an Enhanced Ecommerce enabled tag firing on an ecommerce Custom Event Trigger, you should be able to collect this purchase data in your Universal Analytics property.

But now we have a pixel (such as Facebook), which requires an Array of only the product IDs (i.e. ['product1', 'product2']. Or, you might have a tracker, which requires a comma-separated string of the same (i.e. 'product1,product2'].

First, you’ll need to create a Data Layer Variable which points to the Array that holds the objects whose properties you want to access. In this case, it would be ecommerce.purchase.products:

I’ve chosen to name this {{DLV - ecommerce.purchase.products}}.

Next, you’ll need a Custom JavaScript Variable where the magic happens. This variable returns an Array of all the product IDs (i.e. ['product1', 'product2']).

function() {
  var products = {{DLV - ecommerce.purchase.products}};
  return products.reduce(function(arr, prod) { return arr.concat(prod.id); }, []);
}

The reduce() method basically takes an Array (the products Array), and for every member in the Array you can choose to increment an accumulator (an empty Array in this case) with the data of your choice. In this case, we’re taking the id value from every item in the Array, and building a new Array with this information.

If you want to turn this into a comma-separated string (i.e. 'product1,product2'), you only need to chain another Array method to the return statement:

function() {
  var products = {{DLV - ecommerce.purchase.products}};
  return products.reduce(function(arr, prod) { return arr.concat(prod.id); }, []).join();
}

The join() method flattens any Array into a string, using whatever you pass into the parentheses as the separator. If you don’t explicitly define a delimiter, a comma is automatically used.

These two functions should let you easily turn any complex Array of objects into a single, straightforward data structure - whatever you need in any given situation.

UPDATE: Thanks to postman31’s comment below, you can also use the Array.prototype.map() method to perform these tasks even more elegantly.

function() {
  var products = {{DLV - ecommerce.purchase.products}};
  return products.map(function(prod) { return prod.id; });
  // OR:
  // return products.map(function(prod) { return prod.id; }).join();
}