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 said you should use the invisible counter with Tag Manager, because "you can't control where your Stats image will be shown". You can. 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>

Set the trigger to All Pages, save, and publish the container. Replace YOUR-ID with your counter number, which you will find on your 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 what you want

The script places the counter immediately after itself in the page. When you paste it directly into your own HTML that is exactly right: the counter appears where you put the code.

Through Tag Manager it is different, because you no longer decide where the code sits. The container does, 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 your footer, not in your 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 your statistics. If that is all you need, the short version above is complete and you can stop reading.

If you want a visible counter in a specific place, read on.

Controlling where the counter appears

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

Step one — put a placeholder in your page, wherever the counter belongs. This goes in your own template, not in 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, use this instead of 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 your placeholder exists in the document. Use the built-in DOM Ready trigger instead. The counter has to arrive after the div, not before it.

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

Controlling which pages it appears on

You get two independent levers, and they are worth understanding separately.

The placeholder is one of them. Look at the first line inside the function: 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 your own templates, with no Tag Manager change and no publish step.

The trigger is the other. If you would rather decide it in Tag Manager, give the trigger a condition — fire on DOM Ready only where Page Path matches what you want. Use this when the rule is about URLs, and the placeholder when the rule is about templates.

More than one counter on a page

The list takes as many as you like. 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 will bite you

• Do not use both methods at once. If your tag has a data-id attribute and sets the list, you get two counters, and the two hits get counted separately.
• Always set s4ustyleid in the list. The data-style attribute quietly falls back to design 30 when you leave it out. 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. If nothing appears, check the ID first — 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. If you want the link, use 981, which is the small icon.

Checking it worked

Use Tag Manager's Preview mode and load your page. The tag should appear under the fired tags for the DOM Ready event. Then look at your statistics page — 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.