Añadir un contador de Stats4U con Google Tag Manager

Hay una guía sobre esto en el blog, de 2015. Sus capturas de pantalla muestran un Tag Manager que ya no tiene ese aspecto, y uno de sus siete pasos — marcar document.write — ya no hace falta en absoluto. Esta entrada la sustituye.

También responde a la pregunta que la guía antigua dejaba sin resolver. Aquella decía que debía usarse el contador invisible con Tag Manager, porque «no se puede controlar dónde se mostrará la imagen de Stats». Sí se puede. Está al final de esta página.

La versión corta

En Tag Manager: Tags → New → Custom HTML, y pegue una línea en el campo HTML:

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

El activador se configura como All Pages, y después se guarda y se publica el contenedor. YOUR-ID se sustituye por el número del contador, que aparece en la página de estadísticas.

Eso es todo el trabajo — tres campos y un activador, donde 2015 necesitaba siete pasos. No hace falta marcar nada sobre document.write, porque el script ya no lo usa.

Qué hace esto en realidad, y por qué puede que no sea lo deseado

El script coloca el contador inmediatamente después de sí mismo en la página. Pegado directamente en el HTML del sitio, eso es exactamente correcto: el contador aparece donde se puso el código.

A través de Tag Manager es distinto, porque la posición del código ya no la decide quien lo pega. La decide el contenedor, y este normalmente se sitúa en el head del documento o donde se haya instalado el fragmento del contenedor. Así que el contador se inserta ahí — no en el pie de página, no en la barra lateral, sino donde sea que Tag Manager haya inyectado la etiqueta.

Para un contador invisible eso no importa en absoluto, y por eso la guía antigua recomendaba uno. El diseño 980 no muestra nada, el diseño 981 muestra solo un pequeño icono que enlaza a la página de estadísticas. Si eso es todo lo que hace falta, la versión corta de más arriba está completa y la lectura puede terminar aquí.

Si quiere un contador visible en un lugar concreto, siga leyendo.

Controlar dónde aparece el contador

El script tiene un segundo modo que la guía antigua nunca mencionó. En lugar del atributo data-id, se le entrega una lista, y busca elementos marcadores de posición por ID.

Paso uno — un marcador de posición en la página, donde corresponda el contador. Esto va en la plantilla propia del sitio, no en Tag Manager, porque Tag Manager es precisamente lo que estamos tratando de mantener fuera de esta decisión:

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

Paso dos — en Tag Manager va esto en su lugar de la línea única. Mismo tipo de etiqueta 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>

Paso tres — cambiar el activador. Esta es la parte donde la gente se equivoca. All Pages se dispara tan pronto como Tag Manager puede hacerlo, lo cual suele ser antes de que el marcador de posición exista en el documento. Sirve en su lugar el activador integrado DOM Ready. El contador tiene que llegar después del div, no antes.

Ahora el contador aparece dentro de ese div, y en ningún otro sitio.

Controlar en qué páginas aparece

Dispone de dos palancas independientes, y merece la pena entenderlas por separado.

El marcador de posición es una de ellas. En la primera línea dentro de la función: si no hay ningún s4u_cp0 en la página, se detiene y el script ni siquiera llega a descargarse. Así que una plantilla que incluye el div obtiene un contador, y una que no lo incluye, no lo obtiene — decidido en las plantillas del propio sitio, sin ningún cambio en Tag Manager y sin ningún paso de publicación.

El activador es la otra. Para decidirlo en Tag Manager basta darle una condición al activador — que se dispare en DOM Ready solo donde Page Path coincida. Esta vía sirve cuando la regla trata sobre URLs, y el marcador de posición cuando trata sobre plantillas.

Más de un contador en una página

La lista admite tantos como quiera. La posición en la lista es el número en el ID del marcador de posición:

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

El primero va a s4u_cp0, el segundo a s4u_cp1. Ambos se comprobaron en un navegador al escribir esto: el primero se renderizó como un icono de 20 por 20, el segundo como una tira de 162 por 25, cada uno dentro de su propio marcador de posición y en ningún otro sitio de la página.

Cuatro cosas que le pueden jugar una mala pasada

• Los dos métodos no se usan a la vez. Si la etiqueta tiene un atributo data-id y además define la lista, se obtienen dos contadores, y los dos hits se cuentan por separado.
• s4ustyleid se define siempre en la lista. El atributo data-style vuelve silenciosamente al diseño 30 cuando se omite. La versión de lista no tiene ese respaldo y pedirá un diseño vacío.
• Un marcador de posición ausente falla en silencio. Sin contador, sin error, nada en la consola. Si no aparece nada, compruebe primero el ID — s4u_cp0, con un cero, no con la letra O.
• El contador invisible no tiene enlace, y es intencionado. El diseño 980 se renderiza sin uno, porque un objetivo de clic transparente de un píxel en la página de otra persona es una trampa y no una funcionalidad. Si quiere el enlace, use el 981, que es el icono pequeño.

Comprobar que funcionó

Con el modo Preview de Tag Manager se carga la página. La etiqueta debería aparecer entre las etiquetas disparadas para el evento DOM Ready. Después, en la página de estadísticas — una visita a través de Preview cuenta como cualquier otra, así que la cifra debería moverse en cuestión de segundos.

Si la etiqueta se dispara pero no aparece nada, es el marcador de posición o el activador, en ese orden de probabilidad.