(Ga4) Guia de Configuração Completo para Eventos de Conversão

CREATED BY BRUNO BRACAIOLI
GUIA DEFINITIVO GA4

Guia de Configuração
Sumário
Instalando o Google Tag Manager (GTM) na Shopify;

Criando as variáveis dinâmicas de coleta de dados dos
eventos que serão usadas no GTM;
Vinculador de Conversões;
Acionadores de Eventos;
Configuração na conta do Analytics GA4;
Criando e configurando as Tags de Eventos de Conversão do
GA4 no Google Tag Manager;
Publicando configurações;
2
Na Shopify
O primeiro passo é realizar a instalação do Google Tag Manager no

theme.liquid da sua loja:
Clique em "Loja Virtual", depois em "Temas";

Depois clique em "Ações" e escolha "Editar código";
Na coluna da Esquerda, procure por "theme.liquid";
Procure o head de abertura (<head>) e cole a primeira parte do script
do Google Tag Manager (GTM) logo abaixo dele;
Depois, procure pelo body de abertura (<body>); IMPORTANTE: Não
mexa em nenhuma informação que estiver na linha do <body>. Vá até a
última informação que estiver na linha e clique em "Enter" para ir à
linha abaixo;
Então, nessa linha debaixo, cole a segunda parte do script do Google
Tag Manager (GTM);
Seu theme.liquid ficará parecido com os exemplos abaixo:
<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)
[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','SEU-CÓDIGO');</script>

#demais códigos do site;
<body id="{{ page_title | handle }}" class="{% if customer %}customer-

logged-in {% endif %}template-{{ request.page_type | handle }}">

<noscript><iframe src="https://www.googletagmanager.com/ns.html?
id=SEU-CÓDIGO"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

Depois de colar os códigos acima, clique em "Salvar alterações".
3
No Google Tag Manager
Antes de começarmos a configurar as tags de eventos, vamos

primeiramente definir algumas variáveis que serão utilizadas nas
configurações das tags. Essas variáveis irão coletar informações
importantes para os eventos.
Na tela principal do Google Tag Manager (GTM), no caso esquerdo,
escolha a opção "Variáveis";
Desça até encontrar "Variáveis definidas pelo usuário" e, no canto
direito, clique em "Nova";
Então, crie as seguintes variáveis;
Criação e Configuração das Variáveis Dinâmicas
Adicionar ao Carrinho
--- Variável de Preço ou Valor do produto para "add_to_cart":

No seu site, adicione um item ao carrinho e depois prossiga até a
página do carrinho;
Onde estiver subtotal ou valor, marque o preço do produto com o
botão esquerdo do mouse, clicando e arrastando;
Então clique com o botão direito do mouse e escolha a opção
"Inspecionar";
Na tela que aparecer, haverá uma linha em destaque que equivale à
seleção do valor na sua página do carrinho;
Com o mouse encima da linha em destaque, clique com o botão direito
do mouse e clique em "Copiar" e depois "Copiar Selector";
Agora, volte ao Google Tag Manager para a começar a configurar a
variável de "add_to_cart";
Clique em "Configuração da variável" e escolha a opção:
ElementoDOM
Em "Método de seleção", escolha "Seletor de CSS";

Em "Seletor de elementos", cole a informação que você copiou em seu
site. Ela será semelhante ao exemplo abaixo:
Exemplo 1: #ymp-CrtpageMainFrm > div.cart__footer.mt__60.mb__80

> div > div > div.total.row.in_flex.fl_between.al_center.cd.fs__18.tu >
div.col-auto.tr.js_cat_ttprice.fs__20.fwm > div.cart_tot_price
Exemplo 2: #ymp-CrtpageMainFrm > div:nth-child(3) > div > div:nth-

child(2) > div > div.grid__item.one-half.one-half.medium-down--one-
third.post-large--text-right > span.h5
4
--- Variável de Items para "add_to_cart":
No seu site, adicione um item ao carrinho e depois prossiga até a
página do carrinho;
Onde estiver o nome do produto, marque com o botão esquerdo do
mouse, clicando e arrastando;
Então clique com o botão direito do mouse e escolha a opção
"Inspecionar";
Na tela que aparecer, haverá uma linha em destaque que equivale à
seleção do valor na sua página do carrinho;
Com o mouse encima da linha em destaque, clique com o botão direito
do mouse e clique em "Copiar" e depois "Copiar Selector";
Agora, volte ao Google Tag Manager para a começar a configurar a
variável de "add_to_cart";
ElementoDOM
Em "Método de seleção", escolha "Seletor de CSS";

Em "Seletor de elementos", cole a informação que você copiou em seu
site. Ela será semelhante ao exemplo abaixo:
Exemplo 1: #ymp-CrtpageMainFrm > div:nth-child(3) > div > div:nth-
child(1) > div > div.grid__item.two-thirds > a.h5.cart__product-title
Initiate Checkout
--- Variável de Preço ou Valor do produto para "begin_checkout";

Variável de camada de dados
Em "Nome da variável da camada de dados ", escreva:

prices.subtotal
--- Variável de Items para "begin_checkout";

Variável de camada de dados
Em "Nome da variável da camada de dados ", escreva:
checkout.cart.items
5
Add Shipping Info
--- Variável de Preço ou Valor do produto para "add_shipping_info";

Clique em "Configuração da variável" e escolha a opção: Variável de camada
de dados
Em "Nome da variável da camada de dados", escreva: prices.subtotal
--- Variável de Items para "add_shipping_info";

de dados
Em "Nome da variável da camada de dados", escreva: checkout.cart.items
Add Payment Info
--- Variável de Preço ou Valor do produto para "add_payment_info";

de dados
Em "Nome da variável da camada de dados", escreva: prices.subtotal
--- Variável de Items para "add_payment_info";

de dados
Em "Nome da variável da camada de dados ", escreva: items
Purchase
--- Variável de Preço ou Valor do produto para "purchase";

Clique em "Configuração da variável" e escolha a opção: Variável JavaScript
Em "Nome da variável global", escreva: orderData.order.total
--- Variável de Items para "purchase";

Em "Nome da variável global", escreva: orderData.order.items
--- Variável de transaction_id para "purchase";

Em "Nome da variável global", escreva: orderData.order.id
6
Vinculador de Conversões
Na Yampi
No menu principal, clique em "Configurações";

Clique em "Domínios";
Em "Links de compra do checkout" selecione "Meu domínio". Ele será
parecido com o seguinte link:
https://seguro.SEUDOMÍNIO.com.br/
Ativando a API da Yampi com o GTM
No menu principal, clique em "Configurações";

Clique em "Integrações";
Procure por "Google Tag Manager" e clique em "Abrir".
Em "Código", coloque o código do Google Tag Manager (GTM-XXXXXXXX).
7
No Google Tag Manager (GTM), crie uma nova tag e, em "Configuração

da tag", escolha "Vinculador de Conversões".
Clique em "Ativar a vinculação em todos os URLs de páginas".

Depois, ative a opção: "Ativar a vinculação entre domínios" e, em
"Vincular domínios automaticamente", escreva:
SEUDOMÍNIO.com.br, seguro.SEUDOMÍNIO.com.br
Deixe as demais configurações em branco.

Isso fará com que o Google entenda que todas as suas páginas, inclusive
a do checkout, correspondem ao mesmo site.
Acionador do Vinculador de Conversões:
Escolha o acionador "All pages" para o vinculador;

Esse acionador somente será preciso ser criado uma única vez.
8
Resumo dos Acionadores de Eventos
Formato Evento/tag --> Acionador
• Vinculador de conversões --> All pages;

• Page View --> All Pages;
• View Content --> All Pages;
Add to cart
Novo Acionador --> Tipo de acionador: Exibição de Página --> Este

acionador é disparado em: Algumas exibições de página -->
(Page URL / contém / cart);
begin_checkout
Novo Acionador --> Tipo de acionador: Exibição de Página --> Este

(Page URL / contém / checkout);
(Page URL / não contém / address);
(Page URL / não contém / payment);
(Page URL / não contém / finalization);
add_shipping_info
-> Novo Acionador --> Tipo de acionador: Todos os elementos --> Este
acionador é disparado em: Alguns cliques -->
(Click Classes / contém / zipcode);
-> Novo Acionador --> Tipo de acionador: Todos os elementos --> Este
(Click Id / contém / zipcode);
add_payment_info
--> Novo Acionador --> Tipo de acionador: Todos os elementos --> Este
(Click Classes / contém / link-box-checkout);
purchase
--> Novo Acionador --> Tipo de acionador: Exibição de Página --> Este
(Page URL / contém / finalization);
Depois, clique em "Salvar" e repita o mesmo processo para todos os

eventos que você deseja monitorar.
9
Tags de Eventos do GA4
No Analytics GA4
No canto inferior esquerdo, clique na "engrenagem";

Na coluna do meio, escolha a propriedade do GA4;
1- Em "Configurações de dados", clique em "Coleta de dados";

Em "Coleta de dados do Indicadores do Google", clique em "Vamos
começar";
Em "Ativar os Indicadores do Google", clique em "Continuar" e depois
em "Ativar";
Em "Confirmação de coleta de dados do usuário", aceite os termos de
coleta dos dados;
2 - Em "Configurações de dados", clique em "Retenção de dados";

Em "Retenção de dados de usuários e eventos", altere de 2 meses para
14 meses;
3 - Em "Fluxo de dados", clique no seu site;

Copie o código embaixo de "ID DA MÉTRICA". Esse valor será usado nas
configurações dentro do GTM;
10
Tags de Eventos do GA4
Clique em "Nota tag";

Escolha "Google Analytics: configuração do GA4";
Em "ID da métrica", coloque o código "G-XXXXXXXXX" do seu GA4 (Para
achar esse ID no GA4, clique em "Administrador", "Fluxo de dados" e clique
na opção que aparecer. Copie o código embaixo de "ID DA MÉTRICA");
De volta ao GTM, ative a opção "Enviar um evento de visualização de
página quando esta configuração for carregada";
Não altere as demais configurações;
No acionador, escolha "All pages" e depois em em "Salvar";
Clique novamente em "Nova tag";

Clique em "Google Analytics: Evento do GA4";
Em "Tag de configuração", escolha a tag de configuração do GA4 que
criamos anteriormente;
Em "Nome do evento", escreve o nome do evento que deseja monitorar.
Os nomes precisam seguir um padrão do Analytics, para ver a forma
correta de nomear os eventos do GA4, clique no link a seguir:
https://support.google.com/analytics/answer/9267735
Nomes de eventos indicados de acordo com o padrão exigido pelo Google:
page_view
view_content
add_to_cart
begin_checkout
add_shipping_info
add_payment_info
purchase
Em "Parâmetros do evento" de begin_checkout, add_shipping_info,

add_payment_info adicione as variáveis que criamos anteriormente. A
configuração ficará conforme abaixo: IMPORTANTE: O que estiver em
"amarelo", deve ser digitado e o que estiver em "azul", deve ser
selecionado.
Nome do parâmetro: value / Valor: {{prices.subtotal}}
Nome do parâmetro: items / Valor: {{items}}
Nome do parâmetro: currency / Valor: BRL
Para eventos de compra, é necessário adicionar mais um parâmetro,

conforme abaixo:
Nome do parâmetro: value / Valor: {{orderData.order.total}}
Nome do parâmetro: items / Valor: {{orderData.order.items}}
Nome do parâmetro: transactiion_id / Valor: {{orderData.order.id}}
Nome do parâmetro: currency / Valor: BRL
11
De volta à visão principal do Google Tag Manager, no canto direito
superior, clique em "Enviar", depois em "Publicar" e depois em
"Continuar".
Agora volte para o "Espaço de trabalho" e, no canto direito superior, clique
em "Visualizar".
Adicione o seu domínio e clique em "Continuar".
Seu site será aberto. Faça uma simulação de compra e volte à aba anterior
para ver se os eventos foram acionados corretamente;
Caso algo não funcione como o esperado, revise o passo a passo.

Se ainda não der certo, fale comigo no Instagram: @brunobracaioli
www.brunobracaioli.com.br
@brunobracaioli.com.br
contato@brunobracaioli.com.br

(Ga4) Guia de Configuração Completo para Eventos de Conversão

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(Ga4) Guia de Configuração Completo para Eventos de Conversão

Enviado por

Direitos autorais:

Formatos disponíveis

CREATED BY BRUNO BRACAIOLI

GUIA DEFINITIVO GA4

Instalando o Google Tag Manager (GTM) na Shopify;

O primeiro passo é realizar a instalação do Google Tag Manager no

Clique em "Loja Virtual", depois em "Temas";

Seu theme.liquid ficará parecido com os exemplos abaixo:

#demais códigos do site;

<body id="{{ page_title | handle }}" class="{% if customer %}customer-

Depois de colar os códigos acima, clique em "Salvar alterações".

Antes de começarmos a configurar as tags de eventos, vamos

Criação e Configuração das Variáveis Dinâmicas

--- Variável de Preço ou Valor do produto para "add_to_cart":

Em "Método de seleção", escolha "Seletor de CSS";

Exemplo 1: #ymp-CrtpageMainFrm > div.cart__footer.mt__60.mb__80

Exemplo 2: #ymp-CrtpageMainFrm > div:nth-child(3) > div > div:nth-

Em "Método de seleção", escolha "Seletor de CSS";

--- Variável de Preço ou Valor do produto para "begin_checkout";

Em "Nome da variável da camada de dados ", escreva:

--- Variável de Items para "begin_checkout";

--- Variável de Preço ou Valor do produto para "add_shipping_info";

--- Variável de Items para "add_shipping_info";

Clique em "Configuração da variável" e escolha a opção: Variável de camada

Add Payment Info

--- Variável de Preço ou Valor do produto para "add_payment_info";

--- Variável de Items para "add_payment_info";

--- Variável de Preço ou Valor do produto para "purchase";

--- Variável de Items para "purchase";

--- Variável de transaction_id para "purchase";

No menu principal, clique em "Configurações";

Ativando a API da Yampi com o GTM

No menu principal, clique em "Configurações";

Em "Código", coloque o código do Google Tag Manager (GTM-XXXXXXXX).

No Google Tag Manager (GTM), crie uma nova tag e, em "Configuração

Clique em "Ativar a vinculação em todos os URLs de páginas".

Deixe as demais configurações em branco.

Acionador do Vinculador de Conversões:

Escolha o acionador "All pages" para o vinculador;

Formato Evento/tag --> Acionador

• Vinculador de conversões --> All pages;

Novo Acionador --> Tipo de acionador: Exibição de Página --> Este

Novo Acionador --> Tipo de acionador: Exibição de Página --> Este

Depois, clique em "Salvar" e repita o mesmo processo para todos os

No canto inferior esquerdo, clique na "engrenagem";

1- Em "Configurações de dados", clique em "Coleta de dados";

2 - Em "Configurações de dados", clique em "Retenção de dados";

3 - Em "Fluxo de dados", clique no seu site;

No Google Tag Manager

Clique em "Nota tag";

Clique novamente em "Nova tag";

Em "Parâmetros do evento" de begin_checkout, add_shipping_info,

Para eventos de compra, é necessário adicionar mais um parâmetro,

Caso algo não funcione como o esperado, revise o passo a passo.

Você também pode gostar

Exemplo 1: #ymp-CrtpageMainFrm > div.cartfooter.mt60.mb__80