Como configurar o Google Analytics 4 no Google Tag Manager para lojas no Storefront 2.0?

Primeiramente, acesse sua conta do Google Tag Manager e no menu lateral Tags clique no botão "Nova":

Feito isso, será preciso configurar a Tag, siga os passos abaixo.

No campo "Tag sem título", insira um nome para sua Tag, por exemplo, Google Analytics 4. Após o nome, clique no ícone para escolher o tipo de tag.

Em seguida, procure por Tag do Google e clique nessa opção.

Configuração da Tag do Google Analytics 4

No campo "ID da métrica", insira o código de acompanhamento do Google Analytics 4

(G-xxxxxxxxxx), código informado na última etapa da criação da conta do Google Analytics 4.

Deixe o acionamento preenchido como All Pages.

Após configurar o acionador, clique em "Salvar" no botão superior direito.

Para finalizar é necessário publicar as alterações, para isso, clique no botão "Enviar", no topo da página, e depois em "Publicar" no pop-up que irá aparecer na tela.

Configuração na Plataforma

Após isso, acesse no painel administrativo da plataforma o menu Configurações >> Integrações >> Google Analytics.

Observação: o ID mostrado acima é um exemplo, sendo assim, é preciso que você copie o ID da sua conta no Google Tag Manager para informar no local solicitado.

Feito isso, o seu GA4 estará configurado. Agora, basta criar os seus eventos de acordo com sua necessidade.

Para saber mais sobre o Google Analytics 4 confira o artigo completo do Google clicando aqui.

Eventos sugeridos

Como plataforma sugerimos a criação de três eventos para utilização inicial da ferramenta.

• Evento de página do produto.
• Evento de adicionar produto ao carrinho;
• Evento de compras realizadas;

Para criação dos eventos confira os passos a seguir:

Observação: a sugestão dos eventos, são baseados em alguns padrões tanto de mercado como do que existe disponível em nosso template padrão do Storefront, assim todos os eventos podem e devem ser revistos segundo a necessidade que precisa.

Variáveis

O primeiro passo é a criação das variáveis.

Acesse o Google Tag Manager e clique em Variáveis >> Variável definida pelo usuário >> Nova. A criação deverá seguir exatamente os campos configurados abaixo. Isso dará acesso aos parâmetros enviados para o data layer na plataforma, como valor da conversão, nome do produto, etc.

Variável 1 - eventModel.items

Selecione as seguintes opções:

• Tipo da variável - Variável da camada de dados;
• Nome da variável da camada de dados - eventModel.items;
• Versão da camada de dados - Versão 2;
• Salvar

Variável 2 - eventModel.transaction_id

Selecione as seguintes opções:

• Tipo da variável - Variável da camada de dados;
• Nome da variável da camada de dados - eventModel.transaction_id;
• Versão da camada de dados - Versão 2;
• Salvar.

Variável 3 - eventModel.total_value

Selecione as seguintes opções:

• Tipo da variável - Variável da camada de dados;
• Nome da variável da camada de dados - eventModel.total_value;
• Versão da camada de dados - Versão 2;
• Salvar.

Variável 4 - eventModel.page.pageType

Selecione as seguintes opções:

• Tipo da variável - Variável da camada de dados;
• Nome da variável da camada de dados - eventModel.page.pageType;
• Versão da camada de dados - Versão 2;
• Salvar.

Variável 5 - eventModel.items.0.price

Selecione as seguintes opções:

• Tipo da variável - Variável da camada de dados;
• Nome da variável da camada de dados - eventModel.items.0.price;
• Versão da camada de dados - Versão 2;
• Salvar.

Passo opcional 

É possível criar uma variável apenas como eventModel para listar tudo que está disponível dentro dela. Assim, é possível ver os valores para criar novas variáveis personalizadas que não estão no exemplo da documentação.

Evento dos acessos 

Existem alguns eventos que podem ser configurados para saber a navegação do cliente mediante as páginas acessadas, sendo eles o PageView, AddToCart e o de purchase, cada um sendo chamado em uma determinada parte da navegação.

Para esses dados, vamos configurar os acionadores baseados nos eventos personalizados, que são os dados retornados no Datalayer da página.

O primeiro a ser configurado é o Pageview, para obter esses dados, para isso ao criar o evento selecione o acionar Evento Personalizado, esse mesmo procedimento vai ser utilizado para os outros acionadores.

Após isso, basta informar o nome do evento como page_view.

É importante marcar essa opção de usar correspondência de regex

Para obter as informações dos produtos da home, categorias ou busca, pode ser utilizado o evento view_item.

Para obter as informações dos produtos adicionados ao carrinho add_to_cart. Aqui também precisa marcar a opção “Usar correspondência de regex”

Para obter informações das compras realizadas em sua loja, utilize o evento de purchase.

Com o acionador criado, retorne a tela inicial do GTM e clique na opção Tag >> Nova, para criar todas as tags para os eventos.

Evento de página do produtos

Ao criar uma nova tag defina a mesma com o tipo Tag do Google.

Defina os parâmetros, seguindo os dados abaixo.

E o acionador define como view_item.

Ficando da seguinte maneira:

Evento de adicionar os produtos ao carrinho

Ao criar uma nova tag defina a mesma com o tipo Tag do Google.

Defina os parâmetros, seguindo os dados abaixo.

E no acionador defina como add_to_cart.

Ficando da seguinte maneira:

Evento de finalização de compra - Purchase

Ao criar uma nova tag defina a mesma com o tipo Tag do Google.

Defina os parâmetros, seguindo os dados abaixo.

E no acionador defina como purchase.

Ficando da seguinte maneira:

Por fim clique em salvar.

Após criação de todos os eventos clique em Enviar e Publicar.