Como configurar o MGID Pixel para uma Shopify Store

Este guia explicará como instalar o pixel da MGID no seu site, e também como rastrear os eventos mais comuns.

Adicionando o pixel da MGID nas páginas do seu site

Primeiramente, copie o Pixel MGID da seção "Sensores de conversão" da seção de criação de campanha no seu painel.

Em seguida, acesse sua conta Shopify. Quando você fizer o login na loja Shopify, é necessário ir em "Temas" (abaixo de Loja Online).

Clique em “…” (à direita do Tema actual) e Editar código.

Se você não visualizar "Temas" ou não puder clicar nele, entre em contato com o proprietário da loja e peça para fornecer privilégios adicionais para que você possa personalizar temas ativos.

Abra o arquivo "theme.liquid" na pasta "Layout" e cole o pixel da MGID no final da tag head em "theme.liquid", após e antes da tag de fechamento "</head>".

Em seguida, clique no botão "Salvar" no canto superior direito.

Acesse o site e confirme se o código está presente.
Você pode verificar se o código está inserido com a nossa extensão para Chrome - MGID Pixel Helper

Rastreando Conversões

Aqui está um exemplo dos três pontos de conversão mais comuns no funil de compra:

1. Adicionar ao carrinho;
2. Intenção de checkout;
3. Confirmação de compra.

Observação: Os nomes sugeridos de conversão baseados em eventos são fornecidos como exemplo. Você pode nomeá-los como quiser, mas certifique-se de que o código do pixel que você coloca ao redor do botão de ação reflita essa mudança de nome. Caso contrário, os sistemas do Shopify e MGID não serão sincronizados.

Adicionar ao Carrinho

1. Crie uma conversão baseada em evento em seu painel da MGID chamada "AddToCart" e copie o código do pixel do evento para qualquer editor de texto.
2. Localize o arquivo no Shopify que contém o botão onde a ação "Adicionar ao carrinho" ocorre. A localização pode variar dependendo da sua configuração do Shopify, mas o botão "Adicionar ao carrinho" geralmente pode ser encontrado no arquivo "product-template.liquid" ou "product.template.liquid" na pasta "Seções". Se você não tem certeza de como localizá-lo, clique com o botão direito do mouse no botão em seu site para inspecionar o elemento e, em seguida, encontre o ID ou nome da classe.
3. O botão será identificado por uma tag de botão "Adicionar ao carrinho" ou tag de input. Para rastrear esse evento, adicione o código "onclick" que você criou anteriormente à tag correspondente: 

   onclick='_mgq.push(["MgSensorInvoke", "AddToCart"])'

4. Clique no botão "Salvar" no canto superior direito para concluir.

Intenção de checkout

Você também pode rastrear quando um cliente chega à seção de Checkout (finalização de compra) do seu site.

Para fazer isso:

1. Crie uma conversão baseada em evento com o nome "Checkout" no painel MGID.
2. Localize o arquivo onde o botão de checkout é definido. A localização pode variar dependendo da sua configuração do Shopify, mas o botão de checkout geralmente pode ser encontrado no arquivo "cart-template.liquid" na pasta "Seções". Se você não tem certeza de como localizá-lo, clique com o botão direito do mouse no botão em seu site para inspecionar o elemento e, em seguida, encontre o ID ou nome da classe.
3. Adicione o seguinte trecho de código dentro da tag do botão de checkout no arquivo:

   onclick='_mgq.push(["MgSensorInvoke", "Checkout"])'

4. Clique no botão "Salvar" no canto superior direito para concluir.

Confirmação de compra

1. Para rastrear quando um cliente conclui uma compra com sucesso, e vai para a página de Status do Pedido, crie uma nova conversão baseada em evento com o nome "Purchase".
2. Clique em "Configurações" no canto inferior esquerdo da Shopify.

 

 

 

 

 

 

3. Selecione "Checkout" entre as opções de Configurações (ou encontre o arquivo checkout.liquid).

4. Role a página até encontrar a seção "Scripts adicionais". Nesse campo, cole primeiro as condicionais abaixo; isso é necessário para evitar que o pixel de conversão seja ativado mais de uma vez quando um usuário retorna para a página de status do pedido.

5. Cole o Pixel da MGID copiado da aba "Rastreamento de conversões" do seu painel entre as declarações condicionais "if" e "endif". (onde XXXXXX é o ID do cliente MGID).

<!-- Mgid Sensor -->  

 <script type="text/javascript"> 
(function() { 
var d = document, w = window; 
w.MgSensorData = w.MgSensorData || []; 
w.MgSensorData.push({ 
cid:XXXXXX, 
lng:"us", 
project: "a.mgid.com" }); 
var l = "a.mgid.com"; var n = d.getElementsByTagName("script")[0]; 
var s = d.createElement("script"); 
s.type = "text/javascript"; 
s.async = true; 
var dt = !Date.now?new Date().valueOf():Date.now(); 
s.src = "https://" + l + "/mgsensor.js?d=" + dt; 
n.parentNode.insertBefore(s, n); 
})();
</script>  

 <!-- /Mgid Sensor -->

6. Por fim, logo abaixo do Pixel da MGID, adicione o seguinte código de evento:

<script>

(window._mgq = window._mgq || []).push(["MgSensorInvoke", "Purchase"])

</script>

7. É assim que o campo "Scripts adicionais" deve ficar com todos os scripts adicionados:

8. Clique no botão "Salvar" no canto superior direito para finalizar.

Verificação

Para testar se a conversão está funcionando, instale a extensão MGID Pixel Helper através da Chrome Store. Os nomes dos eventos aparecerão na janela do MGID Pixel Helper se estiverem configurados corretamente.

Você também pode verificar se o pixel está sendo ativado acessando a guia "Conversões" no seu painel de controle. A conversão de teste será exibida entre colchetes.

Se tiver alguma dúvida adicional sobre o processo de implementação, entre em contato com a nossa equipe de suporte ao cliente.