Data Layer e Google Analytics

Uma visão geral sobre a configuração e uso do DataLayer com o Google Analytics 4 (GA4) para gerenciamento eficiente de dados em seu website.

Introdução

O Data Layer e o Google Analytics são ferramentas essenciais para capturar e gerenciar dados em seu website.

Para facilitar a integração de sua loja com sistemas de análise de tráfego, disponibilizamos em nosso template padrão um exemplo de implementação dessas tecnologias.

Com essa documentação, você poderá entender como o Data Layer e o Google Analytics funcionam em conjunto e como utilizar essa solução em seu próprio website.

Funcionamento

O Data Layer é uma camada de dados que fica entre o seu site e as ferramentas de análise, permitindo que você capture e envie informações específicas sobre a interação do usuário com seu site, permitindo uma gestão eficiente de dados, oferecendo informações precisas e valiosas para otimizar a estratégia digital.

📘

Veja mais informações sobre o Data Layer na documentação oficial do Google

Definindo as informações

Dentro do template padrão, a implementação do Data Layer é realizada por meio de um processo de armazenamento temporário de informações em objetos javascript, que são inseridos em componentes separados no HTML, nomeados de acordo com o tipo de evento.

Arquivo data_layer_hotsite_view.html prepara as informações pertinentes ao evento de visualização de uma página de Hotsite

👍

Lembre-se sempre de utilizar a versão mais recente do executável do storefront local para garantir acesso aos recursos mais recentes da plataforma.

Ao atualizar seu data-layer, esteja ciente de que algumas novas funcionalidades podem estar disponíveis apenas em versões mais recentes do executável, como o método map.to_json. Certifique-se de atualizar o seu storefront local para acessar essas novas funcionalidades. Você pode encontrar a última versão do executável em: https://wakecommerce.readme.io/docs/local

Caso especial (snippets)

Alguns eventos requerem informações que só serão obtidas após o carregamento da página, através de snippets e chamadas de API. Isso pode ser um problema, pois o HTML retornado é estático e os blocos

Para acessar informações para seu data-layer nessas situações, é recomendável adotar a mesma estrutura de componentização do data layer. A diferença estará apenas no final do arquivo, onde em vez de usar um bloco

Eventos de visualização de carrinho ocorrem após carregamento da página, via snippet. A informação de data layer pode ser componentizada dentro do snippet de código da seguinte forma

data_layer_config.html

É por meio desse componente HTML que ocorre a integração do Google Analytics Tags em seu website. Este componente deve ser adicionado em todas as páginas que acionam eventos relevantes, acompanhado do componente com os dados respectivos para o Data Layer.

O componente data_layer_config é responsável por instanciar as ferramentas de acordo com os IDs passados, configurados no painel de admin. Se o campo GoogleTagManagerId estiver presente, o componente do Tag Manager será carregado; se o campo Google-Analytics-Ids estiver preenchido, o GA4 será carregado. Os dados são recebidos através da query common e, caso o campo esteja preechido, o componente correspondente será configurado automaticamente.

Event manager

Após o carregamento completo da página e a configuração adequada das ferramentas, os objetos do Data Layer são lidos no código e integrados aos eventos e tags correspondentes.

Esse processo é realizado por meio do acionamento de eventos no arquivo Assets/JS/event_manager.js, que captura todos os eventos relativos ao Data Layer e insere as informações de acordo com o objeto associado a cada evento.

Atualmente temos mapeados os seguintes eventos:

• view_item (página de produto)
• view_item_list (ao acessar as páginas Home, Search)
• page_view (páginas de Hotsite)
• view_cart, add_to_cart e remove_from_cart (carrinho)
• search (busca realizada)
• add_to_wishlist e remove_from_wishlist (adição e remoção de um produto da lista de desejos)

Esses são os eventos que foram identificados e mapeados até o momento. No entanto, devido à natureza flexível do Storefront, é possível adicionar facilmente novos tipos de eventos e integrá-los ao sistema. Para obter instruções detalhadas sobre como fazer isso, consulte a seção Passo a Passo.

