Plataforma

Genérica

Guia para qualquer plataforma de e-commerce com suporte a Google Tag Manager.

Como funciona

O sistema carrega a descrição de produto como um iframe (ou Shadow DOM) dentro da página da loja. O GTM precisa passar dois valores:

Content ID — identificador do conteúdo a ser exibido, fornecido pela marca para cada produto
Target — seletor CSS do elemento onde o conteúdo será inserido

A marca informa qual Content ID corresponde a cada produto. Esse ID precisa bater com o identificador do template no CDN.

1 Pré-requisitos

Google Tag Manager instalado e configurado na loja
O domínio da loja ativado (entre em contato se ainda não ativou)
O Content ID de cada produto, fornecido pela marca

2 Criar a variável de Content ID

A abordagem depende de como a plataforma expõe os dados do produto. Escolha a que se aplica:

Opção A — Objeto JavaScript global

function() {
  // Substitua pelo caminho correto no objeto da sua plataforma
  return window.SUA_PLATAFORMA && String(window.SUA_PLATAFORMA.product.id);
}

Opção B — Data Layer Variable

Se a plataforma empurra os dados para o datalayer, crie uma variável Data Layer Variable:

Campo	Valor
Nome da variável	`dlv - Content ID`
Data Layer Variable Name	Caminho até o ID no datalayer da sua plataforma

Opção C — Meta tag ou data attribute

function() {
  // Exemplo com meta tag: <meta name="product-id" content="...">
  var el = document.querySelector('meta[name="product-id"]');
  return el ? el.getAttribute('content') : undefined;
}

ℹ Antes de publicar, confirme no console do browser (em uma página de produto) que a variável retorna o Content ID correto.

3 Criar a variável de timestamp

Campo	Valor
Nome da variável	`Custom - Day Timestamp`
Tipo	Custom JavaScript

function() {
  return Math.floor(Date.now() / 86400000);
}

4 Criar a tag

Crie uma nova tag do tipo Custom HTML. Substitua .SELETOR-DO-CONTAINER pelo seletor CSS do container onde a descrição deve aparecer.

<script>
  window.BDESC = window.BDESC || [];
  BDESC.push({
    pageid: '{{dlv - Content ID}}',
    target: '.SELETOR-DO-CONTAINER'
  });
</script>
<script src="https://content-descriptions.pages.dev/tag.js?cv={{Custom - Day Timestamp}}" async></script>

Como encontrar o seletor

Abra uma página de produto no browser
Clique com o botão direito na área de descrição → Inspecionar
Identifique o elemento pai que você quer substituir
Use o class ou id desse elemento como seletor

5 Configurar o gatilho

Campo	Valor
Tipo	DOM Ready
Condição	`{{dlv - Content ID}}` não é igual a `undefined`

Se a plataforma usa SPA com navegação client-side, pode ser necessário um evento customizado que dispara na mudança de página de produto.

6 Publicar e validar

Publique uma nova versão do container GTM
Abra uma página de produto da loja
Use o GTM Preview Mode para confirmar que a tag disparou
Verifique se {{dlv - Content ID}} está retornando o ID correto
Confirme que a descrição aparece no lugar certo e responde em mobile

✓ Se a descrição aparecer corretamente na página de produto, a implantação está concluída.

Solução de problemas

A descrição não aparece

Confirme que o domínio está ativado
Verifique no GTM Preview Mode se a tag disparou e se a variável de Content ID está preenchida
No console: document.querySelector('.SEU-SELETOR') deve retornar o elemento

A tag dispara mas nada acontece

Abra o console e verifique se há erros de rede ou CORS
Confirme que a requisição ao CDN retorna 200 (e não 403) — o domínio precisa estar ativado

Precisa de ajuda? Entre em contato com o suporte para ativação de domínio, dúvidas sobre a implantação ou para reportar problemas.