Olá, turma! 👋 Sejam muito bem-vindos à nossa Aula 54 do curso “Loja Shopify do Zero ao Avançado”!

Hoje, vamos mergulhar em um tópico que é absolutamente fundamental para o sucesso de qualquer loja virtual: a coleta e análise de dados. E para isso, vamos desvendar as ferramentas mais poderosas do mercado: Google Analytics 4 (GA4) e Google Tag Manager (GTM). Preparem-se para dar um salto gigantesco na forma como vocês entendem e otimizam suas lojas Shopify! 🚀

—

Aula 54 – Loja Shopify do Zero ao Avançado: Google Analytics 4 e Google Tag Manager completo

📚 O que você vai aprender nesta aula

Nesta aula, você irá:

• Compreender a importância do Google Analytics 4 (GA4) e do Google Tag Manager (GTM) para sua loja Shopify.
• Entender a diferença entre Universal Analytics (UA) e GA4 e por que a migração é crucial.
• Aprender a criar e configurar uma propriedade GA4 do zero.
• Dominar a criação e configuração de um contêiner GTM.
• Integrar o Google Tag Manager corretamente à sua loja Shopify, via theme.liquid.
• Aprender a configurar a tag de configuração base do GA4 via GTM.
• Explorar o conceito de Data Layer (Camada de Dados) e sua importância para o e-commerce.
• Implementar o rastreamento de compras (eventos de e-commerce) do GA4 na sua Shopify usando GTM e a Data Layer.
• Utilizar o modo de visualização do GTM e o DebugView do GA4 para testar suas implementações.
• Conhecer as melhores práticas para uma implementação de GA4 e GTM eficaz e otimizada.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, exploramos a fundo a criação e personalização de temas (Aulas 30-45), otimização de SEO (Aula 48), e até mesmo estratégias de marketing digital (Aulas 49-53). Tudo isso é incrível, mas como sabemos se nossas campanhas de SEO estão funcionando? Ou se o design da nossa página de produto realmente leva a mais vendas? 🤔

É exatamente aí que GA4 e GTM entram! Eles são as ferramentas que nos permitem medir o impacto de todas essas ações. Sem dados, estamos apenas adivinhando. Com GA4 e GTM, transformamos suposições em informações acionáveis, permitindo otimizar cada centavo investido e cada esforço de desenvolvimento. Pense neles como o painel de controle da sua navegação, mostrando para onde o navio (sua loja) está indo e se ele está no curso certo! 🚢

📖 Conteúdo Principal

1. Por que Google Analytics 4 (GA4) e Google Tag Manager (GTM) são indispensáveis para Shopify?

1.1. O Fim do Universal Analytics (UA) e a Ascensão do GA4

Desde 1º de julho de 2023, o Universal Analytics (UA) parou de processar novos dados. O GA4 é o futuro da análise de dados do Google. Ele foi construído com uma abordagem focada em eventos e privacidade, ideal para o mundo multi-plataforma de hoje (web e app). Para sua loja Shopify, significa ter uma visão mais completa do ciclo de vida do cliente.

• GA4: É a ferramenta de análise de dados que coleta, organiza e apresenta informações sobre o comportamento dos usuários em sua loja. Ele responde a perguntas como: “Quantos visitantes tive?”, “De onde eles vieram?”, “Quais produtos são mais populares?”, “Quantas vendas realizei?”. Sua principal característica é o modelo baseado em eventos, onde tudo é um evento (visualizar página, adicionar ao carrinho, clicar, comprar).
• GTM: Pense no GTM como o “maestro” da sua loja. Ele permite que você gerencie e implante facilmente tags (pequenos trechos de código) de marketing e análise (como GA4, Facebook Pixel, Pinterest Tag, etc.) no seu site sem precisar alterar o código do tema diretamente toda vez. Isso acelera a implementação, reduz erros e dá mais controle a você (ou à sua equipe de marketing).

1.2. Vantagens do GA4 e GTM para Shopify:

• Flexibilidade: Adicione e remova scripts de rastreamento com facilidade, sem a necessidade de um desenvolvedor para cada mudança.
• Velocidade: Novas tags podem ser publicadas em minutos.
• Precisão: Minimiza erros de implementação de código.
• Otimização: Colete dados mais ricos para entender o comportamento do cliente e otimizar conversões.
• Privacidade: O GA4 foi projetado com a privacidade em mente, oferecendo recursos como consent mode.

2. Configurando seu Google Analytics 4 (GA4)

2.1. Criando uma propriedade GA4

1. Acesse analytics.google.com.

2. Se você tem uma conta Google, faça login. Caso contrário, crie uma.

