Adicionar um contador Stats4U com o Google Tag Manager

Há um guia sobre isto no blog, de 2015. As suas capturas de ecrã mostram um Tag Manager que já não tem esse aspeto, e um dos seus sete passos — marcar document.write — já não é sequer necessário. Este artigo substitui-o.

Também responde à pergunta que o guia antigo tinha desistido de responder. Esse dizia que se devia usar o contador invisível com o Tag Manager, porque «não é possível controlar onde a imagem de Stats vai ser mostrada». É possível. Está no fundo desta página.

A versão curta

No Tag Manager: Tags → New → Custom HTML, e cole uma linha no campo HTML:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

O acionador define-se para All Pages, e depois guarda-se e publica-se o contentor. YOUR-ID é substituído pelo número do contador, que aparece na página de estatísticas.

Esse é todo o trabalho — três campos e um acionador, onde 2015 precisava de sete passos. Não é preciso marcar nada sobre document.write, porque o script já não o usa.

O que isso faz realmente, e porque pode não ser o que se pretende

O script coloca o contador imediatamente a seguir a si próprio na página. Colado diretamente no HTML do próprio site, isso está exatamente certo: o contador aparece onde o código foi colocado.

Através do Tag Manager é diferente, porque a posição do código deixa de ser decidida por quem o cola. Quem decide é o contentor, e este normalmente fica no head do documento, ou onde quer que o excerto do contentor tenha sido instalado. Por isso o contador é inserido ali — não no rodapé, não na barra lateral, mas onde quer que o Tag Manager tenha injetado a tag.

Para um contador invisível isso não importa rigorosamente nada, e é por isso que o guia antigo recomendava um. O design 980 não mostra nada, o design 981 mostra apenas um pequeno ícone que liga à página de estatísticas. Se é tudo o que faz falta, a versão curta acima está completa e a leitura pode ficar por aqui.

Se quiser um contador visível num local específico, continue a ler.

Controlar onde o contador aparece

O script tem um segundo modo que o guia antigo nunca mencionou. Em vez do atributo data-id, recebe uma lista, e procura elementos de marcador de posição pelo ID.

Passo um — um marcador de posição na página, onde quer que o contador deva ficar. Isto vai no template do próprio site, não no Tag Manager, porque o Tag Manager é precisamente o que estamos a tentar manter fora desta decisão:

<div id="s4u_cp0"></div>

Passo dois — no Tag Manager, use isto em vez da linha única. O mesmo tipo de tag Custom HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Passo três — mudar o acionador. Esta é a parte que apanha as pessoas desprevenidas. All Pages dispara o mais cedo que o Tag Manager conseguir, o que muitas vezes é antes de o marcador de posição existir no documento. Serve antes o acionador incorporado DOM Ready. O contador tem de chegar depois da div, não antes dela.

O contador aparece agora dentro dessa div, e em mais lado nenhum.

Controlar em que páginas aparece

Tem dois controlos independentes, e vale a pena perceber cada um separadamente.

O marcador de posição é um deles. Na primeira linha dentro da função: se não houver nenhum s4u_cp0 na página, ela para e o script nem sequer chega a ser transferido. Por isso, um template que inclua a div recebe um contador, e um que não inclua, não recebe — decidido nos templates do próprio site, sem nenhuma alteração no Tag Manager e sem nenhum passo de publicação.

O acionador é o outro. Para decidir isso no Tag Manager basta dar ao acionador uma condição — disparar em DOM Ready apenas quando Page Path corresponder. Esta via serve quando a regra for sobre URLs, e o marcador de posição quando for sobre templates.

Mais do que um contador numa página

A lista aceita quantos quiser. A posição na lista é o número no ID do marcador de posição:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

O primeiro vai para s4u_cp0, o segundo para s4u_cp1. Ambos foram verificados num navegador enquanto este artigo era escrito: o primeiro foi apresentado como um ícone de 20 por 20, o segundo como uma tira de 162 por 25, cada um dentro do seu próprio marcador de posição e em mais lado nenhum na página.

Quatro coisas que o vão morder

• Os dois métodos não se usam ao mesmo tempo. Se a tag tiver um atributo data-id e definir a lista, obtêm-se dois contadores, e os dois acessos são contados em separado.
• s4ustyleid define-se sempre na lista. O atributo data-style volta silenciosamente ao design 30 quando é omitido. A versão em lista não tem essa alternativa e vai pedir um design vazio.
• Um marcador de posição em falta falha silenciosamente. Sem contador, sem erro, nada na consola. Se nada aparecer, verifique primeiro o ID — s4u_cp0, com um zero, não a letra O.
• O contador invisível não tem ligação de propósito. O design 980 é apresentado sem uma, porque um alvo de clique transparente de um pixel na página de outra pessoa é uma armadilha, não uma funcionalidade. Se quiser a ligação, use o 981, que é o pequeno ícone.

Verificar se funcionou

Com o modo Preview do Tag Manager carrega-se a página. A tag deve aparecer sob as tags disparadas para o evento DOM Ready. Depois, na página de estatísticas — uma visita através do Preview conta como qualquer outra, por isso o número deve mexer-se em poucos segundos.

Se a tag disparar mas nada aparecer, é o marcador de posição ou o acionador, por essa ordem de probabilidade.