Einen Stats4U-Zähler mit Google Tag Manager einbinden

Dazu gibt es eine Anleitung im Blog aus dem Jahr 2015. Ihre Screenshots zeigen einen Tag Manager, der längst nicht mehr so aussieht, und einer der sieben Schritte darin – das Ankreuzen von document.write – wird überhaupt nicht mehr gebraucht. Dieser Beitrag ersetzt sie.

Er beantwortet auch die Frage, bei der die alte Anleitung aufgegeben hat. Dort hieß es, der unsichtbare Zähler sei mit dem Tag Manager die richtige Wahl, weil sich die Position des Stats-Bildes nicht steuern lasse. Sie lässt sich steuern. Der Weg dahin steht weiter unten auf dieser Seite.

Die Kurzfassung

Im Tag Manager: Tags → New → Custom HTML, dann kommt eine Zeile in das HTML-Feld:

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

Der Trigger steht auf All Pages; danach speichern und den Container veröffentlichen. An die Stelle von YOUR-ID kommt die Zählernummer, die auf der Statistikseite steht.

Das ist die ganze Arbeit – drei Felder und ein Trigger, wo es 2015 noch sieben Schritte brauchte. Bei document.write muss nichts angekreuzt werden, weil das Skript es nicht mehr verwendet.

Was das tatsächlich bewirkt, und warum es nicht immer die richtige Wahl ist

Das Skript setzt den Zähler unmittelbar nach sich selbst in die Seite. Direkt in handgeschriebenes HTML eingefügt, ist das genau richtig: Der Zähler erscheint dort, wo der Code steht.

Über den Tag Manager ist das anders, denn die Position ist dort keine freie Entscheidung mehr. Das entscheidet der Container, und der sitzt meist im Kopfbereich des Dokuments oder dort, wo das Container-Snippet eingebaut wurde. Der Zähler wird also dort eingefügt – nicht in der Fußzeile, nicht in der Seitenleiste, sondern genau dort, wo der Tag Manager das Tag zufällig eingeschleust hat.

Für einen unsichtbaren Zähler spielt das nicht die geringste Rolle, weshalb die alte Anleitung auch einen solchen empfahl. Design 980 zeigt nichts, Design 981 zeigt nur ein kleines Symbol, das zur Statistikseite verlinkt. Reicht das, ist die Kurzfassung oben vollständig, und der Rest dieses Beitrags ist entbehrlich.

Ein sichtbarer Zähler an einer bestimmten Stelle braucht etwas mehr.

Steuern, wo der Zähler erscheint

Das Skript hat einen zweiten Modus, den die alte Anleitung nie erwähnt hat. Statt des Attributs data-id nimmt es eine Liste entgegen und sucht dann per ID nach Platzhalter-Elementen.

Schritt eins – ein Platzhalter in der Seite, und zwar dort, wo der Zähler hingehört. Er gehört in die eigene Vorlage, nicht in den Tag Manager, denn der Tag Manager ist genau das, was wir aus dieser Entscheidung heraushalten wollen:

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

Schritt zwei – im Tag Manager tritt dies an die Stelle des Einzeilers. Derselbe Tag-Typ, 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>

Schritt drei – den Trigger ändern. Das ist der Teil, an dem die Leute meistens scheitern. All Pages feuert so früh, wie der Tag Manager es nur schafft, und das ist oft, bevor der Platzhalter im Dokument existiert. Der eingebaute Trigger DOM Ready ist hier der richtige. Der Zähler muss nach dem div ankommen, nicht davor.

Der Zähler erscheint jetzt innerhalb dieses div und sonst nirgends.

Steuern, auf welchen Seiten er erscheint

Es gibt hier zwei unabhängige Hebel, und es lohnt sich, sie getrennt zu verstehen.

Der Platzhalter ist der eine davon. Die erste Zeile innerhalb der Funktion erledigt das: Gibt es kein s4u_cp0 auf der Seite, bricht sie ab, und das Skript wird nicht einmal heruntergeladen. Eine Vorlage, die das div enthält, bekommt also einen Zähler, eine, die es nicht enthält, nicht – entschieden in den eigenen Vorlagen, ohne Änderung im Tag Manager und ohne Veröffentlichungsschritt.

Der Trigger ist der andere. Dieselbe Entscheidung lässt sich auch im Tag Manager treffen: eine Bedingung am Trigger, sodass er bei DOM Ready nur dort feuert, wo Page Path der Vorgabe entspricht. Der Trigger passt zu Regeln nach URLs, der Platzhalter zu Regeln nach Vorlagen.

Mehr als ein Zähler auf einer Seite

Die Liste nimmt beliebig viele auf. Die Position in der Liste entspricht der Zahl in der Platzhalter-ID:

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

Der erste landet in s4u_cp0, der zweite in s4u_cp1. Beide wurden beim Schreiben dieses Beitrags im Browser überprüft: Der erste erschien als 20×20-Symbol, der zweite als 162×25-Streifen, jeweils in seinem eigenen Platzhalter und sonst nirgends auf der Seite.

Vier Stolperfallen

• Die beiden Methoden vertragen sich nicht. Hat ein Tag ein data-id-Attribut und setzt zugleich die Liste, entstehen zwei Zähler, und die beiden Aufrufe werden getrennt gezählt.
• Die Liste braucht immer s4ustyleid. Das Attribut data-style fällt still und leise auf Design 30 zurück, wenn es fehlt. Die Listen-Variante kennt diesen Rückfall nicht und fragt dann ein leeres Design ab.
• Ein fehlender Platzhalter scheitert lautlos. Kein Zähler, kein Fehler, nichts in der Konsole. Erscheint nichts, ist zuerst die ID verdächtig – s4u_cp0, mit einer Null, nicht dem Buchstaben O.
• Der unsichtbare Zähler hat absichtlich keinen Link. Design 980 wird ohne einen solchen dargestellt, denn ein transparentes Ein-Pixel-Klickziel auf der Seite eines anderen ist eher eine Falle als ein Feature. Für einen Link gibt es 981, das kleine Symbol.

Überprüfen, ob es funktioniert hat

Der Preview-Modus des Tag Managers lädt die Seite mit aktivem Container. Das Tag sollte bei den ausgelösten Tags für das DOM-Ready-Ereignis erscheinen. Die Statistikseite bestätigt es dann – ein Aufruf über Preview zählt wie jeder andere, die Zahl sollte sich also innerhalb weniger Sekunden bewegen.

Feuert das Tag, erscheint aber nichts, liegt es am Platzhalter oder am Trigger – in dieser Reihenfolge der Wahrscheinlichkeit.