GA4 e GTM server-side, aplicados neste próprio site

Em vez de um acionador de clique por elemento, cada link relevante recebe atributos data-, e um único listener envia tudo para o dataLayer. Adicionar um botão novo ao tracking é só colocar um atributo no HTML.

HTML

<a href="/notebooks-dashboard/"
   data-track="select_project"
   data-project="radar-precos-notebooks"
   data-type="web">Ver Dashboard</a>

static/js/tracking.js

document.addEventListener('click', function (e) {
  var el = e.target.closest('[data-track]');
  if (!el) return;

  var payload = {
    event: el.dataset.track,
    section_name: el.dataset.section,
    project_name: el.dataset.project,
    project_type: el.dataset.type,
    file_name: el.dataset.file,
    contact_method: el.dataset.method,
    link_url: el.href
  };

  // Remove parâmetros vazios para não mandar "undefined" ao GA4
  Object.keys(payload).forEach(function (k) {
    if (payload[k] === undefined || payload[k] === '') delete payload[k];
  });

  window.dataLayer.push(payload);
});

No container, um padrão de nomes deixa tudo legível: GA4 - Evento - contact_click, CE - contact_click (acionador de evento personalizado), DLV - project_name (variável da camada de dados), separados em pastas.

Print pendente/static/img/tracking/gtm-tags.png

Print pendente/static/img/tracking/gtm-tag-contact-click.png

Print pendente/static/img/tracking/gtm-versoes.png

O site começa com todos os consentimentos negados. O banner é próprio, em HTML e JS, com "Aceitar" e "Recusar" do mesmo tamanho, e a escolha fica salva no navegador. Quem já escolheu antes tem o consentimento atualizado antes mesmo de o GTM carregar.

No <head>, antes do GTM

gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  wait_for_update: 500
});

// Visitante que já aceitou: libera antes do GTM carregar
if (localStorage.getItem('consent_analytics') === 'granted') {
  gtag('consent', 'update', { analytics_storage: 'granted' });
}

Quem recusa não recebe cookies de análise. O GA4 recebe apenas sinais anônimos, usados para modelagem (modo avançado do Consent Mode). Os consentimentos de anúncio ficam sempre negados, porque o site não faz publicidade.

Print pendente/static/img/tracking/consent-banner.png

Print pendente/static/img/tracking/consent-tag-assistant.png

Print pendente/static/img/tracking/consent-visao-geral.png

Um segundo container, do tipo servidor, roda na Stape em São Paulo. O container web passou a enviar os eventos para sv.portfoliovinicius.com.br (parâmetro server_container_url na tag do Google), e o servidor repassa ao GA4.

• Domínio próprio: registro CNAME na Hostinger apontando para a Stape. A coleta passa a ser primária (first-party), o que é mais resistente a bloqueios.
• Nome neutro de propósito: o subdomínio é sv, e não metrics ou analytics, que costumam estar nas listas de bloqueadores de anúncio.
• No servidor: o cliente GA4 recebe a requisição, e uma tag GA4 com acionador Client Name = GA4 repassa ao Google. A regra de tráfego interno continuou funcionando depois da mudança.

Print pendente/static/img/tracking/server-devtools-collect.png

Print pendente/static/img/tracking/server-preview.png

Print pendente/static/img/tracking/server-stape-dominio.png

O GA4 exporta diariamente os eventos brutos para o BigQuery (região São Paulo). É o que permite cruzar o dado do site com outras fontes e responder perguntas que a interface do GA4 não responde.

Exemplo: cliques por projeto, direto da tabela exportada

SELECT
  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'project_name') AS projeto,
  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'project_type') AS tipo,
  COUNT(*) AS cliques,
  COUNT(DISTINCT user_pseudo_id) AS usuarios
FROM `analytics_556859069.events_*`
WHERE event_name = 'select_project'
GROUP BY projeto, tipo
ORDER BY cliques DESC;

Print pendente/static/img/tracking/bq-vinculo.png

Print pendente/static/img/tracking/bq-tabelas.png