Setup Analytics - GA4

Este artigo tem como objetivo de apresentar como funciona a integração de Vnda com o GA4 e como configurá-la.

Eventos previstos na integração

Estão previstos o disparo dos seguintes eventos na integração com GA4:

purchase

• Quando é enviado: Ao concluir a compra.
• Parâmetros enviados: 

{ name: GAEventNames.purchase, params: { transaction_id: payload.code, coupon: payload.coupon_codes, value: payload.total, shipping: payload.shipping_price, currency: DEFAULT_CURRENCY, items: payload.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }, }

refund

• Quando é enviado: Ao cancelar um pedido.
• Parâmetros enviados: 

{ name: GAEventNames.refund, params: { transaction_id: payload.code, coupon: payload.coupon_codes, value: payload.total, shipping: payload.shipping_price, currency: DEFAULT_CURRENCY, items: payload.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }, }

add_to_cart

• Quando é enviado: Ao adicionar um produto no carrinho.
• Parâmetros enviados: 

{ name: GAEventNames.addToCart, params: { currency: DEFAULT_CURRENCY, value: event.payload.price, items: [ { item_id: event.payload.reference, item_name: event.payload.product_name, price: event.payload.price, item_variant: event.payload.variant_name, quantity: event.payload.quantity, item_category: event.payload.tags.find( (tag) => tag.type == "product_category" )?.name, }, ], }, }

remove_from_cart

• Quando é enviado: Ao remover um produto no carrinho.
• Parâmetros enviados: 

{ name: GAEventNames.removeFromCart, params: { currency: DEFAULT_CURRENCY, value: event.payload.price, items: [ { item_id: event.payload.reference, item_name: event.payload.product_name, price: event.payload.price, item_variant: event.payload.variant_name, quantity: event.payload.quantity, item_category: event.payload.tags.find( (tag) => tag.type == "product_category" )?.name, }, ], }, }

view_item

• Quando é enviado: Ao visualizar um produto.
• Parâmetros enviados: 

{ name: GAEventNames.viewItem, params: { currency: DEFAULT_CURRENCY, value: event.payload.price, items: [ { item_id: event.payload.reference, item_name: event.payload.product_name, price: event.payload.price, item_variant: event.payload.variant_name, quantity: event.payload.quantity, item_category: event.payload.tags.find( (tag) => tag.type == "product_category" )?.name, }, ], }, }

begin_checkout

• Quando é enviado: Ao começar o checkout.
• Parâmetros enviados: 

{ currency: DEFAULT_CURRENCY, value: event.payload.total, coupon: event.payload.coupon_codes.join(","), items: event.payload.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }

checkout_shipping_calculated

• Quando é enviado: Ao clicar em calcular entrega no checkout. Este é personalizado, não existe oficialmente no GA4.
• Parâmetros enviados: 

{ name: GAEventNames.checkoutShippingCalculated, params: { currency: DEFAULT_CURRENCY, value: event.payload.total, coupon: event.payload.coupon_codes.join(","), city: event.payload.shipping_address.city, items: event.payload.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }, }

add_shipping_info

• Quando é enviado: Ao escolher o método de entrega do checkout.
• Parâmetros enviados: 

{ name: GAEventNames.addShippingInfo, params: { currency: DEFAULT_CURRENCY, value: event.payload.total, coupon: event.payload.coupon_codes.join(","), shipping_tier: event.payload.shipping_methods[0]?.delivery_type, items: event.payload.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }, }

add_payment_info

• Quando é enviado: Ao selecionar o método de pagamento do checkout.
• Parâmetros enviados: 

{ name: GAEventNames.addPaymentInfo, params: { currency: DEFAULT_CURRENCY, value: event.payload.cart.total, coupon: event.payload.cart.coupon_codes.join(","), payment_type: event.payload.payment_method, items: event.payload.cart.items.map((item) => { return { item_id: item.reference, item_name: item.product_name, price: item.price, item_variant: item.variant_name, quantity: item.quantity, item_category: item.tags.find( (tag) => tag.type == "product_category" )?.name, }; }), }, } 

Passo a passo para integração

O primeiro passo para realizar a integração, é a criação de uma conta no Google Analytics. Para isso, clique no botão abaixo:

​Crie uma conta

Será aberta a tela da imagem abaixo, onde deve ser inserido o nome da conta e optar por quais dados serão compartilhados com o Google.

🚩 Caso o seller já tenha uma conta Analytics criada e queira usÁ-la, basta acessar suas configurações, criar uma nova propriedade e seguir para as etapas seguintes.

Na etapa seguinte, devem ser definidos os dados da propriedade. Uma propriedade é onde ficam armazenados os dados de uma empresa, podendo uma conta ter N propriedades. Defina corretamente o nome, país, fuso horário, moeda e clique em “Next”.

Na próxima tela, são cadastradas as informações do negócio. São elas: Categoria, tamanho e como você pretende usar o Google Analytics na empresa.

Após preencher as informações de negócio, clique em “Criar” e aceite os termos de uso que a conta será criada.

Depois que a conta for criada, são necessária algumas configurações na mesma para dar inicio a integração. Para isso, acesse as configurações, no ícone da engrenagem, no canto inferior direito da tela e logo após clique na opção “Fluxo de dados”.

Na tela seguinte, selecione a opção Web, informe a URL do site e defina um nome para o fluxo.

Após clicar em “Criar” serão exibidos os detalhes do fluxo. Precisamos do “ID da Métrica” e da chave secreta da API para cadastrar no Admin Vnda.
​O ID da métrica é exibido na tela de detalhes e a chave da API deve ser gerada clicando na opção destacada na imagem abaixo:

Antes de gerar uma nova chave de API, é necessário confirmar os termos.

Clique em “Criar” para gerar uma nova chave de API.

Defina um nome e clique novamente em “Criar”.
​
Cadastre o ID da métrica e a chave da API no Admin Vnda acessando configuração e clicando na opção “Google Analytics” na seção “Integrações”.

Feito isso, vá em Admin > Tag Manager e atualize a versão da Camada de Dados para GA4:

*Se não estiver selecionado nada, ele está puxando dados da camada UA (integração antiga).

Realizados os passos acima, a integração com o Google Analytics 4 estará finalizada.

🚩 Atenção! Em casos de troca de integração UA para GA4, devemos também:

• Inativar as tags da integração UA na conta Tag Manager do seller;
• Excluir os webhooks da integração UA no Admin do seller.

Ficou com alguma dúvida? A gente te ajuda! É só entrar em contato pelo e-mail ajuda@vnda.com.br 😉