Adding a Stats4U counter with Google Tag Manager

There is a guide to this on the blog from 2015. Its screenshots show a Tag Manager that no longer looks like that, and one of its seven steps — ticking document.write — is no longer needed at all. This replaces it.

It also answers the question the old guide gave up on. That one recommended the invisible counter with Tag Manager, on the grounds that the position of the Stats image could not be controlled. It can be. It is at the bottom of this page.

The short version

In Tag Manager: Tags → New → Custom HTML, and paste one line into the HTML field:

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

The trigger goes on All Pages; then save and publish the container. The data-id attribute takes the counter number, which is listed on the statistics page.

That is the whole job — three fields and a trigger, where 2015 needed seven steps. Nothing needs to be ticked about document.write, because the script no longer uses it.

What that actually does, and why it may not be the right choice

The script places the counter immediately after itself in the page. Pasted directly into hand-written HTML, that is exactly right: the counter appears where the code sits.

Through Tag Manager it is different, because the placement is no longer a free choice. The container decides, and it usually sits in the head of the document or wherever the container snippet was installed. So the counter is inserted there — not in the footer, not in the sidebar, but wherever Tag Manager happened to inject the tag.

For an invisible counter that does not matter in the slightest, which is why the old guide recommended one. Design 980 shows nothing, design 981 shows only a small icon linking to the statistics page. In that case the short version above is complete and the rest of this article is optional.

Placing a visible counter somewhere specific takes a little more.

Controlling where the counter appears

The script has a second mode that the old guide never mentioned. Instead of the data-id attribute it takes a list, and looks for placeholder elements by ID.

Step one — a placeholder in the page, wherever the counter belongs. It goes into the site template itself, not into Tag Manager, because Tag Manager is what we are trying to keep out of this decision:

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

Step two — in Tag Manager, this replaces the one-liner. Same Custom HTML tag type:

<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>

Step three — change the trigger. This is the part that catches people out. All Pages fires as early as Tag Manager can manage, which is often before the placeholder exists in the document. The built-in DOM Ready trigger is the right one here. The counter has to arrive after the div, not before it.

The counter now appears inside that div, and nowhere else.

Controlling which pages it appears on

There are two independent levers here, and they are worth understanding separately.

The placeholder is one of them. The first line inside the function does the work: if there is no s4u_cp0 on the page, it stops and the script is never even downloaded. So a template that includes the div gets a counter and one that does not, does not — decided in the site templates themselves, with no Tag Manager change and no publish step.

The trigger is the other. The same decision can be made in Tag Manager instead: a condition on the trigger, so that it fires on DOM Ready only where Page Path matches. The trigger suits rules about URLs, the placeholder suits rules about templates.

More than one counter on a page

The list takes as many as needed. The position in the list is the number in the placeholder ID:

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

The first goes into s4u_cp0, the second into s4u_cp1. Both were checked in a browser while writing this: the first rendered as a 20 by 20 icon, the second as a 162 by 25 strip, each inside its own placeholder and nowhere else on the page.

Four things that bite

The two methods do not mix. A tag that has a data-id attribute and sets the list produces two counters, and the two hits get counted separately.
The list always needs s4ustyleid. The data-style attribute quietly falls back to design 30 when it is missing. The list version has no such fallback and will ask for an empty design.
A missing placeholder fails silently. No counter, no error, nothing in the console. When nothing appears, the ID is the first suspect — s4u_cp0, with a zero, not the letter O.
The invisible counter has no link on purpose. Design 980 renders without one, because a transparent one-pixel click target on somebody else's page is a trap rather than a feature. For a link, design 981 does it, with its small icon.

Checking it worked

Tag Manager's Preview mode loads the page with the container active. The tag should appear under the fired tags for the DOM Ready event. The statistics page then confirms it — a visit through Preview counts like any other, so the number should move within a few seconds.

If the tag fires but nothing appears, it is the placeholder or the trigger, in that order of likelihood.