Server-side tagging para Shopify
Você está procurando uma maneira fácil e rápida de configurar a marcação no servidor do Shopify? Não procure mais, o aplicativo Stape Conversion Tracking para Shopify. Com nosso aplicativo, você pode inserir facilmente um script do Gerenciador de tags do Google no site, configurar um domínio personalizado e um custom loader, enviar dados de usuários e eventos de e-commerce para a camada de dados e configurar webhooks. Todos esses recursos ajudarão você a tornar o rastreamento mais preciso, prolongando a vida útil dos cookies, tornando o rastreamento do navegador resistente às tecnologias de prevenção de rastreamento e enviando dados confiáveis para plataformas de publicidade e marketing por meio do endpoint do servidor.
Neste post do blog, exploraremos como usar o Google Analytics no Shopify com o aplicativo do Stape para que você possa usar esses recursos poderosos imediatamente.
Benefícios de usar marcação no servidor para Shopify
A marcação do lado do servidor pode turbinar o sucesso de suas campanhas de marketing com rastreamento preciso de conversões e análise de usuários. No entanto, aproveitar ao máximo requer uma configuração meticulosa – algo que ninguém deve ignorar.
Para tornar a implementação da marcação no servidor o mais fácil possível, criamos um aplicativo Conversion Tracking Shopify. Este aplicativo é gratuito e ajuda a configurar facilmente o contêiner do servidor do Gerenciador de tags do Google para a loja Shopify. Mas primeiro, vamos falar sobre os principais benefícios da marcação no servidor para sites do Shopify.
1. Melhor precisão dos dados. A marcação no servidor pode ajudar a garantir uma coleta de dados mais precisa, reduzindo o risco de perda de dados ou erros causados por bloqueadores de anúncios, extensões de navegador ou outros fatores do lado do cliente.
2. Atribuição precisa de conversão. Devido ao aumento da vida útil dos cookies e aos dados do usuário enviados através do servidor, as redes de publicidade podem atribuir conversões a campanhas de marketing com mais precisão.
3. Melhor desempenho do site. Com a marcação no lado do servidor, as tags são carregadas no servidor e não no lado do cliente, reduzindo a quantidade de código que precisa ser carregado no navegador do usuário. Isso pode melhorar a velocidade de carregamento do site, o que é crucial para a experiência do usuário e para o SEO.
4. Segurança aprimorada. A marcação do lado do servidor pode ajudar a melhorar a segurança do site, reduzindo o risco de violações de dados ou outras ameaças à segurança causadas por vulnerabilidades do lado do cliente.
Como configurar a marcação do lado do servidor em sua loja Shopify
Passo 1. Configure o container servidor do Google Tag Manager no Stape
Expanda o elemento abaixo para aceder ao guia detalhado.
Como configurar o container sGTM
Passo 1. Crie um container servidor no Google Tag Manager
➡️ Nota
Antes de configurar o seu contêiner do Google Tag Manager no servidor, é importante configurar primeiro o contêiner Web do GTM, pois:
- O contêiner Web coleta eventos, parâmetros e interações dos usuários no seu site.
- Ele envia esses dados para o seu contêiner no servidor.
Siga a documentação oficial do Google.
1. Selecione sua conta GTM → Clique em "Admin" → Clique no ícone "+" ao lado do nome do contêiner.
2. Adicione o Nome do Contêiner → Em Plataforma de destino, escolha "Servidor". Clique em "Criar".
3. Escolha "Provisionar servidor de marcação manualmente". Copie sua configuração de contêiner. Precisaremos dela nos próximos passos.
Passo 2. Crie uma conta no Stape para alojar o seu container sGTM
1. Aceda a stape.io e crie uma conta ou inicie sessão.
2. Clique em Criar contentor sGTM na página principal.
3. Introduza os detalhes do seu contentor.
- Nome do contentor — atribua um nome ao seu contentor (por conveniência, recomendamos que utilize o mesmo nome que atribuiu ao contentor do servidor no GTM).
- Configuração do contentor — cole os dados de Configuração do contentor que copiou da janela pop-up Instalar o Google Tag Manager. Se os perdeu, aceda a Google Tag Manager → clique em Admin → clique em Definições do contentor → copie a sequência de caracteres em Configuração do contentor.
- Localização do servidor — para obter o melhor desempenho, escolha a localização do servidor mais próxima da localização da maioria dos seus clientes. Consulte a lista de localizações de servidores disponíveis aqui. Além disso, pode optar pela opção de localização de servidor multizona global se tiver tráfego proveniente de diferentes regiões. Esta opção encaminhará automaticamente os pedidos recebidos para a zona disponível mais próxima, com base no endereço IP do utilizador.
Em seguida, clique em Criar contentor.
4. Escolha um plano para o seu contentor. Pode começar com um plano Gratuito. Clique em Continuar com um plano gratuito.
5. Verá o estado do seu contentor, a configuração do contentor e o nome do plano. A implementação de um contentor de servidor demora cerca de 5 minutos.
Atualize a página para atualizar o estado. Se a configuração do Google Tag Manager do lado do servidor tiver sido feita corretamente, deverá ver o estado Em execução.
Passo 2. Adicione e configure a app Stape Conversion Tracking para Shopify
2.1 Instale a app Stape Conversion Tracking na sua loja
A aplicação Stape Conversion Tracking para o Shopify pode ser instalada gratuitamente a partir do Shopify Marketplace.
2.2 Configure o separador General
No separador General encontra todas as definições relacionadas com a adição do snippet GTM em todas as páginas da sua loja Shopify de forma resistente a bloqueadores de anúncios, ITP e limitações de duração de cookies.
- Use Shopify Markets
Marque esta caixa se tiver vários mercados Shopify. Com esta funcionalidade pode configurar a injeção GTM separadamente para cada mercado Shopify. Se a funcionalidade estiver desativada, todos os mercados utilizam a configuração predefinida.
Quando ativada, verá os campos que precisam de ser configurados para cada mercado:
- Insert GTM: se marcado, o snippet GTM é adicionado a cada página do site.
- GTM container ID: o ID do seu container web GTM.
- Customer privacy API: se ativado, a app aguarda o carregamento do GTM até que o visitante aceite os cookies através do banner Customer Privacy do Shopify. Esta opção não é recomendada por defeito.
- Custom domain, Stape container ID e Cookie Keeper: estes campos estão associados ao tracking server-side; configure-os se utiliza ou pretende utilizar a configuração server-side. Abaixo explicamos onde encontrar os valores para cada campo.
- GTM web container ID
Especifique aqui o ID do seu container web GTM.
- Custom domain
É fundamental utilizar o seu próprio subdomínio para que os cookies first-party funcionem corretamente e o tracking funcione em geral. Se ainda não adicionou um subdomínio ao seu container sGTM, siga o guia sobre domínios personalizados.
- Custom Loader
A sua utilização é fortemente recomendada para aumentar a proteção contra bloqueadores de anúncios.
Marque a caixa correspondente e especifique o seu identificador de container Stape. Para o encontrar, inicie sessão na sua conta Stape, selecione o container sGTM e localize o identificador do container na secção Settings.
- Cookie Keeper
Esta funcionalidade permite minimizar o impacto das mais recentes restrições ITP. Antes de a ativar através da app, certifique-se de que a tem ativada no Stape no seu container. Para configurar o Cookie Keeper, clique no elemento expansível e siga as instruções:
Como configurar o Cookie Keeper
1. Inicie sessão na sua conta Stape e selecione o seu container sGTM a partir do painel de controlo.
2. Aceda a Power-ups e clique em Use junto ao painel Cookie Keeper.
3. Ative o botão Cookie Keeper para o habilitar.
4. Em Standard cookies, selecione quais os cookies a prolongar.
- Cookies personalizados
Se os cookies de que precisa não estiverem na lista padrão, pode configurar cookies personalizados. Introduza o nome do cookie e defina, opcionalmente, uma data de expiração em dias (deixe em branco para manter indefinidamente).
5. Clique em Save changes.
Testar a configuração
Os passos abaixo utilizam o cookie _ga do Google Analytics como exemplo, mas pode aplicar o mesmo procedimento a qualquer plataforma. Certifique-se de que configurou pelo menos uma tag GA4.
- Abra o browser Safari (versão não anterior à 16.4). Para confirmar a versão, clique em Safari na barra de menus e selecione About Safari.
- Aceda ao URL do seu site adicionando o parâmetro
?galid=test123para definir o cookie_ga. Por exemplo:oseusite.com/?galid=test123. - Clique com o botão direito na página → Inspect Element → separador Storage → Cookies.
- Localize
_ga, copie e guarde o seu valor, e depois elimine o cookie (clique direito no cookie → Delete). - Recarregue a página duas vezes.
- Confirme que o cookie
_gareapareceu com o mesmo valor. Se sim, o Cookie Keeper está a funcionar corretamente.
- GTM snippet block
Aqui pode obter o snippet GTM para o instalar em páginas que estão fora do seu tema Shopify (como páginas criadas por apps de terceiros como o Zipify).
2.3 Configure o separador Data Layer
No separador Data Layer encontra os eventos de data layer a ativar e configurar. A segunda caixa permite-lhe controlar se os nomes dos eventos recebem o sufixo _stape para evitar conflitos no GTM. Se estiver desativado, os eventos mantêm os seus nomes originais.
Ativação do data layer:
- Ative a caixa Add ecommerce Data Layer events.
- Guarde as alterações.
- Copie o código para o pixel personalizado na caixa abaixo no separador Data Layer e siga as instruções para o adicionar e ativar.
Na secção Customer privacy, sob o botão de permissão, certifique-se de selecionar Not required. O snippet de código apenas gera o Data Layer; não define cookies nem reporta dados a terceiros.
No separador Data Layer existe também a opção Log events to console (Dev), uma ferramenta de depuração para programadores e administradores de loja. Quando ativada, regista os eventos de e-commerce na consola do browser, mostra os payloads dos eventos enviados para o container servidor GTM/Stape para verificação e ajuda a depurar os Data Layers.
Esta opção destina-se apenas a desenvolvimento e deve ser desativada em produção para evitar registos desnecessários na consola.
2.4 Configure o separador Webhooks
Os eventos de webhook são configurados no separador Webhook.
Nota: o problema com os webhooks no Shopify é que não contêm dados de cookies, que são essenciais para o tracking em qualquer plataforma. Por isso, o uso de eventos de webhook é recomendado apenas como último recurso, caso não consiga fazer o tracking online por qualquer motivo.
Neste separador são configurados os eventos de webhook.
Para ativar um webhook, marque a caixa, especifique o URL do container servidor GTM e o /path para onde os webhooks devem ser enviados.
Pode subscrever webhooks quando uma nova encomenda é criada ou quando é feito um reembolso numa encomenda.
Algumas publicações do blog úteis sobre o uso e depuração de webhooks:
2.5 O separador Customer Match
Ignore a configuração neste separador se não gerir campanhas Google Ads ou não utilizar listas Customer Match.
Passo 3. Envie dados para o container servidor do Google Tag Manager
O contentor do servidor não tem acesso direto aos dados do navegador, tais como a camada de dados, os cookies ou o contexto da página. Por isso, estes dados têm de ser enviados explicitamente a partir do contentor web.
- Data Tag, em conjunto com o Data Client no contentor do servidor para receber e analisar os seus pedidos, envia variáveis da camada de dados e outros parâmetros independentemente de qualquer plataforma específica;
- Google Analytics 4, que envia dados através de uma Google Tag configurada com o URL do contentor do servidor. Ambos os métodos são abordados abaixo.
Enviar dados da Web para o contentor do servidor utilizando a Data Tag
Passo 1. Instalar o modelo da Data Tag:
- Clique no menu «Tags».
- Clique em «Novo».
- Abra a secção «Modelos» do seu contentor Web do Google Tag Manager → adicione a Data Tag a partir da galeria de modelos.
- Clique no separador «Configuração da tag».
- Clique em «Descubra mais tipos de tags na Galeria de Modelos da Comunidade» → procure por «Data Tag»→ clique em «Adicionar ao Espaço de Trabalho» → clique em «Adicionar».
Passo 2. A seguir, vamos configurar a Data Tag para o evento de visualização de página:
- Em Nome do evento, pode selecionar um nome de evento padrão, adicionar um nome de evento personalizado ou adicionar um nome de evento dinâmico utilizando a variável {{Event}}.
- Introduza o seu URL do lado do servidor do GTM (pode encontrar o seu URL do lado do servidor do GTM na conta stape.io, abrindo o contentor sGTM e verificando a secção Domínio.)
- Selecione como pretende que os dados sejam enviados:
- Enviar tudo a partir da camada de dados (DataLayer) — enviará todas as informações que tem na camada de dados do GTM na Web para os dados de eventos do GTM no servidor.
- Enviar dados comuns — adiciona à solicitação os seguintes dados: page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.
- Adicionar estado de consentimento — adiciona o objeto consent_state à solicitação. Inclui as seguintes propriedades: ad_storage, analytics_storage, functionality_storage, personalization_storage, security_storage.
- Adicionar cookie comum – a tag enviará cookies comuns no `eventData` para contornar algumas limitações de plataformas de comércio eletrónico. Por exemplo, isto é necessário para eventos que funcionam nas páginas de checkout do Shopify.
- Em Dados do evento, pode adicionar quaisquer dados manualmente à solicitação. Também pode aplicar transformações (como hash, corte, etc.) ou armazenar dados.
- Em Dados do utilizador, pode enviar parâmetros do utilizador e aplicar transformações ou armazenar dados.
- Em Configurações e Configurações Avançadas, encontrará exatamente isso — opções de configuração avançadas. A menos que saiba o que está a fazer, é melhor não alterar estas configurações.
- Atribua um nome descritivo à sua tag e clique em Guardar.
Passo 3. Em seguida, pode configurar a Data Tag para outros eventos. O exemplo seguinte mostra como configurar eventos de comércio eletrónico quando a Camada de Dados está disponível.
Esta tag aciona todos os eventos de comércio eletrónico na Camada de Dados. Neste exemplo, todos os eventos de comércio eletrónico terminam em _stape, pelo que utilizamos uma expressão regular que captura todos os eventos que contenham _stape.
Exemplo da variável que extrai dados do utilizador da Camada de Dados.
Passo 4. Em seguida, descarregue o Cliente de Dados do GitHub:
- Siga este link.
- Clique em Código → Descarregar ZIP.
Passo 5. Agora, importe o Cliente de Dados:
- Abra o seu contentor do Google Tag Manager no Servidor.
- Clique em Modelos.
- Em Clientes, clique em Novo.
- Clique nos três pontos no canto superior direito.
- Clique em Importar e selecione o Data Client que descarregou do GitHub (pode ser necessário descompactar o arquivo primeiro).
- Quando a importação estiver concluída, clique em Guardar .
Passo 6. Abra o separador Clientes e clique em Novo → selecione Data Client → clique em Guardar.
Passo 7. Abra os ecrãs de pré-visualização do GTM para «Web» e «Servidor» e teste a configuração. Deverá verificar que a «Data Tag» é acionada no contentor do GTM para «Web» e que o «Cliente de Dados» está a processar os pedidos da «Data Tag» no sGTM.
Como enviar dados da Web para o contentor do servidor através do Google Analytics 4
Passo 1. Crie uma variável de configuração para o URL do contentor do servidor. Para tal:
- Clique no menu Variáveis.
- Clique em Novo na barra Variável definida pelo utilizador.
- Clique na barra Configuração da variável.
- Selecione o tipo Tag do Google: Definições de configuração.
- Clique em Adicionar parâmetro.
- Introduza os seguintes parâmetros:
- Parâmetro de configuração: server_container_url.
- Valor: o URL do seu contentor de servidor do Tag Manager.
- Atribua um nome descritivo à sua variável e clique em Guardar.
Passo 2. Crie uma tag do Google Analytics 4:
- Clique no menu Tags.
- Clique em Novo.
- Clique no separador Configuração da tag.
- Selecione Google Analytics → Tag do Google.
- Em ID da tag, introduza o ID da sua conta GA4 (para o encontrar, aceda ao GA4 → clique em Administração → Fluxos de dados → selecione o fluxo → consulte o ID de medição).
- Em Definições de configuração, selecione a variável do contentor do servidor que criou anteriormente.
- Em Acionamento, certifique-se de que a opção Inicialização - Acionamento em todas as páginas está selecionada.
- Atribua um nome descritivo à sua etiqueta e clique em Guardar.
- Clique em Publicar para que o contentor entre em funcionamento.
Passo 3. A seguir, vamos ver como criar um evento GA4, utilizando o evento Todos os cliques como exemplo:
- Clique no menu Etiquetas.
- Clique em Novo.
- Clique no separador Configuração da etiqueta.
- Selecione Google Analytics → Google Analytics: Evento GA4.
- Introduza o seu ID de medição (a partir do menu Fluxos de dados do GA4).
- Atribua um nome descritivo ao seu evento.
- Clique em Acionamento → Todos os cliques.
- Atribua um nome descritivo à etiqueta.
- Clique em Guardar.
Configurar o acompanhamento de conversões com várias plataformas
Em seguida, terá de configurar o envio dos dados do seu evento para a sua plataforma de marketing/análise. Os passos exatos dependerão da plataforma que escolher. Consulte os nossos guias sobre as plataformas mais populares para obter mais informações:
Passo 4. Configure o tracking dentro do container servidor do Google Tag Manager
A maioria das ferramentas de marketing e análise mais populares já suporta o tagging server-side e dispõe de tags para sGTM. No nosso site encontra guias para as implementar, por exemplo para Facebook CAPI, TikTok Events API, Snapchat Conversions API, tracking server-side do Google Ads, etc.
Passo 5. Teste a configuração da app
Depuração do download
GTM Após a ativação ou quaisquer alterações, é recomendável verificar se o seu container está de facto carregado no site.
Para o fazer, aceda a qualquer página do seu site, abra a consola do browser e, no separador de rede, filtre pelo URL do seu subdomínio/servidor de tagging. Deverá ver um pedido como no screenshot a seguir com o estado de resposta 200.
Depuração dos eventos de data layer no checkout
Com os eventos que ocorrem antes da página de checkout, tudo funciona como em qualquer outra plataforma: pode iniciar a pré-visualização do seu container web GTM e ver todos os eventos.
Os eventos de checkout não serão apresentados no GTM Preview devido ao ambiente isolado nestas páginas, que bloqueia a manipulação irrestrita do DOM ou a injeção de scripts, incluindo o snippet GTM.
Contudo, pode inserir manualmente o snippet na página de checkout utilizando a extensão Chrome Stape GTM Helper:
- Depois de iniciar o Preview Mode no GTM, ative o botão Shopify Sandbox dataLayer no separador Settings da extensão.
- No separador Inject GTM, clique em Enable injection, adicione o nome do seu domínio e o GTM ID. Guarde as alterações.
Os eventos na página de checkout serão agora apresentados no GTM Preview.
Estratégias para melhorar carregamento de páginas no Shopify
O excesso de scripts de terceiros pode deixar sua loja lenta. Ao mover as tags de marketing (como Facebook Pixel e TikTok) para o servidor, você libera muito processamento no dispositivo do seu cliente. Manter essa arquitetura mais leve, onde o navegador só precisa lidar com o script do GTM, é uma das formas mais eficazes de melhorar carregamento de páginas no Shopify. Na prática, isso significa uma navegação muito mais fluida, menos clientes desistindo por lentidão e melhores notas nos Core Web Vitals do Google.
Conclusão
As possibilidades de marcação no servidor estão se expandindo rapidamente, oferecendo ao usuário uma ótima ferramenta para melhorar a precisão do rastreamento e análise de conversões. Além disso, a Stape tenta simplificar o uso do sGTM para nossos clientes, por isso lançamos o aplicativo Conversion Tracking para Shopify.
O Stape Conversion Tracking para Shopify é uma ferramenta fantástica com vários recursos e benefícios. Por exemplo, você pode configurar facilmente o rastreamento em seu site adicionando um script do Gerenciador de tags do Google e configurando seu domínio e carregador personalizados. Além disso, você pode enviar dados do usuário para a camada de dados e configurar webhooks.
Todos esses recursos ajudam a tornar os dados analíticos mais precisos, prolongando a vida útil dos cookies e tornando o rastreamento do navegador resistente às tecnologias de prevenção de rastreamento. Essas ferramentas são essenciais para a transmissão confiável de dados através do endpoint do servidor para plataformas de publicidade e marketing.
Se você está procurando uma solução rápida e simples para configurar a marcação no servidor do Shopify, Stape é a escolha certa. Aproveite essa excelente solução hoje e colha os benefícios de insights de rastreamento mais precisos com o aplicativo Stape Conversion Tracking para Shopify. Teste você mesmo agora - sabemos que você não ficará desapontado!
Podemos ajudá-lo com a configuração!
Temo-lo coberto! Clique em Obter ajuda, preencher o formulário, e enviar-lhe-emos um orçamento.
Comentários