Como configurar o rastreamento de comércio eletrônico GA4 na Shopify? Guia passo a passo

Publicados: 2022-09-13
  • Como instalar o Google Tag Manager (GTM) na Shopify?
    • Fase um: adicione o código do contêiner GTM e o script de detalhes do cliente ao theme.liquid em <head>.
    • Fase dois: adicione o código do contêiner do GTM e o script de detalhes do cliente à página de checkout.
  • Criar variável de camada de dados no GTM
  • Criar tag de visualização de página do GA4 no GTM
  • Rastreie view_item e compre como um evento e passe o escopo do usuário mais detalhes relacionados ao produto para o GA4
    • Fase um: adicionar camada de dados view_item na Shopify.
    • Fase Dois: Criar GTM Trigger para view_item e evento de compra.
    • Fase Três: Criar Tag GTM.
  • Baixar Receita GTM

Como instalar o Google Tag Manager (GTM) na Shopify?

Fase um: adicione o código do contêiner GTM e o script de detalhes do cliente ao theme.liquid em <head>.

  1. Faça login na sua conta do Gmail.
  2. Acesse o Gerenciador de tags do Google.
  3. Selecione a conta GTM correta .
  4. Clique no ID do contêiner do GTM .
  5. Copie o primeiro script do código do contêiner do GTM que inclui instruções para colar o código na seção <head>.
  6. Faça login na sua loja da Shopify e clique em Temas em Loja online no lado esquerdo do painel de navegação.
  7. Clique em Editar código na lista suspensa Ações .
  8. Clique no theme.liquid em Layout.
  9. Cole o código do contêiner GTM copiado (na etapa 5) o mais alto possível no <head> da página.
  10. Copie o script de detalhes do cliente mencionado abaixo e cole-o na seção <head>, acima do código do contêiner do GTM .
  11. Clique em Salvar no theme.liquid no canto superior direito.

Etapa 1: faça login na sua conta do Gmail.

Etapa 2: acesse o Gerenciador de tags do Google seguindo este link: https://tagmanager.google.com/

Etapa 3: selecione a conta GTM correta

Select the correct GTM account

Etapa 4: clique no ID do contêiner do GTM

GTM - click on the container id

Etapa 5: copie o primeiro script do código do contêiner do GTM que inclui instruções para colar o código na seção <head> .

copy the GTM container code

Etapa 6: agora faça login na sua loja Shopify e clique em Temas em Loja online no painel de navegação à esquerda.

select themes under online store

Etapa 7: clique em Editar código na lista suspensa Ações .

Click on Edit code under Actions drop down

Passo 8: Clique em theme.liquid em Layout.

Click on theme.liquid

Etapa 9: cole o código do contêiner GTM copiado (na etapa 5) o mais alto possível no <head> da página.

Etapa 10: Copie o script de detalhes do cliente a seguir. Agora, cole-o na seção <head> acima do código do contêiner GTM, conforme mostrado na imagem abaixo. Esse script ajudará a transmitir os dados no escopo do USUÁRIO para o GA4.

cópia de

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% se cliente %}
userType: "membro",
cliente: {
id: {{ customer.id }},
lastOrder: "{{ customer.orders.first.created_at | date: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% for item in customer.orders %}{% assign total_spent = total_spent | mais: item.total_net_amount %}{% endfor %}{{ total_spent | dinheiro_sem_moeda | remove:"," }}{% else %}""{% endif %},
tags: {{- customer.tags | json -}}
},
{% senão %}
userType: "visitante",
cliente: {
Eu iria: "",
último pedido: "",
ordemCount: "",
total gasto: "",
Tag: ""
},
{% fim se %}
});
</script>

User data script above the GTM code

Passo 11: Clique em Salvar no theme.liquid no canto superior direito.

Click save on theme.liquid

Bem feito !!

