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.

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.

Expanda o elemento abaixo para aceder ao guia detalhado.

A aplicação Stape Conversion Tracking para o Shopify pode ser instalada gratuitamente a partir do Shopify Marketplace.

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:

• 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).

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.

Aqui encontra a lista completa de eventos e os seus payloads, adicionados através da app Stape.

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.

Os eventos de webhook são configurados no separador Webhook.

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:

• O que são os webhooks e seu uso no rastreamento do lado do servidor
• Depurar webhooks recebidos na pré-visualização do servidor do Google Tag Manager
• Rastreamento de servidor para servidor no Google Tag Manager

Permite preencher e atualizar automaticamente as listas Customer Match no Google Ads.

Ignore a configuração neste separador se não gerir campanhas Google Ads ou não utilizar listas Customer Match.

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.

Passo 1. Instalar o modelo da Data Tag:

1. 1.
   Clique no menu «Tags».
2. 2.
   Clique em «Novo».
3. 3.
   Abra a secção «Modelos» do seu contentor Web do Google Tag Manager → adicione a Data Tag a partir da galeria de modelos.
4. 4.
   Clique no separador «Configuração da tag».
5. 5.
   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:

1. 1.
   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}}.
2. 2.
   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.)
3. 3.
   Selecione como pretende que os dados sejam enviados:

   1. 3.1.
      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.
   2. 3.2.
      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.
   3. 3.3.
      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.
   4. 3.4.
      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.
4. 4.
   Em Dados do evento, pode adicionar quaisquer dados manualmente à solicitação. Também pode aplicar transformações (como hash, corte, etc.) ou armazenar dados.
5. 5.
   Em Dados do utilizador, pode enviar parâmetros do utilizador e aplicar transformações ou armazenar dados.
6. 6.
   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.
7. 7.
   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:

1. 1.
   Siga este link.
2. 2.
   Clique em Código → Descarregar ZIP.

Passo 5. Agora, importe o Cliente de Dados:

1. 1.
   Abra o seu contentor do Google Tag Manager no Servidor.
2. 2.
   Clique em Modelos.
3. 3.
   Em Clientes, clique em Novo.
4. 4.
   Clique nos três pontos no canto superior direito.
5. 5.
   Clique em Importar e selecione o Data Client que descarregou do GitHub (pode ser necessário descompactar o arquivo primeiro).
6. 6.
   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.

Passo 1. Crie uma variável de configuração para o URL do contentor do servidor. Para tal:

1. 1.
   Clique no menu Variáveis.
2. 2.
   Clique em Novo na barra Variável definida pelo utilizador.
3. 3.
   Clique na barra Configuração da variável.
4. 4.
   Selecione o tipo Tag do Google: Definições de configuração.
5. 5.
   Clique em Adicionar parâmetro.
6. 6.
   Introduza os seguintes parâmetros:

   1. 6.1.
      Parâmetro de configuração: server_container_url.
   2. 6.2.
      Valor: o URL do seu contentor de servidor do Tag Manager.
7. 7.
   Atribua um nome descritivo à sua variável e clique em Guardar.

Passo 2. Crie uma tag do Google Analytics 4:

1. 1.
   Clique no menu Tags.
2. 2.
   Clique em Novo.
3. 3.
   Clique no separador Configuração da tag.
4. 4.
   Selecione Google Analytics → Tag do Google.
5. 5.
   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).
6. 6.
   Em Definições de configuração, selecione a variável do contentor do servidor que criou anteriormente.
7. 7.
   Em Acionamento, certifique-se de que a opção Inicialização - Acionamento em todas as páginas está selecionada.
8. 8.
   Atribua um nome descritivo à sua etiqueta e clique em Guardar.
9. 9.
   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:

1. 1.
   Clique no menu Etiquetas.
2. 2.
   Clique em Novo.
3. 3.
   Clique no separador Configuração da etiqueta.
4. 4.
   Selecione Google Analytics → Google Analytics: Evento GA4.
5. 5.
   Introduza o seu ID de medição (a partir do menu Fluxos de dados do GA4).
6. 6.
   Atribua um nome descritivo ao seu evento.
7. 7.
   Clique em Acionamento → Todos os cliques.
8. 8.
   Atribua um nome descritivo à etiqueta.
9. 9.
   Clique em Guardar.

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:

• Como configurar a API de conversões da Meta
• Como configurar o acompanhamento do Google Analytics 4 (GA4)
• Como configurar o acompanhamento de conversões do Google Ads
• Outras plataformas

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.

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:

1. 1.
   Depois de iniciar o Preview Mode no GTM, ative o botão Shopify Sandbox dataLayer no separador Settings da extensão.
2. 2.
   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.

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.

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!