Métricas Boss

Guia de implementação da camada de dados para e-commerce

Existem duas maneiras de carregar essas informações dentro do código fonte, a primeira seria atrelando as informações antes da implementação do google tag manager no HEAD, a segunda seria passando as informações através de eventos personalizados criados diretamente na camada de dados.

Anexando informações antes da implementação do google tag manger no HEAD

<script>
  var dataLayer = window.dataLayer || [];
      dataLayer.push({
        'propriedade_1': 'valor_1',
        'propriedade_2': 'valor_2'
      });
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>
<!-- End Google Tag Manager -->

É importante ressaltar que, os dados passados sem evento personalizado serão recebidos dentro do GTM como o evento message. Você irá usar os dados atrávés dos eventos padrões do google tag manager (por exemplo, “Click”, “Link click” e etc).

Passando informações através de eventos personalizados

Antes de passar o exemplo, primeiro é importante definir para que serve um evento personalizado. Segue a definição do próprio google tag manager:

Os eventos personalizados são usados para acompanhar as interações que ocorrem no seu site ou app para dispositivos móveis que não são tratadas pelos métodos padrão. O caso de uso mais comum é quando você quer monitorar envios de formulários, mas o comportamento padrão do formulário foi alterado (por exemplo, o evento de navegador submit foi modificado). Fonte

Visto isso, vamos ao exemplo de como implementar um evento personalizado:

  // Esses valores podem ser passados desde um retorno de função ou execução de um bloco de código javascript
  var dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'personalizado'
      });
  
  <!-- Ou disparando direto do elemento   -->
  <a href="#" name="button1" onclick="dataLayer.push({'event': 'personalizado'});">Button 1</a>
  <!-- Inclusive passando informações atreladas ao evento seja direto do elemento -->
  <a href="#" name="button2" onclick="dataLayer.push({'event': 'personalizado','propriedade_1': 'valor_1'});">Button 2</a>
  // Ou passando as informações atreladas no evento direto do javascript
  var dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'personalizado',
        'propriedade_1': 'valor_1'
      });  

Lista variáveis aplicáveis a templates e componentes

Dados globais

As informações abaixo devem estar presentes em todos os templates do e-commerce. Chamaremos esse objeto de globalFieldData.

ChaveTipoObrigatórioDescrição
pageCategorytextNãoNome do template que está sendo carregado, (por exemplo, Home, Category, Product, Checkout, Search Results e Other).
pageDepartmenttextNãoDepartamento ou o nome da categoria (por exemplo, Feminino, Masculino.)
pageTitletextNãoTitulo da página.
virtualPagePath*textNãoPath da página, utilizado para casos de emulação de página.
userIdtextNãoId do usuário dentro da sua base de dados. Preencher esse valor somente quando usuário estiver logado. Enquanto não, retornar null
productImpressionsIdsArrayNãoListar todos os ids de produto carregados na página (por exemplo, ['134', '125', '521'])
productImpressionsSkusArrayNãoListagem de todos os skus carregados na página (por exemplo, ['VA1E123', 'VA1E456', 'VI1E123', 'VI1E456', 'VU1E123', 'VU1E456'])

*No caso de ser uma página emulada passar o valor emulado da mesma, exemplo: Imagina que você está nesses onePageCheckout a cada mudança do passo deverá ser passado o titulo do mesmo.

Dados do produto

Os dados do produto representam produtos individuais que foram visualizados, adicionados/removidos ao/do carrinho de compra e etc. Por padrão, iremos utilizar o mesmo que o google e chamararemos esse objeto de productFieldObject. Abaixo segue a lista de valores contidos nesse objeto:

ChaveTipoObrigatórioDescrição
idtextSim*O ID produto (por exemplo, P67890). *Esse campo ou nome precisa ser definido.
nametextSim*O nome do produto (por exemplo, camiseta do Android). *Esse campo ou ID precisa ser definido.
brandtextNãoA marca associada ao produto (por exemplo, Nike).
categorytextNãoA categoria à qual o produto pertence (por exemplo, vestuário).
categoryTreeArrayNãoLista de categoria do produto. Especificar até cinco níveis de hierarquia (por exemplo, ['Masculino', 'Camisa'])
varianttextNãoA variante do produto cor/tamanho ou o seu SKU
priceFromcurrencyNãoO preço de cadastro de um produto (por exemplo, 39.20).
pricecurrencyNãoO preço de venda do produto (por exemplo, 29.20).
quantityintegerNãoA quantidade de um produto (por exemplo, 2).

