Você que trabalha com Marketing Digital provavelmente já ouviu o termo “Data Layer” (ou “Camada de Dados”), seja por meio de um guia de implementação ou por um e-mail especificado para a equipe de TI. Ainda assim, pode ter dúvidas do que se trata e qual é sua utilidade para a coleta de dados.
Neste post iremos abordar de forma técnica e não técnica a Camada de Dados e seu uso em conjunto com o Google Tag Manager, mas há conceitos que podem ser usados independentemente da ferramenta que estiver utilizando.
O que é uma Camada de Dados na visão da equipe de Negócios ou estratégica?
A Camada de Dados é um conjunto de informações do website ou do usuário, sendo responsável pela centralização desses dados e permitindo seu uso por diversas ferramentas de Marketing Digital. Normalmente é definida pela equipe de Análise em conjunto com a equipe de Negócios, e o envolvimento da equipe técnica na definição da Camada também é importante para avaliação da viabilidade da coleta das informações.
Nela devem conter informações relevantes para a coleta de dados, como dados da página, informações de transação, detalhes de produtos ou de audiência, entre tantas outras possibilidades, conforme objetivos de cada área e negócio.
Como a Camada de Dados contém informações relacionadas aos seus objetivos de negócio e pode ser usada por diversas ferramentas, é importante considerá-la como um objeto vivo e dinâmico, que pode sofrer alterações com o passar do tempo, e não como uma entidade morta e estática.
Por que utilizar uma Camada de Dados?
Após essa introdução, você pode estar se perguntando o porquê de se dar ao trabalho de fazer esta implementação. E a resposta nada mais é que:
Você estará, na verdade, poupando esforço dos desenvolvedores e do time de Marketing Digital, que farão o uso da Camada para disparo de informações para várias ferramentas!
Imagine um cenário onde seu site possua diversos tipos de páginas, com vários tipos de informações. Neste site há uma tela para a Home, outras para listagem de produtos, fluxo de compras, uma área para posts de blog e por fim uma página para informações de contato.
Caso não exista uma Camada de Dados padronizada, serão necessários códigos específicos para buscar informações em cada tipo de página, com HTML’s diferentes.
O HTML é a linguagem usada nos navegadores para exibição de conteúdo e uma vez que eles forem alterados, perde-se todo o trabalho que já foi realizado, já que o código anterior poderá não mais encontrar um determinado elemento na página.
É importante considerar que uma Camada de Dados bem implementada:
- garante que os dados vindos do Back-end (servidor), serão corretamente disponibilizados no Front-end (lado do usuário) para acesso via Tag Manager e posterior envio para diversas ferramentas;
- envia especificações corretas de navegação do usuário ou comportamento da página para uso de Acionadores (Triggers). Estes Acionadores são responsáveis por definir regras de disparo de cada Tag. Exemplo: usuário enviou formulário de contato; carregamento da página foi completo; ocorreu algum erro específico durante a navegação do usuário;
- disponibiliza informações que não poderiam ser acessadas via HTML, como o ID do usuário logado;
- padroniza as informações que serão enviadas para análise segundo definição do time de Análise.
E, tecnicamente falando, como podemos entender a Camada de Dados?
Depois de definida, a Camada de Dados deverá ser implantada pelo desenvolvedor do website ou pela equipe de TI, possibilitando a posterior coleta de dados que será feita pela Agência/Consultoria de Marketing Digital contratada pela empresa.
Na prática, a Camada de Dados pode ser um Objeto ou uma Lista JavaScript, de acordo com o padrão de um Tag Manager específico ou conforme melhor se adequar a cada caso. Neste post, será considerado o padrão do Google Tag Manager.
O Google Tag Manager (GTM) usa por padrão a variável dataLayer (que pode ser alterada), que deve ser implementada como uma Lista de Objetos para que funcione corretamente.
A partir deste ponto, devem ser adicionados Objetos que irão conter os dados da página.
Lista x Objetos em JavaScript
Para entender melhor a diferença entre Listas e Objetos a documentação oficial do Mozilla traz ótimas descrições e exemplos, não deixe de visitar.
O processo de implementação da Camada de Dados
Como vimos anteriormente, sabemos que há necessidade de envolvimento de diversas áreas para o desenvolvimento da Camada de Dados. Seguem algumas dicas que podem ser úteis para definição do processo de implementação:
- Caso sua empresa ainda não tenha uma cultura de dados bem difundida, pode ser mais efetivo começar aos poucos. Ao desenvolver uma documentação de implementação da Camada de Dados, faça-a por partes: defina a menor camada que puder e, com o tempo, vá acrescentando dados de forma que possam ser validados aos poucos.
- Considere, em sua documentação, levantar informações importantes como:
- Os tipos de página onde a Camada deverá estar presente;
- As variáveis que devem ser incluídas em cada uma das páginas;
- Detalhes sobre cada tipo de variável, como seu tipo e exemplos de valores ;
- Se as variáveis deverão persistir durante toda a navegação do usuário ou estar presentes apenas em páginas específicas;
- Quais chaves são obrigatórias e quais são opcionais.
- Se houver envolvimento de uma consultoria de Marketing Digital como a DP6, considere sua participação no processo ainda na fase de planejamento de novos ambientes, dessa forma haverá mais tempo para planejamento dos dados que deverão estar na Camada de Dados e para posterior validação, possibilitando que a mensuração seja realizada corretamente a partir do lançamento do ambiente.
A documentação pode ser feita no Excel, que tem a vantagem do uso de colunas e linhas para definições de cada chave, mas possui alguns pontos negativos como:
- Não possuir exemplos de código JavaScript;
- Deverá estar em constante atualização;
- Deve ser sempre re-enviada para a equipe;
- Pode ficar confuso quando há implementações muito grandes.
Implementação básica da Camada de Dados
Como a Camada de Dados será utilizada pelo Tag Manager, é preferível que sua declaração esteja antes da chamada do Tag Manager, caso contrário, ele não terá acesso aos dados declarados na Camada e não funcionará conforme esperado.
Um exemplo de implementação ficaria da seguinte forma:
<script>
window.dataLayer = [
{
"page":
{
"title": "E-commerce Brasil",
"category": "Home"
}
}
];
</script>Alterando a Camada de Dados via push
Como a Camada de Dados é dinâmica e será alterada durante a navegação do usuário, podemos alterar os dados apresentados em diversos momentos.
Exemplo: Ao carregar uma lista de produtos no E-commerce, não é necessário enviar para a Camada de Dados todos os produtos cadastrados. Ao invés disso, há a possibilidade de adicioná-los na Camada conforme forem exibidos.
Para isso, o JavaScript possui o método push, que adiciona informações à determinada Lista.
No caso dos produtos citados anteriormente, o código poderia ficar semelhante ao exemplo a seguir:
window.dataLayer.push({
'products': [
{ 'sku': "123A", "price": 15.90, "quantity": 1 },
{ 'sku': "456B", "price": 88.10, "quantity": 2 }
]
});Obs.: Para o método push, é importante que a variável já esteja definida no escopo global. Podemos garantir que não haja erros adicionando a seguinte linha antes da execução da alteração da Camada de Dados:
window.dataLayer = window.dataLayer || [];
Este código irá manter o valor atual da Camada caso ela já esteja definida e, caso não esteja, irá receber o valor de uma Array vazia, permitindo a execução correta do método push.
Os objetos básicos da Camada de Dados do GTM
O GTM cria 3 objetos padrões indicando 3 etapas do carregamento:
- “gtm.js”: O gtm.js é uma biblioteca JavaScript usada pelo Contâiner do GTM. Caso ela não seja carregada, o GTM não funcionará. Sua presença na Camada de Dados indica o carregamento feito com sucesso.
- “gtm.dom”: é um arquivo DOM (Document Object Model) usado pelo Contâiner. Ao ser completamente carregado, o GTM envia o evento “gtm.dom” para a Camada de Dados.
- “gtm.load”: é um arquivo de carregamento da própria página e seus conteúdos. Ao serem completamente carregados, o GTM envia o evento de “gtm.load” para a Camada de Dados.
Verificando a Camada de Dados na página
A verificação da Camada de Dados presente em certo Website pode ser realizada sem que haja grande conhecimento técnico, inclusive há ferramentas nos principais navegadores que possibilitam que verifiquemos o estado da Camada de Dados em cada página.
Utilizando como exemplo o Google Chrome, a verificação pode ser feita da seguinte forma:
1. Com a página já carregada, pressione o botão direito do mouse em qualquer lugar do conteúdo e selecione “Inspecionar”. Você deverá ver algo assim:
2. Selecione a aba “Console” no menu superior, digite “dataLayer” (de acordo com a implementação, este nome pode ser outro e deve ser verificado com a equipe técnica) e pressione Enter:
3. Caso a implantação da Camada de Dados esteja em conjunto com o GTM, você deverá ver pelo menos 3 objetos indicando sua implementação correta. Caso algum deles não esteja presente, pode ser por uma falha de implementação.
Erros a serem evitados durante a implementação
É comum durante o processo que hajam alguns erros na implementação, atrasando o desenvolvimento e tornando o processo mais cansativo e demorado. Seguem alguns erros comuns que podem ser evitados:
Sobrescrita da variável da Camada de Dados
Ao alterar valores ou enviar push’s para a Camada de Dados, é necessário garantir que a variável já exista, mas sem sobrescrever a variável global.
var dataLayer =[];
dataLayer.push({"event": "enviouFormulario"})Este trecho pode funcionar de uma forma inesperada, dependendo de onde for implementado. Uma abordagem mais segura seria a seguinte:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({"event": "enviouFormulario"})Troca de variáveis do tipo String para números, ou vice-versa
Alguns valores como o preço de um produto podem ser do tipo número, enquanto o ID do usuário, pode ser uma String (texto) e pode haver uma confusão entre eles:
var dataLayer =[
{
"pId":321,
"price":"150.00"
}
];Isso é causado pelas aspas em lugares incorretos (ou pela falta delas), então ao fazer a documentação é importante especificar o tipo de variável e, durante o desenvolvimento, atentar-se à esse ponto. Algumas Tags podem ser acionadas com dados incorretos pela má formatação de variáveis.
Posicionamento da Camada no fim da página, ou após a chamada do Tag Manager
O mal posicionamento da Camada de Dados na página fará com que os dados não estejam disponíveis quando necessários, causando perda de informações.
O recomendado é que ela seja declarada no topo da página, antes do carregamento das ferramentas de Marketing Digital, já que essas podem precisar dos dados declarados na camada para sua execução correta.
Juntando tudo…
Como vimos, a Camada de Dados é muito importante para que sua empresa faça coletas de dados mais confiáveis, que tragam informações úteis para gerar insights e ajudar seu negócio a crescer com uma metodologia baseada em dados.
Lembre-se de envolver diversas equipes para a definição da camada, mantenha todos cientes dos objetivos da empresa para que, juntos, possam colaborar de forma mais efetiva.
A Camada de Dados é só um dos passos para uma coleta, mas podemos considerá-la um dos mais importantes.
Você já tinha conhecimento sobre este assunto? Sua empresa já utiliza a camada em conjunto com algum Tag Manager? Usa alguma das práticas que recomendamos ou tem alguma outra sugestão para uma boa Camada de Dados? Deixe dúvidas, sugestões e questionamentos na sessão de comentários logo abaixo!
Perfil do autor: Vitor Capretz | O(A) autor(a) desse conteúdo não faz mais parte da equipe DP6.