Fluxo de configuração e adição dos dados ao Data Layer

(user_login.js) Evento de Page load -> Verifica usuário logado -> Dispara userChecked ->

(event_manager.js) Recebe evento userChecked -> Chama configuração do datalayer (ga/gtm)

Para configurarmos corretamente todas as informações necessárias, o template espera o evento de verificação de usuário logado para iniciar o processo de configuração do ga/gtm.

(data_layer_config.html) Componentes ga/gtm são configurados -> Dispara dataLayerConfigured ->

(event_manager.js) Com o evento de data layer configurado, o script event_manager continua o processo específico de adicionar os dados ao datalayer

Google Analytics Tags 4 (GA4)

O Google Analytics é uma plataforma poderosa de análise de dados que fornece informações valiosas sobre o comportamento dos usuários em um site, permitindo que você tome decisões informadas para melhorar sua estratégia de negócios online.

No modelo padrão do storefront, disponibilizamos um exemplo da implementação do gtag voltado para as tags de eccomerce para seu site.

📘

Antes de começar a implementar o Google Analytics em seu site de e-commerce, é necessário ter uma conta ativa no Google Analytics. Se você ainda não possui uma, acesse o site oficial do Google Analytics e crie uma nova conta.

O componente para a configuração do gtag está disponível no caminho "Components/utils/data_layer/gtag_config.html".

Google Tag Manager

O Google Tag Manager é uma ferramenta de gerenciamento de tags que permite adicionar e atualizar facilmente tags de rastreamento, como Google Analytics, Facebook Pixel e outros, sem a necessidade de modificar o código do seu site.

Pré-requisitos

📘

Antes de começar a usar este componente, você deve ter uma conta ativa no Google Tag Manager. Se você ainda não possui uma conta, acesse o site oficial do Google Tag Manager e crie uma nova conta.

Para realizar a configuração do Google Tag Manager em seu website, é necessário cadastrar o ID da sua loja por meio do painel do admin, através de Configurações de Admin>Configurações Gerais>GoogleTagManagerId. Esse ID será retornado na query common.graphql, possibilitando sua inserção no componente de configuração mencionado anteriormente.

Passo a Passo: Implementando novos eventos

Para adicionar novos eventos ao seu site do Storefront, siga o modelo de dados e as diretrizes do Google. Isso envolve:

1. Leia a documentação oficial do Google e encontre o modelo de dados do evento que deseja criar.

2. Monte o modelo em seu site usando as informações retornadas na query durante o carregamento da página, usando a sintaxe do Scriban, recomendamos separar esta lógica em um componente próprio para melhor organizar a estrutura de seu código. Certifique-se de que o objeto seja chamado na página relevante, que disparará o evento, juntamente com o componente {{ data_layer_config }}. Esse objeto garantirá que os dados estejam disponíveis no momento em que o evento precisa ser disparado no JavaScript.

   

3. Adicione uma função no contexto JavaScript respectivo, para disparar um evento que será consumido no event_manager.js. No nosso template Awake, os disparos de eventos internos relacionados ao data_layer são configurados após o recebimento de um evento "dataLayerConfigured", que é emitido pelo componente data_layer_config.html. Esse evento indica que o complemento foi carregado e configurado com sucesso na página e está pronto para disparar os eventos do site.

   

4. No event_manager, crie um listener para o evento que você criou no passo 3 e configure-o para chamar uma função que utilize gtag() passando o objeto JavaScript criado no passo 2 como parâmetro ('data_layer_product_details' no exemplo abaixo). Certifique-se também de que o nome do evento ('productPageViewed' no exemplo) corresponda ao que você definiu no script da página. Isso garantirá que o evento seja adequadamente tratado quando ocorrer.

   

Consulte a documentação oficial para obter orientações precisas e melhores práticas ao adicionar novos eventos ao seu site do Storefront. Certifique-se de ajustar os nomes de eventos e parâmetros de acordo com seus requisitos específicos.