Integração com GA4 via Shopify Custom Pixel

Última atualização em 13 de mai. de 20264 min de leitura

Índice

• Resumindo
• Enviando os dados do Varify via GTM ou GTAG através do Shopify Custom Pixel
• Opção 1: Integração do Google Tag Manager
• Opção 2: integração direta com o GA4

important

AVISO IMPORTANTE: Estas instruções devem ser seguidas apenas se tiveres integrado o Google Tag Manager ou o Google Analytics 4 diretamente via Shopify Custom Pixel.

Resumindo

Neste guia, você vai aprender como enviar eventos do Varify para o Google Analytics 4 através da integração Shopify Custom Pixel. Você vai aprender como enviar os eventos do Varify para o Google Analytics 4 usando o Google Tag Manager ou através da integração direta com gtag.

Enviando os dados do Varify via GTM ou GTAG através do Shopify Custom Pixel

Passo 1: Seleção da conexão de Analytics "Shopify App / Custom Pixel"

Acesse app.varify.io e clique em “Go to tracking setup”. Depois selecione “Google Analytics 4 (Shopify Custom Pixel Integration)" no Tracking Setup Wizard. Siga os passos do assistente de configuração. Só é necessário seguir os passos da opção 1 abaixo se você já estiver usando o GTM no seu site. Se você integrou o GA diretamente, sem o GTM, vá direto para a opção 2.

Opção 1: Integração do Google Tag Manager

Segue os passos deste guia se integraste o Google Tag Manager no teu Shopify Custom Pixel. Se envias os teus dados diretamente via gtag - ou seja, integração direta do GA4 via Custom Pixel, segue estes passos Instruções.

Passo 2: Adiciona a função varify analytics.subscribe no custom pixel do GTM

Acede à área "Customer events" no backend da Shopify e abre o custom pixel no qual integraste o teu GTM.

O evento Varify é criado usando o analytics.subscribe adicionado ao teu DataLayer. Na captura de ecrã, podes ver o evento Varify inserido na parte inferior.

Adiciona o seguinte código ao teu Custom Pixel abaixo do código do Google Tag Manager:

analytics.subscribe('varify', (event) => {
  window.dataLayer.push({
   'event': "varify",
    ...event.customData   
  });
});

Passo 3: Desativar a opção "Start Tracking on Activation Event"

Em «Tracking Options», vá para «Advanced Setup». Desative a opção «Start Tracking on Activation Event».

Passo 4: Configurar o Google Tag Manager

1. Criação de uma nova variável de camada de dados (VA Short)

Esta variável é utilizada para fornecer a uma tag as informações do teste A/B.

1. Cria uma nova variável: "Variables" > "New"
2. Tipo de variável -> "Data Layer Variable"
3. Data Layer Variable Name -> varify_abTestShort (ortografia obrigatória)
4. Dá um nome à variável -> VA Short

2. cria um novo gatilho (Varify.io - Event)

O gatilho é o evento decisivo que aciona a transmissão de dados para o sistema Analytics.

1. Nome do gatilho: por exemplo, "Varify.io - event"
2. Tipo de gatilho: "User-defined event"
3. Nome do evento: varify (ortografia obrigatória)

3. criação de uma nova tag GTM (Varify.io - GA4 Tracking Linker)

Tags são trechos de código que enviam os valores armazenados nas variáveis para a tua ferramenta de análise, como o Google Analytics. Agora cria uma tag sochles para enviar os valores da variável criada para o Google Analytics.

1. Nome da tag: "Varify.io - GA4 Tracking Linker"
2. Tag de configuração: [usa a tua tag GA4 existente].
3. Nome do evento: por exemplo, "Abtesting"
4. Nome do parâmetro: varify_abTestShort (Grafia obrigatória)
5. Valores: {{VA Short}} (A variável criada no passo 1)
6. Trigger: "Varify.io - event" (O trigger criado no passo 2)

4. Publicar o Container do GTM

Para garantir que os teus ajustes no Google Tag Manager também funcionem no teu site, é importante publicar as alterações.

Para isso, vai a "Overview" no Tag Manager, à esquerda. Aqui podes ver uma visão geral de todos os elementos que acabaste de criar.

Para publicar, clica no botão azul "Publish" no canto superior direito e confirma. A tag está agora ativa e envia os dados para o teu Google Analytics.

Opção 2: integração direta com o GA4

Siga os passos deste guia se tiveres integrado o gtag no teu Custom Pixel do Shopify (se enviares dados diretamente para o Google Analytics 4)

Passo 2: Adiciona a função varify analytics.subscribe no custom pixel do gtag

Acede à área “Customer events” no backend do Shopify e abre o custom pixel no qual integraste o teu gtag.

O evento Varify é criado usando o analytics.subscribe adicionado ao teu DataLayer. Na captura de tela, podes ver o evento Varify inserido na parte inferior.

Adicione o seguinte código ao seu Custom Pixel abaixo do código do Google Tag Manager:

// Start Varify subscribe event
analytics.subscribe("varify", (event) => {
  const d = event?.customData || {};

  gtag("event", "varify", {
    storageType: d.storageType,
    teamId: d.teamId,
    varify_abTest: d.varify_abTest,
    varify_abTestLong: d.varify_abTestLong,
    varify_abTestShort: d.varify_abTestShort,
    varify_error: d.varify_error,
    varify_experimentId: d.varify_experimentId,
    varify_experimentName: d.varify_experimentName,
    varify_success: d.varify_success,
    varify_variationId: d.varify_variationId,
    varify_variationName: d.varify_variationName
  });
});
// End Varify subscribe event

Passo 3: Desativar a opção "Start Tracking on Activation Event"

Em „Tracking Options,“ vá para „Advanced Setup.“ Desative a opção „Start Tracking on Activation Event“.

Aviso: A Varify não assume qualquer responsabilidade pela funcionalidade do código e das informações.
É da responsabilidade do utilizador testar o código exaustivamente e implementá-lo corretamente.