Nós usamos cookies em nosso site para melhorar sua experiência e armazenar estatísticas de navegação.

Google Tag Manager - Camada de Dados / DataLayer

O Google Tag Manager (GTM) permite o acionamento de ações e tags de script com base nos dados disponibilizados em cada página do seu e-commerce.


A plataforma de e-commerce da Uoou Solutions disponibiliza em cada página uma camada de dados chamada de "dataLayer".


Neste artigo iremos mostrar:

- As variáveis da Camada de Dados / dataLayer disponilizadas pela plataforma da Uoou Solutions;

- Exemplo prático de Como usar a Camada de Dados dentro do Google Tag Manager;

Considerações importantes

- Você deve saber usar o Google Tag Manager e salvar / publicar versões;

- Você deve entender o conceito de variáveis, tags, acionadores, etc. pois não é foco desse tutorial ensinar esses conceitos.

- Recomendamos o aprendizado desses conceitos antes de começar a utilizar o tutorial abaixo.

Carregamento do dataLayer 

O dataLayer por padrão é carregado já no carregamento da página e normalmente pode ser usado junto com Google Tag Manager ou com outras ferramentas de marketing.

Tipo da Página - Informações sobre pageType

Para cada página a loja virtual envia um "pageType" permitindo a identificação de qual é a página atual e criação de regras específicas para determinadas páginas.


Valores enviados para o pageType em cada página:


PáginaNome do evento de pageType
Página Inicialhomepage
Categoria / Táxontaxon
Buscasearch
Página do Produtoproduct
Página de Conteúdocontent-page
Página de Cadastrocreate-account
Página de Loginlogin
Minha Conta - Página Inicialmy-account
Minha Conta - Dados Cadastraisedit-account
Página de Recuperação de Senhapassword-reset
Carrinho de Comprascart
Checkout - Escolha de Endereçocheckout-address
Checkout - Escolha de Fretecheckout-shipping
Checkout - Tela de Pagamentocheckout-payment
Pedido Finalizadopurchase-confirmation

Geral

Os dados abaixo são exibidos em todas as páginas por padrão.

Nome da variávelDescriçãoTipo
pageTitleTítulo da página, mesmo conteúdo apresentado na tag <title>string
pageTypeTipo da página informando qual é a página atual. O tópico anterior explica em detalhes essa variável. string
pageUrlUrl completa da página atualstring
customerIsAuthenticatedValor: "true" ou "false"
Onde:
"true" significa que o cliente está logado.
"false" significa que o cliente não está logado.
boolean


Cliente Logado

Após o cliente fazer login na loja virtual, os dados abaixo passam a ser preenchidos / disponibilizados no dataLayer em todas as páginas.

Nome da variávelDescriçãoTipo
customerIdIdentificar único interno do cliente na loja virtualstring
customerEmailE-mail do cliente utilizado para fazer loginstring
customerNameNome do cliente que está logadostring

Página do Produto

Variáveis exibidas na página de detalhes do produto. O pageType é "product".

Nome da variávelDescriçãoTipo
productIdIdentificar único interno do produto na lojastring
productNameNome do produtostring
productSkuSKU do produto principalstring
productBrandNome da marca do produtostring
productCategoryIdId da categoria principal do produtostring
productCategoryCodeCódigo interno da categoria principal do produtostring
productCategoryNameNome da categoria principal do produtostring
productImageImagem principal do produtostring
productAditionalImagesImagens adicionais do produtoarray
productAvailabilityValor: "true" ou "false"
Onde:
"true" significa que o produto está disponível para adição ao carrinho.
"false" significa que o produto não está disponível para adicionar ao carrinho.
boolean
productPricePreço de venda do produtonumeric
productRatingContém estatísticas gerais das avaliações do produto.

Campos que são disponibilizados:
- "count": quantidade de avaliações que o produto possui;
- "average": Nota média do produto (valor entre 0 e 5);
- "recommendedCount": Quantidade de avaliações que recomendam o produto;
- "recommendedPercentual": Quantidade % de avaliações que recomendam o produto.

array


Exemplo de dataLayer na página do produto:

{
    "pageTitle": "Camisa Jeans Azul Quintess com Bolsos [Alterado] Varejo Demonstrativa",
    "pageUrl": "https://demotextil.uooucommerce.com.br/camisa-jeans-azul-quintess-com-bolsos",
    "pageType": "product",
    "customerIsAuthenticated": true,
    "customerName": "Uoou Solutions",
    "customerEmail": "teste@uoou.com.br",
    "customerId": "OFE9PQ",
    "productId": "OUZuQXoyTHg",
    "productName": "Camisa Jeans Azul Quintess com Bolsos",
    "productSku": "302019",
    "productPrice": 29.7,
    "productImage": "https://uc-static-images.ucdn.com.br/tr:w-1100,h-1594,c-at_max,pr-true,q-88/a6-owc9pq/pv/2c/f6/27/0dd95de8ac22a4539d80ba1493.jpg",
    "productAditionalImages":     [
      "https://uc-static-images.ucdn.com.br/tr:w-1100,h-1594,c-at_max,pr-true,q-88/a6-owc9pq/pv/7c/7a/99/ff8c98423c0fd3a58fccd8d6de.jpg",
      "https://uc-static-images.ucdn.com.br/tr:w-1100,h-1594,c-at_max,pr-true,q-88/a6-owc9pq/pv/67/c1/de/a38189dd88f97eaad47d3328c9.jpg",
      "https://uc-static-images.ucdn.com.br/tr:w-1100,h-1594,c-at_max,pr-true,q-88/a6-owc9pq/pv/33/28/15/0f60587885f28623487591585d.jpg"
    ],
    "productAvailability": true,
    "productRating":     {
      "count": 2,
      "average": 5,
      "recommendedCount": 2,
      "recommendedPercentual": 100
    },
    "productBrand": "Varejo Demonstrativa",
    "productCategoryName": "LANÇAMENTOS",
    "productCategoryId": "OFYvQg",
    "productCategoryCode": "lançamentos"
}

