Como configurar o rastreamento server-side na Shopify

A configuração padrão server-side para Shopify é fácil de implementar com o aplicativo Sourei Wascer. O app ajuda você a implantar um loader gtm.js modificado na sua loja Shopify, enviar
dados para o sGTM por meio de webhooks e encaminhar eventos de dataLayer.push para o seu container web.

1.  Configure o contêiner do Google Tag Manager no servidor Wascer .

2. Instale e configure o aplicativo Sourei Wascer para Shopify.

O objetivo do aplicativo é simplificar tanto a configuração do Google Tag Manager server-side quanto o processo de envio de dados para o GTM. Ele funciona com a hospedagem server-side do
Google Tag Manager da Wascer, assim como com outros provedores de hospedagem, mas os recursos de loader customizado e gerenciamento de cookies funcionam apenas quando você está utilizando
a hospedagem da Wascer.

2.1. Instale o aplicativo Sourei Wascer na sua loja. 

2.2. Na aba General, você encontrará todas as configurações relacionadas à instalação do snippet do GTM em todas as páginas da sua loja Shopify.

• GTM web container id
  Aqui você deve informar o ID do seu container WEB do GTM.
  
• Custom domain
  É extremamente importante utilizar o seu próprio subdomínio para que os cookies first-party funcionem corretamente e para que o rastreamento funcione de forma geral. Se você ainda não adicionou um subdomínio ao seu container sGTM, pode usar este guia para adicioná-lo.
  
• Was Loader
  É um parâmetro opcional, mas seu uso é altamente recomendado para aumentar a proteção contra ad blockers.
  
  Informe aqui o identificador do seu container Wascer. Siga este guia para localizar o identificador do container na Wascer.
  
• Cookie Shield
  Permite minimizar o impacto das restrições mais recentes de ITP.
  
  Antes de ativar esse recurso, certifique-se de que ele está habilitado no Wascer, dentro do seu container.

2.3. O DataLayer é responsável por carregar dinamicamente o pixel de checkout da Wascer dentro do Shopify.

Código é responsável por carregar e ativar o pixel de rastreamento da Wascer no checkout da Shopify. Após a configuração, o rastreamento passa a ser inicializado automaticamente. Em caso de falha no carregamento, informações de erro ficam disponíveis no navegador para apoio ao diagnóstico.

2.4. Os eventos de webhook são configurados na aba Webhook.

A aba WebHook é usada para configurar o envio de eventos de pedido para um endpoint HTTP externo.

Nessa aba, você define a Webhook URL e seleciona quais eventos devem ser enviados:

• Pedido Criado
• Pedido Pago
• Pedido Reembolsado

Quando habilitados, esses eventos são enviados automaticamente para a URL configurada.

Campos disponíveis

• Webhook URL: endpoint principal que receberá os eventos.
• Webhook Types: lista de eventos habilitados.
• Save Webhook(s): salva a configuração atual.

Webhook Test

A seção de teste permite validar a integração manualmente usando um payload de exemplo.

Campos:

• Test URL: endpoint usado para validação.
• X-Gtm-Server-Preview: header opcional para debug com GTM Server-Side Preview.
• Test Payload: seleciona qual evento de exemplo será enviado.

Current Configuration

A seção final exibe:

• URL configurada
• webhooks ativos
• rotas de eventos habilitadas
• data e hora da última atualização

2.5. Ative o app embed Sourei Wascer e valide os eventos de rastreamento

Depois de concluir a configuração do aplicativo, você deve verificar se o app embed Sourei Wascer está habilitado no tema ativo da loja Shopify.

No admin do Shopify, acesse:

Online Store -> Themes -> Customize -> App embeds

Localize o app embed Sourei Wascer e ative o toggle DataLayer Tracker. Em seguida, salve a configuração do tema.

Essa etapa é obrigatória porque o app embed é responsável por injetar a camada de rastreamento da storefront no tema. Se ele estiver desabilitado, a lógica de rastreamento no frontend não
será executada, mesmo que as configurações do aplicativo estejam corretas.

Depois que o embed estiver ativo, abra a storefront e, se o modo de debug tiver sido ativado durante a configuração inicial, inspecione o console do navegador para confirmar que os eventos
de rastreamento estão sendo emitidos corretamente.

Nesta etapa, você deve conseguir validar eventos como:

• eventos de visualização de página
• DataLayer pushes relacionados a ecommerce
• mensagens de inicialização e debug do rastreador da Wascer

• Abra o Console do navegador (DevTools) e valide se os eventos do DataLayer estão sendo disparados corretamente durante a navegação e interações da loja.

Essa validação confirma que a integração da storefront está ativa e que a camada de rastreamento está disponível antes do envio de dados para o GTM ou para endpoints server-side.