Conceito

Este artigo abordará a implementação do Google Analytics 4 em seu site, utilizando do Google Tag Manager, ou gtag, para registrar os eventos que acontecem durante a navegação do seu usuário.

Para disparar os eventos é necessário ter a tag do GTAG e a tag do Google Analytics. Ou seja, precisamos ter duas tags, uma será no formato GTM-XXXXX(referente ao GTM) e o G-XXXX ( referente ao GA4). 

Caso você não possua as tags instaladas no seu template, veja o tópico a seguir, caso já tenha, pode passar para o próximo tópico. Para verificar se possui a tag instale a extensão: https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk/related?hl=pt-BR

Abra seu site e clique na extensão recém instalada, a tela que abrir irá comunicar se você já possui alguma tag instalada.

1. Recuperando a Global Tag no Google Analytics e realizando a implementação da mesma em seu site

1. Faça login na sua conta do Google Analytics.
2. Clique em Administrador.
3. No topo da coluna Propriedade, selecione a sua.

   

4. Na coluna Propriedade, clique em Fluxos de dados.

   

   A opção Fluxos de dados não aparece na coluna Propriedade? Então sua propriedade é do Universal Analytics, entre em contato conosco para auxiliar.
5. Clique no fluxo de dados.

   

6. Na seção Tag do Google na parte de baixo da página clique em Veja as instruções da tag

    

Então, será possível encontrar o código necessário dentro da caixa Tag de site global (gtag.js), note que o trecho de código necessário possui o comentário "Global site tag (gtag.js) - Google Analytics" logo no seu início, conforme pode ser visto na imagem abaixo, deve-se copiar ele e colar dentro do seu base.html.twig ( https://www.dominioflexy.com.br/flexyadmin/template/edit/system/FlexyFtwoStoreBundle:Layout:base.html.twig/2 ) logo antes da inserção do Google Tag Manager,  conforme pode ser observado na próxima imagem:

Após isso salve e verifique novamente através da extensão se a tag foi instalada corretamente, caso não, entre em contato com o suporte,

2- Detectando eventos

Transações bem sucedidas:

Para realizar o envio dos dados das transações bem sucedidas(finalizadas), é necessário adicionar o evento de purchase ao template de Checkout Success ( https://www.dominioflexy.com.br/flexyadmin/template/edit/system/FlexyFtwoStoreBundle:Checkout:success.html.twig/2 ). Coloque o scripts logo após o bloco de conteúdo ({% block content %}) e antes do fechamento da tag {% endblock %}. 

<script>
gtag('event', 'purchase', {
  "transaction_id": '{{ order.number }}', // Transaction ID. Required for purchases and refunds.
  "affiliation": "Flexy Plataforma",
  "value": '{{ order.billingTotal }}', // Total transaction value (incl. tax and shipping)
  "currency": "BRL",
  "shipping": '{{ order.shippingTotal }}',
  "items": [
    {% for sale in order.sales %}
      {% for item in sale.items %}
        {
          "id": '{{ item.variant.referenceCode }}',
          "name": '{{ item.variant.fullName }}',
          "category": '{{ (item.variant.product.categories|last).name }}',
          "quantity": '{{ item.quantity }}',
          "price": '{{ item.variant.finalPrice }}'
        },
      {% endfor %}
    {% endfor %}
  ]
});
</script>

Visualização de detalhes de produto:

Para capturar quando o usuário abrir a tela de detalhes de produto, é necessário adicionar o evento de view_item à tela de Detalhes de Produto ( https://www.dominioflexy.com.br/flexyadmin/template/edit/system/FlexyFtwoStoreBundle:Product:details.html.twig/1 ). Coloque os script gtag logo após o bloco de conteúdo ({% block content %}) e antes do fechamento da tag {% endblock %}. 

<script>
var categories = [
{% for Category in variant.product.categories %}
"{{ Category.name }}",
{% endfor %}
];

var uniqueCategories = [...new Set(categories)]; // Remove duplicate categories

var propertiesList = [
{% for properties in variant.product.properties %}
"{{ properties.value }}",
{% endfor %}
];

var uniqueProperties = [...new Set(propertiesList)]; // Remove duplicate properties

gtag('event', 'view_item', {
"items": [
{
"id": '{{ variant.product.referenceCode }}',
"name": '{{ variant.fullName }}',
"category": uniqueCategories, // List all unique categories
"price": '{{ variant.price }}',
"properties": uniqueProperties // List all unique properties
}
]
});
</script>

Adicionar ao carrinho:

Para capturar quando o usuário colocar produtos no carrinho, é necessário adicionar o evento de add_to_Cart na tela de Carrinho https://dominio.plataforma.flexy.com.br/flexyadmin/template/edit/system/FlexyFtwoStoreBundle:Cart:list.html.twig/2

Coloque os script gtag logo após o bloco de conteúdo ({% block content %}) e antes do fechamento da tag {% endblock %}. 

É preciso adicionar no inicio do template a linha de código, caso não esteja presente:

{% set masterCart = flexy_ftwo_cart_list().masterCart %}

<script>
gtag('event', 'add_to_cart', {
"items": [
{% for sale in masterCart.sales %}
{% for item in sale.items %}
{
"Loja": '{{ item.cart.shoppingStore.name }}',
"name": '{{ item.variant.product.name}}',
"id" : '{{ item.variant.product.id }}',
"price" : '{{item.total}}',
"quantity" : '{{item.quantity}}',

},
{% endfor %}
{% endfor %}
]
});
</script>

Tela de checkout

Para capturar quando o usuário estiver na tela de checkout, é necessário adicionar o evento de begin_to_checkout na tela de Checkout https://dominio.plataforma.flexy.com.br/flexyadmin/template/edit/system/FlexyFtwoStoreBundle:Checkout:index.html.twig/2

Coloque os script gtag logo após o bloco de conteúdo ({% block content %}) e antes do fechamento da tag {% endblock %}. 

É preciso adicionar no inicio do template a linha de código, caso não esteja presente:

{% set masterCart = flexy_ftwo_cart_list().masterCart %}

<script>
{% set totalValue = 0 %}

{% for sale in masterCart.sales %}
{% for item in sale.items %}
{% set totalValue = totalValue + item.total %}
{% endfor %}
{% endfor %}

gtag('event', 'begin_to_checkout', {
"currency": "BRL",
"items": [
{% for sale in masterCart.sales %}
{% for item in sale.items %}
{
"name": '{{ item.variant.product.name}}',
"id" : '{{ item.variant.product.id }}',
"price" : '{{item.total}}',
"quantity" : '{{item.quantity}}',

},
{% endfor %}
{% endfor %}
],
"value": '{{ totalValue }}'
});
</script>

Considerações finais

Feito estas implementações, o Google Analytics já conseguirá recuperar os dados informados em seu domínio,porém, lembramos que a flexy não se responsabiliza pelas configurações no painel do próprio Google Analytics. Além disso, ressaltamos que as alterações podem demorar cerca de 24h para serem efetivas e detectadas pelo Google Analytics.

Esperamos que este material possa ter auxiliado no seu uso à plataforma Flexy, no entanto, caso ainda hajam dúvidas ou necessidades, por favor, entre em contato com nossa equipe de atendimento, que terá prazer em auxiliá-lo.

<script>
gtag('event', 'view_item', {
"items": [
{
"id": '{{ variant.referenceCode }}',
"name": '{{ variant.fullName }}',
"list_name": "Detalhes do produto",
"brand": "Flexy",
"category": '{{ (variant.product.categories|last).name }}',
"price": '{{ variant.finalPrice }}'
}
]
});
</script>