Dados de impressões

Representa as informações sobre um produto que foi exibido em uma vitrine/prateleira. Iremos chamar esse objeto de impressionFieldObject seguindo o padrão do google.

ChaveTipoObrigatórioDescrição
idtextSim*O ID produto (por exemplo, P67890). *Esse campo ou nome precisa ser definido.
nametextSim*O nome do produto (por exemplo, camiseta do Android). *Esse campo ou ID precisa ser definido.
listtextNãoA lista ou conjunto ao qual o produto pertence (por exemplo, Resultado de pesquisa, Mais vendidos
brandtextNãoA marca associada ao produto (por exemplo, Nike).
categorytextNãoA categoria à qual o produto pertence (por exemplo, vestuário).
categoryTreeArrayNãoLista de categoria do produto especificar até cinco níveis de hierarquia (por exemplo, ['Masculino', 'Camisa'])
varianttextNãoA variante do produto cor/tamanho ou o seu SKU
positionintegerNãoa posição do produto dentro do loop de 1 a n
priceFromcurrencyNãoO preço de cadastro de um produto (por exemplo, 39.20).
pricecurrencyNãoO preço de venda do produto (por exemplo, 29.20).

Dados de pesquisa

Informações sobre a busca realizada por um usuário. Iremos chamar essas informações de searchFieldData.

ChaveTipoObrigatórioDescrição
siteSearchTermtextNãoValor da pesquisa realizada pelo usuário
siteSearchResultsintegerNãoQuantidade de resultados encontrados

Dados do carrinho

As informações presentes abaixo devem estar na página de carrinho. Chamaremos essas informações de cartFieldData.

ChaveTipoObrigatórioDescrição
cartFormTotalcurrencyNãoValor total do carrinho até o momento
cartFormShippingcurrencyNãoValor da entrega. Caso o usuário ainda não tenha preenchido retornar null
cartFormProductsArrayNãoRetornar lista de productFieldObject

Dados do checkout

Informações presentes no processo de compra. Chamaremos essas informações de checkoutFieldData.

ChaveTipoObrigatórioDescrição
checkoutStepintegerNãoNúmero do passo que o usuário se encontra no processo de compra (por exemplo, 1, 2)
checkoutStepNametextNãoString do passo que o usuário se encontra no processo de compra (por exemplo, carrinho, email, shipping, payment)

Dados de transação

Informações da transação realizada. Chamaremos esse dados de transactionFieldData.

ChaveTipoObrigatórioDescrição
transactionIdtextSimId da transação
transactionTotalcurrencySimValor total da transação incluindo taxas e valor de entrega
transactionShippingcurrencyNãoValor da entrega
transactionTaxcurrencyNãoValor das taxas
transactionProductsArrayNãoRetorna lista de productFieldObject

Eventos

EventoDescrição
homeViewDispara quando carregada a home
categoryViewDispara quando carregada uma página de categoria
internalSiteSearchViewDispara quando carregada página de resultado de pesquisa
productViewDispara quando carregada página de detalhe de produto
addToCartDispara quando usuário adicionar produto ao carrinho
removeFromCartDispara quando usuário remove produto do carrinho
cartViewDispara quando carregada página do carrinho
checkoutDispara quando carregada página e/ou etapa do checkout
orderPlaced*Dispara quando carregada página de finalização de pedido

Também pode ser disparado no callback de uma função, caso não exista tela de finalização de pedido na sua plataforma. Retornar os dados independente do status do pedido, tanto na tela de sucesso quanto na tela de falha, caso exista.

Home View (homeView)

Informações que serão disparadas na home

  • Dados globais globalFieldData;
  • Dados de impressões impressionProductFieldObject;
<script>
  dataLayer.push({
    'event': 'homeView',
    'userId': '1272',
    'pageCategory': 'home',
    'pageDepartment': null,
    'pageTitle': 'Home page',
    'virtualPagePath': '/',
    'productsImpressionsIds' ['134', '125', '521'],
    'productsImpressionsSkus' ['VA1E123', 'VA1E456', 'VI1E123', 'VI1E456', 'VU1E123', 'VU1E456'],
    'impressions': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'position': 1
    }]
  });
</script>

Category View (categoryView)

Informações que serão disparadas nas páginas de categoria

  • Dados globais globalFielData;
  • Dados de impressões impressionProductFieldObject;