Você concluiu a primeira fase de adição do código do contêiner GTM à Shopify. Em seguida, você precisará adicionar o código do contêiner do GTM , o script de detalhes do cliente e a camada de dados de compra na página de checkout.

Fase dois: adicione o código do contêiner GTM e o script de detalhes do cliente e compre a camada de dados na página de checkout.

  1. No admin da loja da Shopify, clique em Configurações no canto inferior esquerdo.
  2. Clique em Checkout e contas
  3. Role para baixo e procure os scripts adicionais abaixo do pedido no bloco de status.
  4. Cole primeiro o código do contêiner GTM. Agora, copie o script de detalhes do cliente a seguir e cole-o acima do código do contêiner do GTM.
  5. Copie e cole a seguinte camada de dados de compra entre o script de detalhes do cliente e o código do contêiner GTM.

Etapa 1: no admin da loja da Shopify, clique em Configurações no canto inferior esquerdo.

On Shopify admin click on Settings towards the laft hand side bottom corner

Passo 2: Clique em Checkout e contas.

Click on Checkout and accounts

Etapa 3: role para baixo e procure os scripts adicionais abaixo do pedido no bloco de status.

Scroll Down and below Order Status block look for the Additional Scripts

Etapa 4: cole o código do contêiner GTM primeiro. Agora, copie o script de detalhes do cliente a seguir e cole-o acima do código do contêiner do GTM.

Paste the GTM container code first and above the GTM container code paste the customer details script

Etapa 5: copie e cole a seguinte camada de dados de compra entre o script de detalhes do cliente e o código do contêiner GTM.

cópia de

 <script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'comprar',
