Loop para ler arrays no Google Tag Manager

Problema:

Meu dataLayer tem um array para cada produto, e cada produto tem várias informações. Preciso dessa informações (nome, por exemplo) em uma única variável.

Como resolver?

Criar uma variável do tipo "JavaScript personalizado" que faça um loop através de cada índice do array, coletando a informação ali presente e gravando em um outro array.

O que é um array?

Um código vale mais do que palavras...

Exemplo qualquer:

"employees":[
    {
      "firstName":"John",
      "lastName":"Doe"
    }, 
    {
      "firstName":"Anna",
      "lastName":"Smith"
    }, 
    {
      "firstName":"Peter",
      "lastName":"Jones"
    }
]

Um array (simplificado) que existe dentro do dataLayer da página orderPlaced (pedido confirmado) da VTEX:

transactionProducts: [
    {
        "id": "2000020",
        "name": "Teste",
        "sku": "2000021",
        "price": 1,
        "sellingPrice": 1,
        "quantity": 2,
        "unitMultiplier": 1
    },
    {
        "id": "2000000",
        "name": "Cordas de Guitarra",
        "sku": "2000001",
        "price": 9,
        "sellingPrice": 8.50,
        "quantity": 3,
        "unitMultiplier": 1
    },
    {
        "id": "4840",
        "name": "Palhetas PVC",
        "sku": "4840",
        "price": 1.5,
        "sellingPrice": 1.35,
        "quantity": 1,
        "unitMultiplier": 1
    }
]

Arrays são escritos sempre entre colchetes no JSON - [ e ].
Cada item dentro do array é um índice.
Ler transactionProducts[1] iria resultar em{"id": "2000000", "name": "Cordas de Guitarra", "sku": "2000001", "price": 9, "sellingPrice": 8.50, "quantity": 3, "unitMultiplier": 1}. Este é o resultado do índice "1" do array; o que vem antes é o índice "0" (transactionProducts[0]).
Ler transactionProducts[1].name resulta em Cordas de Guitarra.
Ler transactionProducts[0].name resulta em Teste.

Considerando este array, queremos um outro array apenas com os nomes dos produtos, o que deve resultar em ["Teste", "Cordas de Guitarra", "Palhetas PVC"].

Como resolver, novamente?

Antes do script, vamos criar uma variável no GTM que deve ler o transactionProducts do dataLayer. Vou chamar ela de "transactionProducts" mesmo.

Agora a variável, que vou chamar de "transactionProductsNames" e é um "JavaScript personalizado" com o seguinte script:

function() {
    var
      arr = {{transactionProducts}},
      len = arr.length,
      i = -1,
      res = [];

    while (++i < len) {
        res[i] = arr[i].name;
    };

    return res;
}

O script acima, irá verificar a propriedade name em cada índice do array presente na variável {{transactionProducts}} e retorná-los em um único array, como exposto anteriormente. Ou seja, o valor de "transactionProductsNames" será ["Teste", "Cordas de Guitarra", "Palhetas PVC"].

Ok, mas não é o que eu preciso

Certo, você quer os dados separados por um "pipe" |, para fazer a integração com a tag do eBit, né?

Então vamos criar outra variável, que vou chamar de "pipeTransactionProductsValues", também do tipo "JavaScript personalizado", com o seguinte script:

function() {
  return {{transactionProductsNames}}.join('|');
}

Ela vai pegar o array gerado em {{transactionProductsNames}} e juntar todos os dados, separando os apenas pelo pipe. O resultado será Teste|Cordas de Guitarra|Palhetas PVC

Se você precisa dos valores separados por vírgula - para ter Teste,Cordas de Guitarra,Palhetas PVC -, bastava fazer o script assim:

function() {
  return {{transactionProductsNames}}.join(',');
}

Resumo:

Temos o {{transactionProducts}}, que é um array cheio de informações.
Temos o {{transactionProductsNames}}, que é um script que irá resultar em um array apenas com os nomes dos produtos.
Temos o {{pipeTransactionProductsNames}}, que é o resultado de um script que colocou todos os valores apenas separados por "pipe" |.

Eu poderia... ?

Sim, você poderia fazer apenas da seguinte forma e já ter os valores separados por "pipe"...

function() {
    var
      arr = {{transactionProducts}},
      len = arr.length,
      i = -1,
      res = [];

    while (++i < len) {
        res[i] = arr[i].name;
    };

    return res.join('|');
}

... mas eu gosto de ter todos os valores abertos, pois posso precisar dessas informações em outras tags, além de até ficar mais fácil de "debugar".

Como faço para ter os preços, dessa mesma forma?

Só seguir a lógica... Você já tem a variável com os dados dos produtos - "transactionProducts". Basta o script abaixo para ter os "transactionProductsPrices":

function() {
    var
      arr = {{transactionProducts}},
      len = arr.length,
      i = -1,
      res = [];

    while (++i < len) {
        res[i] = arr[i].sellingPrice;
    };

    return res;
}

O resultado seria ["1", "8.50", "1.35"].

E depois criar a "pipeTransactionProductsPrices" dessa forma:

function() {
  return {{transactionProductsPrices}}.join('|');
}

O resultado seria 1|8.50|1.35.

Minha tag do eBit, depois de tudo que é necessário criado? Ficou assim:

<param id="ebitParam" value="email={{visitorEmail}}&deliveryTax={{transactionShipping}}&totalSpent={{transactionTotal}}&value={{pipeTransactionProductsValues}}&quantity={{pipeTransactionProductsQuantities}}&productName={{pipeTransactionProductsNames}}&transactionId={{transactionId}}&sku={{pipeTransactionProductsSkus}}&buscapeId={{buscapeId}}&storeId={{ebitId}}"/>

<script type="text/javascript" id="getSelo" src="https://imgs.ebit.com.br/ebitBR/selo-ebit/js/getSelo.js?{{ebitId}}&lightbox=true"></script>

Boa sorte!

Extra

Explicando a ação do script, considerando:

function() {
    var
      arr = {{transactionProducts}},
      len = arr.length,
      i = -1,
      res = [];

    while (++i < len) {
        res[i] = arr[i].name;
    };

    return res;
}

Ele é uma função que vai ler o array arr, descobrir o seu tamanho len (número de índices), considerar que o índice i é -1 e criar um array para o resultado res.

O índice i começa em -1. Ele soma 1 (resultando em 0) e verifica se o número é menor que o total len de índices i - que é 2. Se verdadeiro, ele verifica a propriedade name contida no índice i (que é 0) do array arr - neste momento arr[0].name e grava o resultado em res[0].

Quando o índice for 2, no próximo loop de while ele passa a ser 3, encerrando a função e executando return res, que informa o valor final ao Google Tag Manager e define o valor da variável.

garrucho/gtmDataLayerArray.md