Pedido Finalizado

Variáveis exibidas na página de pedido finalizado. O pageType é "purchase-confirmation".

Nome da variávelDescriçãoTipo
transactionIdNúmero do pedido da lojastring
transactionPaymentMethodNome do meio de pagamento (pix, credit-card, banking-billet, bank-transfer)string
transactionShippingValor do fretenumeric
transactionTotalValor total do pedidonumeric
transactionProductsItens do pedido, veja as informações de cada produto na tabela abaixo.array


Visualizando variáveis de transactionProducts:


Nome da variávelDescriçãoTipo
idSKU do produtostring
skuSKU do produtostring
nameNome do produtostring
priceValor unitário do produto no carrinhonumeric
quantityQuantidade de itens do produto no carrinhonumeric


Exemplo do dataLayer na página de finalização do pedido:

{
    "pageTitle": "Pedido Finalizado - Varejo Demonstrativa",
    "pageUrl": "https://demotextil.uooucommerce.com.br/pag-hiper/order-success/000105671",
    "pageType": "purchase-confirmation",
    "customerIsAuthenticated": true,
    "customerName": "Uoou Solutions",
    "customerEmail": "teste@uoou.com.br",
    "customerId": "OFE9PQ",
    "transactionId": "000105671",
    "transactionPaymentMethod": "pix",
    "transactionTotal": 139.5,
    "transactionShipping": 0,
    "transactionProducts": [
	      {
	        "id": "123",
	        "sku": "123",
	        "name": "Jaqueta Jeans",
	        "quantity": 2,
	        "price": 42.5
	      },
	      {
	        "id": "126",
	        "sku": "126",
	        "name": "Calça Pantalona Listrada",
	        "quantity": 2,
	        "price": 35
	      }
    ]
}


Como usar a Camada de Dados dentro do Google Tag Manager?

Criando uma variável

O exemplo abaixo mostrará como criar e usar variável "customerEmail" dentro do Google Tag Manager. Sendo que você pode seguir esse mesmo passo a passo para usar as demais variáveis acima descritas.


1- Acesse o Google Tag Manager (Link: https://tagmanager.google.com/)


2- Acesse o menu "Variáveis"

Imagem


3- Em "Variáveis definidas pelo usuário" clique em "Nova"Imagem


4- Agora precisamos mapear o nome da variável que será usado dentro do Google Tag Manager


A tela será aberta assim:

Imagem


E em "Variável sem título" substitua pela variável que você irá usar internamente dentro do Google Tag Manager. 

No nosso exemplo vamos colocar "email", já que estamos buscando a variável email do cliente logado.

Imagem


5- Clique em "Escolha um tipo de variável para iniciar a configuração..."

Imagem


6- Na tela de escolha do tipo de variável, clique em "Variável de camada de dados"

Imagem


6- Na tela que será aberta, coloque o nome da variável da camada de dados que você deseja utilizar, em nosso exemplo será customerEmail


Em nossa documentação na área de "Cliente Logado" acima pode-se verificar que a variável customerEmail que guarda o E-mail do cliente.

Imagem


7- Clique em "Salvar" e a variável deverá aparecer da forma abaixo:

Imagem

Usando a variável em uma Tag / Script:


1- Vá na tela de Tags

Imagem


2- Crie uma nova tag através do botão "Nova" ou edite uma tag existente

Imagem


3- No exemplo de tag abaixo, a ferramenta que estamos tentando integrar pede que seja substituído "email_do_seu_cliente" pelo e-mail do cliente logado, então para isso vamos colocar a variável que criamos dentro do Google Tag Manager:


Basta começar a digitar {{ que o GTM irá autocompletar todas as variáveis disponíveis:

Imagem


4- Ao final sua tag ficará assim:

Imagem


Ainda está com dúvidas?

Temos uma equipe de suporte disponível para lhe ajudar a esclarecer suas dúvidas.
+55 47 3066-1717    +55 47 3066-1717 suporte@uoou.com.br

  • Equipe 1
  • Equipe 2
  • Equipe 3
  • Equipe 4
  • Equipe 5

Entre em contato

Possui alguma dúvida que está além da base de conhecimento? Abra um chamado.