'event': 'purchase', /* cria um evento personalizado no GTM */
'transaction_id': '{{ order.name || order.order_number }}',
'totalValue': {{ total_price | dinheiro_sem_moeda | remove:',' }}, // Inclui impostos e frete
'subtotalValue': {{ subtotal_price | dinheiro_sem_moeda | remover:',' }},
'imposto': {{ tax_price | dinheiro_sem_moeda | remover:',' }},
'envio': {{ shipping_price | dinheiro_sem_moeda | remover:',' }},
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //parâmetro opcional
'comércio eletrônico': {
'checkout_currency': '{{ checkout.currency }}', 
'valor': '{{ checkout.total_price | dinheiro_sem_moeda | remove:',' }}', // total do pedido (preço de todos os produtos + frete)
'tax': '{{ checkout.tax_price | dinheiro_sem_moeda | remove:',' }}', // imposto
'shipping':'{{ checkout.shipping_price | dinheiro_sem_moeda | remove:',' }}', // custos de envio
'transaction_id': '{{ transaction[0].id }}', // ID da transação
'Itens': [
{% para line_item em line_items %}
{
'item_name': '{{ line_item.product.title | replace: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'preço': {{ line_item.final_price | dinheiro_sem_moeda | remover:',' }},
'item_brand': '{{ line_item.vendor }}',
'quantidade': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% fim se %}
</script>

Passo 6: Clique em Salvar no canto inferior direito.

Parabéns! Você adicionou com sucesso o código do contêiner GTM na Shopify. Agora vamos continuar e criar variáveis ​​de camada de dados no GTM antes de fazer a tag de visualização de página do GA4. Quando a tag de visualização de página for carregada, essas variáveis ​​nos permitirão coletar e transmitir dados com escopo do usuário para o GA4.

Criar variáveis ​​de camada de dados no GTM

  1. Clique em Variáveis ​​no painel de navegação à esquerda no GTM.
  2. Clique em Novo em Variáveis ​​Definidas pelo Usuário.
  3. Clique em qualquer lugar na configuração da variável .
  4. Selecione Variável de camada de dados em Variáveis ​​de página.
  5. Atribuir Nome da Variável da Camada de Dados .
  6. Renomeie a variável e clique em Salvar.

Passo 1: Clique em Variáveis ​​no painel de navegação esquerdo no GTM.

Click on Variables on the left hand navigation panel

Etapa 2: clique em Novo em Variáveis ​​definidas pelo usuário.

Click New under User Defined Variables

Etapa 3: clique em qualquer lugar na configuração da variável.

Click anywhere on Variable configuration

Etapa 4: Selecione a variável de camada de dados em variáveis ​​de página.

Select Data Layer variable under page variables

Etapa 5: Atribua o nome da variável da camada de dados .

Data Layer Variable Name

Etapa 6: renomeie a variável e clique em Salvar .

Rename the variable and click save

Seguindo as etapas mencionadas acima, crie as variáveis ​​de camada de dados mencionadas abaixo.

Nome da variável da camada de dados: Renomeie a variável
ID do usuário “dlv – cliente – id – variável”
cliente.últimoPedido “dlv – cliente – lastOrder – Variável”
customer.orderCount “dlv – cliente – orderCount – Variável”
cliente.tags “dlv – cliente – tags – variável”
cliente.totalGasto “dlv – cliente – gasto total – variável”
customer.userType “dlv – cliente – userType – Variável”
evento “dlv – evento – variável”

Criar tag de visualização de página do GA4 no GTM

  1. Vá para o Google Analytics e selecione a propriedade GA4. https://analytics.google.com/
  2. Clique no ícone de engrenagem no canto inferior esquerdo.
  3. Clique no fluxo de dados em nível de propriedade.
  4. Selecione o Web Stream e clique na seta (>).
  5. Copie o ID de avaliação do GA4.
  6. Acesse o Gerenciador de tags do Google. https://tagmanager.google.com/
  7. Clique em Adicionar uma nova tag.
  8. Clique em qualquer lugar na configuração da tag.
  9. Selecione Google Analytics: Configuração do GA4.
  10. Cole o código de medição do GA4 copiado anteriormente na caixa "ID de medição".
  11. Em Campos a serem definidos, clique na linha adicionar e adicione o nome do campo e seu valor.
  12. Em Propriedades do usuário, adicione o seguinte como Nome e valor da propriedade.
  13. Clique em qualquer lugar no Acionamento.
  14. Selecione Todas as páginas como um gatilho.
  15. Renomeie a Tag e clique em salvar.

Etapa 1: acesse o Google Analytics e selecione a propriedade GA4. https://analytics.google.com/

Passo 2: Clique no ícone de engrenagem no canto inferior esquerdo.

Click on the Gear Icon bottom left hand

Etapa 3: clique nos fluxos de dados no nível da propriedade.

Click on the Data Stream under property level

Etapa 4: Selecione o Web Stream e clique na seta (>)

Select the Web Stream and click click the arrow (>)

Etapa 5: copie o ID de avaliação do GA4.

Copy the GA4 Measurement ID

Etapa 6: acesse o Gerenciador de tags do Google. https://tagmanager.google.com/

Etapa 7: clique em Adicionar uma nova tag.

Click On Add a new tag

Etapa 8: clique em qualquer lugar na configuração da tag.

Click anywhere on the tag configuration

Etapa 9: selecione Google Analytics: configuração do GA4.

Select Google Analytics: GA4 Configuration

Etapa 10: cole o ID de medição do GA4 copiado anteriormente na caixa "ID de medição".

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Etapa 11: Em Campos a serem definidos, clique na linha adicionar e adicione o nome do campo e seu valor conforme mencionado abaixo:

Nome do campo: user_id

Valor: {{dlv – cliente – id – Variável}}

5 adicione o ID do usuário em Campos para definir

Etapa 12: Em Propriedades do usuário, adicione Nome e valor da propriedade conforme mencionado abaixo.

Nome da propriedade Valor
Identificação do Cliente {{dlv – cliente – id – Variável}}
último pedido {{dlv – cliente – último pedido – Variável}}
contagem_pedido {{dlv – cliente – contagem de pedidos – Variável}}
total gasto {{dlv – cliente – gasto total – Variável}}
tipo de usuário {{dlv – cliente – tipo de usuário – Variável}}

User Properties Assign Property Name and value

Passo 13: Clique em qualquer lugar no Triggering.

Configuração do acionador - Clique em qualquer lugar

Etapa 14: selecione todas as páginas como um gatilho.

Select All Pages as a Trigger Type

Passo 15: Renomeie a Tag.

Rename as GA4 - Page View - Tag as and Click Save

Brilhante!

Você criou a tag de visualização de página do GA4 agora.

Agora vamos dar uma olhada em como rastrear o evento view_item como e quando alguém visualiza a página do produto e passar os detalhes necessários para o GA4.

Rastreie e transmita view_item e compre dados de eventos para o GA4.

Adicione a camada de dados view_item na Shopify.

  1. Faça login na sua loja da Shopify e clique em Temas em Loja online no painel de navegação à esquerda.
  2. Clique em Editar código na lista suspensa Ações.
  3. Clique em main-product.liquid em Sections.
  4. Copie e cole o script de camada de dados mencionado abaixo.
  5. Clique em Salvar no main-product.liquid no canto superior direito

Etapa 1: faça login na sua loja da Shopify e clique em Temas em Loja virtual no painel de navegação à esquerda.

select themes under online store

Seção 2: Clique em Editar código na lista suspensa Ações.

Click on Edit code under Actions drop down

Seção 3: Clique em main-product.liquid em Seções.

Click on the main-product.liquid under Sections.

Etapa 4: copie e cole o script de camada de dados mencionado abaixo.

cópia de

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
evento: 'view_item',
comércio eletrônico: {
Itens: [{
item_name: '{{ product.title | replace: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
preço: "{{ product.price | money_without_currency | remover:',' }}",
item_brand: "{{ product.vendor | remover: "'" | remover: '"' }}",
{% para coleção em product.collections %}
item_category{% a menos que forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | remover: "'" | remover: '"' }}",
Quantidade: 1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Etapa 5: clique em Salvar no main-product.liquid no canto superior direito.

Click save on the main-product.liquid under Sections

Crie o GTM Trigger para o view_item e o evento de compra.

  1. Acesse o Gerenciador de tags do Google.
  2. Clique em Trigger no painel de navegação à esquerda.
  3. Clique em Novo.
  4. Clique em qualquer lugar na configuração do acionador.
  5. Selecione Evento personalizado em Outro.
  6. Atribua o nome do evento view_item.
  7. Renomeie o gatilho CE – EEC – view_item – Trigger e clique em Salvar.

NOTA:

  1. Atribuir nome do evento como compra
  2. Renomeie o acionador CE – EEC – compra – Acionador e clique em Salvar.

Etapa 1: acesse o Gerenciador de tags do Google.

Passo 2: Clique em Trigger no painel de navegação à esquerda.

Click on Trigger on the left hand navigation panel

Passo 3: Clique em Novo.

Click New

Etapa 4: clique em qualquer lugar na configuração do acionador.

Click anywhere on Trigger configuration

Etapa 5: selecione Evento personalizado em Outro.

Select Custom Event under Other

Etapa 6: Atribua o nome do evento view_item.

Assign Event Name as view_item

Passo 7: Renomeie o trigger CE – EEC – view_item – Trigger e clique em Save.

Rename the Trigger - view_item

Com essas etapas, você criou o acionador de evento view_item. Agora você precisará fazer um acionador de evento de compra. Para acionar um evento de compra, siga as 5 primeiras etapas acima.

Etapa 8: atribuir o nome do evento como compra

custom event name purchase

Etapa 9: Renomeie o acionador como CE – EEC – compra – Acionador e clique em Salvar.

Rename the Trigger - purchase

Se você seguiu todas as etapas, fez quase tudo para coletar view_item e comprar dados relacionados a eventos da sua loja da Shopify com os dados no escopo do usuário. Agora vamos ver como passar esses detalhes para o GA4 usando o Gerenciador de tags do Google.

Crie uma tag GTM para o view_item e o evento de compra.

  1. Clique em Tag no painel de navegação à esquerda.
  2. Clique no Novo.
  3. Clique em qualquer lugar na configuração de tags.
  4. Selecione "Google Analytics: Evento GA4" em Tag em destaque.
  5. Em Tag de configuração, selecione “GA4 – Visualização de página – Tag” no menu suspenso.
  6. Atribuir Nome do Evento. Selecione a variável dataLayer feita anteriormente – {{dlv – event – ​​variable}}
  7. Clique em Mais configurações e selecione Enviar dados de comércio eletrônico em Comércio eletrônico. Selecione Camada de Dados como sua fonte de dados.
  8. Clique em qualquer lugar em Acionamento.
  9. Selecione o trigger criado anteriormente “CE – EEC – view_item – Trigger” para o evento view_item.
  10. Passe o mouse para o canto superior direito da seção Trigger e clique no ícone de lápis.
  11. Clique no ícone de adição agora.
  12. Selecione o acionador do evento de compra denominado “CE – compra – Acionador”.
  13. Renomeie a Tag: “GA4 – EEC event – ​​Tag” e clique em Save.

Passo 1: Clique em Tag no painel de navegação à esquerda.

Click on tag on the left hand navigation panel

Passo 2: Clique no botão Novo.

Click New

Etapa 3: clique em qualquer lugar na configuração de tags.

Tag Configuration - Click Anywhere

Etapa 4: selecione “Google Analytics: Evento GA4” na Tag em destaque.

Select Google Analytics GA4 Event under Featured Tag

Etapa 5: Em Tag de configuração, selecione “GA4 – Visualização de página – Tag” no menu suspenso.

Select Configuration Tag form the drop down

Etapa 6: Atribua o nome do evento. Selecione a variável de camada de dados feita anteriormente – {{dlv – event – ​​variable}}

Event Name Select the previously made Data Layer variable

Etapa 7: clique em Mais configurações e selecione Enviar dados de comércio eletrônico em Comércio eletrônico. Selecione Camada de Dados como sua fonte de dados.

More Settings Send eCommerce Data select Data Layer as datasource

Passo 8: Clique em qualquer lugar em Triggering.

Trigger Configuration - Click Anywhere

Passo 9: Selecione o trigger criado anteriormente “CE – EEC – view_item – Trigger” para o evento view_item.

select view item trigger

Passo 10: Passe o mouse no canto superior direito da seção Trigger e clique no ícone de lápis.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Passo 11: Clique no ícone de mais agora.

Click on this plus icon

Passo 12: Selecione o gatilho do evento de compra denominado “CE – compra – Gatilho”.

Select purchase event trigger

Passo 13: Renomeie o Tag: “GA4 – EEC event – ​​Tag” e clique em Save.

Rename the tag and click save

Parabéns

Com este guia, agora você pode acompanhar a visualização de produtos e dados de eventos de compra no GA4. Você também pode visualizar os relatórios no GA4 seguindo estas etapas.

Etapa um: vá para a propriedade GA4.
Etapa dois: Clique nos Relatórios no painel de navegação esquerdo.
Terceiro passo: Clique em Monetização e depois clique em Compras de comércio eletrônico.

Se você deseja obter o contêiner GTM pronto para este guia, recomendo que você baixe a receita do GTM.

Baixar Receita GTM

Conclusão

Com este guia passo a passo, fiz todos os esforços para abordar e resolver o problema de queima de todos os proprietários de lojas da Shopify. O rastreamento de comércio eletrônico pode ter muitas nuances e é difícil lidar com uma única postagem no blog. Se você tiver alguma dúvida, sinta-se à vontade para entrar em contato comigo no LinkedIn e fazer suas perguntas lá.