3. Clique em “Administrar” (ícone da engrenagem no canto inferior esquerdo).

4. Na coluna “Conta”, clique em “Criar Conta” se for sua primeira vez. Se já tem uma, pode criar uma nova propriedade em uma conta existente.

5. Siga os passos para criar a conta e propriedade:

• Nome da Conta: Ex: “Minha Loja Shopify [Seu Nome]”
• Nome da Propriedade: Ex: “Loja Shopify – GA4”
• Fuso Horário e Moeda: Configure de acordo com sua loja.

6. Na seção “Fluxos de dados”, selecione “Web”.

7. Insira a URL da sua loja Shopify (Ex: https://www.sua-loja.com.br) e um nome para o fluxo (Ex: “Loja Principal”).

8. Clique em “Criar fluxo”.

9. Você será levado à tela de detalhes do fluxo. Anote o seu ID da métrica (também conhecido como “ID de Medição”), que geralmente começa com G-. Ele será essencial para a integração.

3. Configurando seu Google Tag Manager (GTM)

3.1. Criando um Contêiner GTM

1. Acesse tagmanager.google.com.

2. Faça login com a mesma conta Google.

3. Clique em “Criar conta” (ou crie um novo contêiner em uma conta existente).

4. Preencha as informações:

• Nome da Conta: Ex: “Minha Loja Shopify [Seu Nome]”
• Nome do Contêiner: Ex: “Loja Shopify – Web”
• Plataforma de destino: Selecione “Web”.

5. Clique em “Criar” e aceite os termos de serviço.

6. Você verá um pop-up com dois trechos de código do GTM. Mantenha-os abertos ou copie-os para um bloco de notas, pois precisaremos deles para a próxima etapa!

4. Integrando o Google Tag Manager com sua Loja Shopify

Agora, vamos instalar o GTM em sua loja. Esta é a única vez que você precisará editar o código do tema para o GTM e GA4.

4.1. Inserindo os snippets do GTM no theme.liquid

1. No admin da Shopify, vá em Loja Virtual > Temas.

2. No tema ativo, clique em Ações > Editar código.

3. Localize o arquivo theme.liquid na seção “Layout”.

4. Primeiro snippet (tag ):

• Encontre a tag no arquivo theme.liquid.
• Imediatamente após a tag de abertura , cole o primeiro snippet do GTM (aquele que começa com ).

• Lembre-se de substituir GTM-XXXXXXX pelo ID do seu contêiner GTM.

5. Segundo snippet (tag ):

• Encontre a tag no arquivo theme.liquid.
• Imediatamente após a tag de abertura , cole o segundo snippet do GTM (aquele que começa com ).

• Novamente, substitua GTM-XXXXXXX pelo ID do seu contêiner GTM.

6. Clique em “Salvar”.

Parabéns! 🎉 Seu Google Tag Manager está agora instalado em todas as páginas da sua loja Shopify!

5. Configurando a Tag de Configuração Base do GA4 via GTM

Agora que o GTM está no seu Shopify, vamos usá-lo para injetar o GA4.

1. Volte para o seu contêiner GTM.

2. No menu lateral, clique em “Tags”.

3. Clique em “Nova”.

4. Nome da Tag: GA4 - Configuração Base

5. Configuração da Tag:

• Clique no meio da caixa “Configuração da Tag”.
• Escolha “Google Analytics: Configuração do GA4”.
• No campo “ID da métrica”, insira o ID da métrica do GA4 que você anotou (Ex: G-XXXXXXXXX).
• Deixe as outras configurações como padrão por enquanto.

6. Acionamento:

• Clique no meio da caixa “Acionamento”.
• Escolha “All Pages” (Todas as Páginas). Isso fará com que a tag de configuração base do GA4 seja disparada em todas as páginas da sua loja.

7. Clique em “Salvar”.

6. Entendendo e Implementando a Data Layer (Camada de Dados) para E-commerce

A Data Layer é o coração do rastreamento avançado. É um objeto JavaScript que o GTM usa para acessar informações do seu site. Para e-commerce, precisamos enviar dados específicos (como detalhes de produtos, valores de carrinho, informações de compra) para essa Data Layer, para que o GTM possa “pegá-los” e enviar para o GA4.

6.1. Onde colocar o código da Data Layer na Shopify?

Para eventos de e-commerce como “purchase” (compra), a Shopify nos dá uma mãozinha. A página de agradecimento (thank you page) do checkout oferece acesso a variáveis Liquid importantes.

Vamos focar no evento de compra, que é o mais crítico para qualquer e-commerce.

6.2. Implementando o Evento de Compra (Purchase) do GA4 via GTM na Shopify

A Shopify possui um campo para “Scripts adicionais” na página de checkout. É o local perfeito para injetar o código da Data Layer para a compra.

1. No admin da Shopify, vá em Configurações > Checkout.

2. Role até a seção “Scripts adicionais”.

3. Aqui, vamos injetar um código que “empurra” os dados da compra para a Data Layer, no formato que o GA4 espera.

Explicação do Código:

• window.dataLayer = window.dataLayer || [];: Garante que o objeto dataLayer exista.
• {% if first_time_accessed %}: Essa condição Liquid da Shopify garante que o código só seja executado na primeira vez que a página de agradecimento é carregada, evitando duplicação de eventos.
• dataLayer.push({...});: É aqui que os dados são enviados para a Data Layer.
• 'event': 'purchase': Define o nome do evento que o GTM irá “escutar”.
• 'ecommerce': {...}: Contém todos os detalhes da transação no formato esperado pelo GA4.
• {{ checkout.order_id }}, {{ checkout.total_price | divided_by: 100.0 }}, etc.: São variáveis Liquid da Shopify que nos dão acesso aos dados da compra. O divided_by: 100.0 é crucial, pois a Shopify retorna valores em centavos (ex: R$100,00 é 10000).

4. Clique em “Salvar”.

6.3. Criando Variáveis de Data Layer no GTM

Para o GTM conseguir ler os dados que empurramos para a Data Layer, precisamos criar “Variáveis da Camada de Dados”.

1. No GTM, vá em “Variáveis” no menu lateral.

2. Na seção “Variáveis Definidas pelo Usuário”, clique em “Nova”.

3. Nome da Variável: dlv - ecommerce.transaction_id (dlv = Data Layer Variable)

4. Configuração da Variável:

• Escolha “Variável da Camada de Dados”.
• No campo “Nome da Variável da Camada de Dados”, insira ecommerce.transaction_id.

5. Clique em “Salvar”.

Repita esse processo para todas as variáveis que você usou no dataLayer.push e que deseja enviar para o GA4. As mais comuns são:

• dlv - ecommerce.value -> ecommerce.value
• dlv - ecommerce.tax -> ecommerce.tax
• dlv - ecommerce.shipping -> ecommerce.shipping
• dlv - ecommerce.currency -> ecommerce.currency
• dlv - ecommerce.items -> ecommerce.items (esta é crucial para os detalhes dos produtos)

6.4. Criando um Acionador de Evento Personalizado no GTM

Precisamos dizer ao GTM para “escutar” o evento 'purchase' que empurramos para a Data Layer.

1. No GTM, vá em “Acionadores” no menu lateral.

2. Clique em “Novo”.

3. Nome do Acionador: Evento Personalizado - purchase

4. Configuração do Acionador:

• Escolha “Evento Personalizado”.

No campo “Nome do evento”, insira purchase. (Deve ser exatamente* o mesmo que usamos no dataLayer.push).

• Deixe “Esse acionador é disparado em” como “Todos os eventos personalizados”.

5. Clique em “Salvar”.

6.5. Criando a Tag de Evento de Compra do GA4 no GTM

Agora, uniremos tudo: o evento que o GTM “escuta” e as variáveis que ele “lê”, para enviar para o GA4.

1. No GTM, vá em “Tags”.

2. Clique em “Nova”.

3. Nome da Tag: GA4 - Evento - purchase

4. Configuração da Tag:

• Escolha “Google Analytics: Evento do GA4”.
• No campo “Tag de configuração”, selecione a tag GA4 - Configuração Base que criamos anteriormente. (Isso associa este evento à sua propriedade GA4).
• Nome do evento: Insira purchase. (Este é o nome do evento que aparecerá no GA4).
• Parâmetros do Evento: Aqui é onde usamos as variáveis de Data Layer que criamos. Adicione as seguintes linhas:
• ecommerce (Nome do Parâmetro): {{dlv - ecommerce}} (Valor) -> CUIDADO: Para o ecommerce como um todo, você precisará criar uma variável de Data Layer para ecommerce (sim, o objeto completo) ou mapear cada subitem individualmente. A melhor prática para GA4 é enviar o objeto ecommerce completo ou os itens separados como items. Para simplificar, vou mostrar o mais comum para GA4:

Vamos refinar a parte de items. O GA4 espera que os itens estejam sob um parâmetro chamado items.

Então, nos parâmetros do evento, você vai adicionar:

• Nome do Parâmetro: items
• Valor: {{dlv - ecommerce.items}} (Crie uma variável de Data Layer chamada dlv - ecommerce.items apontando para ecommerce.items).

E para outros detalhes da compra:

• Nome do Parâmetro: transaction_id
• Valor: {{dlv - ecommerce.transaction_id}}
• Nome do Parâmetro: value
• Valor: {{dlv - ecommerce.value}}
• Nome do Parâmetro: currency
• Valor: {{dlv - ecommerce.currency}}
• E assim por diante para tax, shipping, coupon.

Dica Profissional: O GA4 tem “eventos recomendados” e “parâmetros recomendados”. Para purchase, ele espera transaction_id, value, currency, tax, shipping, coupon e o array items. Usar esses nomes padrão facilita a leitura dos relatórios padrão do GA4.

5. Acionamento:

• Clique no meio da caixa “Acionamento”.
• Selecione o acionador Evento Personalizado - purchase.

6. Clique em “Salvar”.

7. Testando e Verificando sua Implementação

A parte mais importante: garantir que tudo esteja funcionando!

7.1. Modo de Visualização do GTM (Preview Mode)

1. No GTM, clique no botão “Visualizar” (Preview) no canto superior direito.

2. Uma nova janela/aba será aberta, pedindo a URL da sua loja. Insira e clique em “Connect”.

3. Sua loja será aberta em uma nova aba com o GTM Debugger conectado.

4. Realize uma compra de teste na sua loja. Você pode usar um produto de valor baixo ou configurar um cupom de 100% de desconto para testar.

5. Ao chegar na página de agradecimento, observe o GTM Debugger (a janela que abriu primeiro).

• Você deve ver o evento purchase listado na sequência de eventos no painel esquerdo.
• Ao clicar no evento purchase, você poderá ver as Tags que foram disparadas (sua tag GA4 - Evento - purchase) e as Variáveis de Data Layer que foram preenchidas com os dados corretos da compra.
• Verifique se a tag GA4 - Evento - purchase foi disparada com sucesso e se os parâmetros de e-commerce estão corretos.

7.2. DebugView do GA4

1. No seu painel do Google Analytics 4, vá em “Administrar” > “DebugView”.

2. Enquanto você navega e faz a compra de teste (com o GTM Preview Mode ativo), o DebugView do GA4 deve mostrar os eventos que estão sendo enviados em tempo real.

3. Procure pelo evento purchase e clique nele para expandir e verificar os parâmetros (transaction_id, value, currency, items, etc.).

Se ambos, GTM Preview e GA4 DebugView, mostrarem os dados corretamente, sua implementação de compra está funcionando! 🎉

8. Boas Práticas e Dicas de Otimização

• Publicar Contêiner: Lembre-se de Publicar seu contêiner GTM (botão “Enviar” no canto superior direito) depois de fazer e testar todas as mudanças, para que elas entrem em vigor para seus visitantes reais.
• Privacidade e Consentimento: Em muitas regiões (EU, Brasil), você precisa do consentimento do usuário para coletar dados. Considere integrar uma solução de CMP (Consent Management Platform) como o Cookiebot ou OneTrust via GTM, usando o “Consent Mode” do Google.
• Nomenclatura: Mantenha uma nomenclatura clara e consistente para Tags, Acionadores e Variáveis no GTM. Isso facilitará a manutenção no futuro.
• Outros Eventos de E-commerce: Para uma análise completa, você deve implementar outros eventos GA4 recomendados, como:
• view_item (visualização de produto)
• add_to_cart (adicionar ao carrinho)
• begin_checkout (início do checkout)
• add_shipping_info (informações de envio)
• add_payment_info (informações de pagamento)

A implementação desses eventos exigirá mais manipulação do Data Layer no seu tema Shopify, usando JavaScript em páginas específicas (produto, carrinho) e no próprio checkout. Começar com purchase é o essencial, mas o ideal é expandir!

• Documentação: Mantenha um registro das suas tags e acionadores, e como eles funcionam.

—

💻 Exemplos Práticos

O principal exemplo prático desta aula foi a implementação detalhada do evento purchase usando o theme.liquid e a área de “Scripts adicionais” do checkout da Shopify.

Cenário: Um cliente finaliza uma compra na sua loja Shopify.

Objetivo: Enviar os detalhes dessa compra para o Google Analytics 4.

Passos Revisados (com foco nos códigos):

1. Inserção do GTM no theme.liquid:

(Substitua GTM-SEUIDAQUI pelo seu ID real do GTM)

2. Injeção da Data Layer de Compra nos “Scripts adicionais” do Checkout (Admin Shopify > Configurações > Checkout):

Screenshots Imaginários (O que você veria na interface):

• GTM – Tags: Uma lista mostrando GA4 - Configuração Base e GA4 - Evento - purchase.
• GTM – Variáveis: Uma lista com dlv - ecommerce.transaction_id, dlv - ecommerce.value, dlv - ecommerce.items, etc.
• GTM – Acionadores: Uma lista com All Pages e Evento Personalizado - purchase.
• GTM Preview Mode: O painel de debug mostrando o evento purchase no lado esquerdo, e no lado direito, as Tags disparadas (GA4 - Evento - purchase) e os dados da Data Layer preenchidos corretamente após uma compra.
• GA4 DebugView: A interface do GA4 mostrando o evento purchase com seus parâmetros detalhados (transaction_id, value, items, etc.) em tempo real, indicando que os dados estão chegando.

(Como não posso gerar screenshots ou vídeos aqui, a descrição acima serve para guiar vocês sobre o que esperar nas interfaces do GTM e GA4 durante a implementação e teste.)

—

🎯 Exercícios e Desafios

1. Configuração Completa:

• Crie uma nova propriedade GA4 e um novo contêiner GTM para sua loja de desenvolvimento Shopify.
• Instale o GTM no theme.liquid.
• Configure a tag de configuração base do GA4 via GTM.
• Implemente o código da Data Layer para o evento purchase nos “Scripts adicionais” do checkout.
• Crie todas as variáveis de Data Layer necessárias no GTM (dlv - ecommerce.transaction_id, dlv - ecommerce.value, dlv - ecommerce.items, etc.).
• Crie o acionador de evento personalizado purchase no GTM.
• Crie a tag de evento GA4 - Evento - purchase no GTM, mapeando todos os parâmetros de e-commerce corretamente.
• Realize uma compra de teste e verifique tudo usando o GTM Preview Mode e o GA4 DebugView.

2. Desafio de Otimização (Opcional – para os mais avançados!):

• Pesquise sobre como implementar o evento add_to_cart (adicionar ao carrinho) para o GA4 via GTM na Shopify. Pense em como você faria para “empurrar” os dados do produto para a Data Layer quando um usuário clica no botão “Adicionar ao carrinho” em uma página de produto. (Dica: Isso geralmente envolve JavaScript customizado em product-template.liquid ou similar, escutando o clique no botão de “add to cart” e usando um dataLayer.push).

—

📝 Resumo da Aula

Ufa! Que aula intensa e super importante! Cobrimos a base essencial para qualquer loja online:

• A migração para o GA4 e a importância do seu modelo baseado em eventos.
• O poder do GTM como gerenciador de tags, simplificando a implementação e o controle.
• O processo passo a passo para instalar o GTM na Shopify via theme.liquid.
• A configuração da tag base do GA4 no GTM.
• O conceito crucial da Data Layer para dados de e-commerce.
• A implementação detalhada do rastreamento de compra (purchase) para o GA4, usando variáveis Liquid da Shopify e o GTM para orquestrar tudo.
• A importância de testar com o GTM Preview Mode e o GA4 DebugView.

Agora, vocês têm as ferramentas para realmente entender o que está acontecendo na sua loja e tomar decisões baseadas em dados concretos! 📊

—

🚀 Preparação para próxima aula

Com o GA4 e GTM configurados, estamos prontos para ir além da coleta de dados brutos. Na próxima aula, vamos explorar como usar esses dados para otimizar sua loja! Abordaremos:

• Fundamentos de Otimização da Taxa de Conversão (CRO – Conversion Rate Optimization): O que é, por que é importante e como começar.
• Análise de Funis de Vendas no GA4: Como identificar gargalos no processo de compra.
• Introdução ao Google Optimize (ou alternativas): Como configurar e rodar testes A/B na sua loja Shopify para otimizar elementos da página.

Preparem-se para transformar dados em resultados tangíveis! 💰

—

📚 Recursos Adicionais

• Documentação oficial do Google Analytics 4: support.google.com/analytics
• Documentação oficial do Google Tag Manager: support.google.com/tagmanager
• Guia de eventos de e-commerce do GA4: developers.google.com/analytics/devguides/collection/ga4/ecommerce
• Artigo da Shopify sobre checkout.liquid e “Scripts adicionais” (para contextualizar mais): shopify.dev/docs/themes/architecture/layouts/checkout-liquid
• Curso de GTM para iniciantes (Google Skillshop): skillshop.withgoogle.com/course/google-tag-manager-fundamentals

A dedicação de vocês é inspiradora! Continuem praticando e explorando essas ferramentas. Nos vemos na próxima aula! Até lá! 👋🎓