No GTM, você precisa capturar os dados dinâmicos da página (como nome, descrição, preço, etc.).
Para isso, comece criando variáveis personalizadas para seu schema:
- Nome do Produto: Use o seletor CSS ou JavaScript para capturar o nome do produto.
- Descrição do Produto: Capture a descrição do produto.
- Preço: Capture o preço do produto.
- SKU: Capture o SKU do produto.
- Marca: Capture a marca do produto.
- Disponibilidade: Capture a disponibilidade (ex.: “Em estoque”).
Exemplo de como capturar o nome do produto com JavaScript:
function() {
return document.querySelector('.product-title').innerText;
}
Repita esse processo para cada atributo que você deseja incluir no schema.
2. Crie uma Tag Custom HTML
Agora, crie uma tag no GTM para gerar o schema JSON-LD dinamicamente:
- No GTM, vá para Tags > New.
- Nomeie a tag (ex.: “Schema Markup – Product”).
- Escolha o tipo de tag: Custom HTML.
- Cole o seguinte código na área de HTML:
Esse é um schema JSON que quero deixar dinâmico com as variáveis que adicionei ok? Coloque o que você deseja no seu Google Tag Manager.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{Nome do Produto}}",
"description": "{{Descrição do Produto}}",
"brand": {
"@type": "Brand",
"name": "{{Marca do Produto}}"
},
"sku": "{{SKU do Produto}}",
"offers": {
"@type": "Offer",
"price": "{{Preço do Produto}}",
"priceCurrency": "BRL",
"availability": "{{Disponibilidade do Produto}}"
}
}
</script>
Substitua os placeholders ({{Nome do Produto}}, {{Descrição do Produto}}, etc.) pelas variáveis que você criou no Passo 1.
3. Configure o Trigger
Agora, defina quando essa tag deve ser acionada:
- Clique em Triggering.
- Escolha All Pages (se o schema for aplicado em todas as páginas) ou crie um trigger personalizado para acionar apenas nas páginas de produto.
- Para páginas de produto, use uma regra como: Page URL contém /produto/ (ajuste conforme a estrutura do seu site).
4. Teste e Publique
- Use o Preview Mode do GTM para testar a implementação.
- Acesse uma página de produto e verifique se o schema JSON-LD está sendo injetado corretamente.
- Use a ferramenta Rich Results Test do Google para validar o schema.
- Se tudo estiver funcionando, publique a tag no GTM.
Exemplo Completo de Tag Custom HTML
Aqui está um exemplo completo de como a tag pode ficar no GTM:
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{Nome do Produto}}",
"description": "{{Descrição do Produto}}",
"brand": {
"@type": "Brand",
"name": "{{Marca do Produto}}"
},
"sku": "{{SKU do Produto}}",
"offers": {
"@type": "Offer",
"price": "{{Preço do Produto}}",
"priceCurrency": "BRL",
"availability": "{{Disponibilidade do Produto}}"
}
}
</script>
Dicas Adicionais
- Validação: Sempre valide o schema usando o Rich Results Test do Google.
- Atualizações: Se você adicionar novos atributos ao schema, atualize as variáveis e a tag no GTM.
- Desempenho: Certifique-se de que o script não afeta o desempenho do site. O GTM já é otimizado para isso, mas evite scripts desnecessários.
Automatização para Múltiplos Produtos
Se o seu e-commerce tem milhares de produtos, essa abordagem é escalável, pois o GTM injeta o schema dinamicamente em todas as páginas de produtos sem a necessidade de modificações manuais no código-fonte.