Analytics na Shopify

Instalação

1. 1Abra o editor de código do tema

   No admin da Shopify: Loja virtual → Temas, no tema publicado clique em … → Editar código. Se quiser testar antes, duplique o tema e edite a cópia.

2. 2Cole o snippet no theme.liquid

   Em Layout, abra theme.liquid e cole o snippet logo antes do </head>. Salve.

     <!-- antes do </head> -->
     <script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
     <script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>
   </head>

Eventos e metas

Para contar quem adiciona ao carrinho, cole este trecho no theme.liquid, antes do </body>. Ele usa os dados do produto que o Liquid já tem na página.

{% if template.name == 'product' %}
<script>
  // qualquer formulário de "adicionar ao carrinho" na página de produto
  document.addEventListener('submit', function (event) {
    if (event.target.matches('form[action*="/cart/add"]')) {
      window.analytics && window.analytics.addToCart(
        '{{ product.id }}',
        {{ product.title | json }},
        {{ product.price | divided_by: 100.0 }},
        1
      )
    }
  })
</script>
{% endif %}

No painel, crie uma meta do tipo evento add_to_cart e um funil produto → carrinho para ver por origem quem chega até lá. Compras: o checkout da Shopify não usa o theme.liquid, então o script não roda lá. Para contar pedidos, envie o evento purchase do seu servidor (por exemplo, a partir de um webhook de pedido) pela ingestão server-side.

Navegação entre páginas

A vitrine da Shopify recarrega a página a cada navegação, e cada carga conta a própria pageview. Não há nada a configurar.

Confira se está funcionando

1. Abra o site publicado numa janela comum, sem bloqueador de anúncios.
2. Nas ferramentas do navegador, aba Network, filtre por v1/i: deve aparecer um POST com status 200 em até 3 segundos (ou quando você sai da página).
3. No painel, os eventos aparecem em cerca de 30 segundos.
4. Abra uma página de produto, clique em adicionar ao carrinho e confira o evento add_to_cart no POST seguinte.

Problemas comuns

Troquei de tema e os dados pararam

O snippet fica no código do tema. Ao publicar outro tema, cole o snippet de novo no theme.liquid dele.

Não vejo eventos do checkout

É esperado: o checkout não carrega o theme.liquid. Use a ingestão server-side para registrar as compras.

A requisição volta 403 (origin_not_allowed)

O domínio não está em Allowed origins nas configurações do site. Cadastre a origem exata — com https://, com e sem www, e endereços de teste como http://localhost:3000 se quiser medir em desenvolvimento.

Nenhuma requisição aparece na aba Network

O SDK respeita o Do Not Track por padrão: se o seu navegador envia DNT, nada é enviado. Teste em outro navegador ou perfil. Bloqueadores de anúncio também podem barrar o script.

As pageviews aparecem em dobro

O SDK foi inicializado duas vezes (por exemplo, o script colado no tema e também por um plugin). Mantenha uma única instância por página.