<script>
  dataLayer.push({
    'event': 'categoryView',
    'userId': '1272',
    'pageCategory': 'category',
    'pageDepartment': 'Camisa',
    'pageTitle': 'Category page',
    'virtualPagePath': '/category',
    'productsImpressionsIds' ['134', '125', '521'],
    'productsImpressionsSkus' ['VA1E123', 'VA1E456', 'VI1E123', 'VI1E456', 'VU1E123', 'VU1E456'],
    'impressions': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'position': 1
    }]
  });
</script>

Internal Site Search View (internalSiteSearchView)

Informações que serão disparadas nas páginas de resultado de pesquisa

  • Dados globais globalFielData;
  • Dados de pesquisa searchFielData;
  • Dados de impressões impressionProductFieldObject;
<script>
  dataLayer.push({
    'event': 'internalSiteSearchView',
    'userId': '1272',
    'pageCategory': 'search',
    'pageDepartment': null,
    'pageTitle': 'Result search page',
    'virtualPagePath': '/search/camisa',
    'productsImpressionsIds' ['134', '125', '521'],
    'productsImpressionsSkus' ['VA1E123', 'VA1E456', 'VI1E123', 'VI1E456', 'VU1E123', 'VU1E456'],
    'impressions': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'position': 1
    }]
  });
</script>

Product View (productView)

Informações que serão disparadas nas páginas de produto

  • Dados globais globalFielData;
  • Dados de produto productFieldObject;
<script>
  dataLayer.push({
    'event': 'productView',
    'userId': '1272',
    'pageCategory': 'home',
    'pageDepartment': null,
    'pageTitle': 'Home page',
    'virtualPagePath': '/',
    'product': {
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
    }
  });
</script>

Add to cart (addToCart)

Informações que são disparadas quando adicionado um produto no carrinho

  • Dados de produto productFieldObject;
<script>
  dataLayer.push({
    'event': 'addToCart',
    'product': {
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'quantity': 1
    }
  });
</script>

Remove from cart (removeFromCart)

Informações que são disparadas quando removido um produto no carrinho

  • Dados de produto productFieldObject;
<script>
  dataLayer.push({
    'event': 'removeFromCart',
    'product': {
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'quantity': 1
    }
  });
</script>

Cart View (cartView)

Informações que serão disparadas na página de carrinho

  • Dados globais globalFielData;
  • Dados do checkout checkoutFieldData;
  • Dados de carrinho cartFieldData;
<script>
  dataLayer.push({
    'event': 'cartView',
    'userId': '1272',
    'pageCategory': 'cart',
    'pageDepartment': null,
    'pageTitle': 'Cart page',
    'virtualPagePath': '/',
    'checkoutStep': 1,
    'checkoutStepName': 'cart',
    'cartFormTotal': 18.28,
    'cartFormShipping': 1.29,
    'cartFormProducts': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'quantity': 1
    }]
  });
</script>

Checkout (checkout)

Informações que serão disparadas no processo de checkout

  • Dados globais globalFielData;
  • Dados de checkout checkoutFieldData;
  • Dados de carrinho cartFieldData;
<script>
  dataLayer.push({
    'event': 'checkout',
    'userId': '1272',
    'pageCategory': 'checkout',
    'pageDepartment': null,
    'pageTitle': 'Checkout page or step',
    'virtualPagePath': '/',
    'checkoutStep': 2,
    'checkoutStepName': 'email', 
    'cartFormTotal': 18.28,
    'cartFormShipping': 1.29,
    'cartFormProducts': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'variant': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'quantity': 1
    }]
  });
</script>

Order placed (orderPlaced)

Informações que serão disparadas na página de finalização de pedido

  • Dados globais globalFielData;
  • Dados de transação transactionFieldData;
<script>
  dataLayer.push({
    'event': 'orderPlaced',
    'userId': '1272',
    'pageCategory': 'checkout',
    'pageDepartment': null,
    'pageTitle': 'Checkout page or step',
    'virtualPagePath': '/',
    'transactionId': '1234', // obrigatório
    'transactionAffiliation': 'Roupas Acme', // Loja que vai entregar o pedido
    'transactionTotal': 18.28, //obrigatório
    'transactionTax': 1.29,
    'transactionShipping': 5,
    'transactionProducts': [{
      'name': 'Camiseta',
      'id': '134',
      'price': 11.99,
      'priceFrom': 15.99,
      'brand': 'Nike',
      'sku': 'VA1E123',
      'category': 'Camisa',
      'categoryTree': ['Masculino', 'Camisa'],
      'quantity': 1
    }]
  });
</script>