Добавление счётчика Stats4U через Google Tag Manager

Об этом есть руководство в блоге от 2015 года. На его скриншотах Tag Manager выглядит уже не так, а один из семи шагов — отметка галочкой document.write — больше вообще не нужен. Это руководство приходит ему на смену.

Оно также отвечает на вопрос, перед которым старое руководство просто спасовало. В нём говорилось, что с Tag Manager следует использовать невидимый счётчик, потому что место показа изображения статистики якобы невозможно контролировать. На самом деле оно контролируется. Это описано в конце этой страницы.

Короткая версия

В Tag Manager: Tags → New → Custom HTML, и в поле HTML вставляется одна строка:

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

Триггер — All Pages, затем контейнер сохраняется и публикуется. Вместо YOUR-ID подставляется номер счётчика, который указан на странице статистики.

Это вся работа целиком — три поля и триггер, там, где в 2015 году требовалось семь шагов. Ничего не нужно отмечать насчёт document.write, потому что скрипт больше его не использует.

Что это на самом деле делает и почему подходит это не всегда

Скрипт размещает счётчик сразу после самого себя на странице. При вставке прямо в HTML страницы это именно то, что нужно: счётчик появляется там, куда помещён код.

Через Tag Manager всё иначе, потому что место кода на странице задаётся уже не вручную. Это решает контейнер, а он обычно находится в head документа или там, куда был установлен сниппет контейнера. Поэтому счётчик вставляется именно туда — не в подвал, не в боковую панель, а туда, куда Tag Manager вставил тег.

Для невидимого счётчика это не имеет ни малейшего значения, поэтому старое руководство его и рекомендовало. Дизайн 980 не показывает ничего, дизайн 981 показывает только маленькую иконку со ссылкой на страницу статистики. Если этого достаточно, короткой версии выше хватает, и можно не читать дальше.

Если видимый счётчик нужен в конкретном месте, подробности ниже.

Управление тем, где появляется счётчик

У скрипта есть второй режим, о котором старое руководство вообще не упоминало. Вместо атрибута data-id ему передают список, и он ищет элементы-заполнители по ID.

Шаг первый — на странице размещается элемент-заполнитель там, где должен быть счётчик. Это делается в самом шаблоне сайта, а не в Tag Manager, потому что как раз Tag Manager мы и пытаемся исключить из этого решения:

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

Шаг второй — в Tag Manager идёт вот это вместо однострочного варианта. Тот же тип тега 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>

Шаг третий — смена триггера. Именно на этом месте чаще всего ошибаются. All Pages срабатывает настолько рано, насколько это вообще может Tag Manager, — часто ещё до того, как элемент-заполнитель появится в документе. Вместо этого нужен встроенный триггер DOM Ready. Счётчик должен появляться после div, а не до него.

Теперь счётчик появляется внутри этого div и больше нигде.

Управление тем, на каких страницах он появляется

Здесь есть два независимых рычага, и их стоит понимать по отдельности.

Первый — это элемент-заполнитель. Всё дело в первой строке внутри функции: если на странице нет s4u_cp0, выполнение останавливается, и скрипт даже не загружается. Поэтому шаблон, который включает div, получает счётчик, а тот, что не включает, — не получает: это решается прямо в шаблонах сайта, без изменений в Tag Manager и без публикации.

Второй — это триггер. Другой путь — решить это в самом Tag Manager: триггеру задаётся условие срабатывать на DOM Ready только там, где Page Path соответствует нужному значению. Этот способ уместен, когда правило касается URL, а элемент-заполнитель — когда правило касается шаблонов.

Больше одного счётчика на странице

Список принимает сколько угодно значений. Позиция в списке — это число в ID элемента-заполнителя:

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

Первый идёт в s4u_cp0, второй — в s4u_cp1. Оба были проверены в браузере при написании этой статьи: первый отрисовался как иконка 20 на 20, второй — как полоса 162 на 25, каждый внутри своего элемента-заполнителя и больше нигде на странице.

Четыре вещи, на которых легко споткнуться

Оба способа одновременно не сочетаются. Если у самого тега есть атрибут data-id и при этом задан список, счётчиков окажется два, и оба обращения будут засчитаны отдельно.
s4ustyleid всегда должен стоять в списке. Атрибут data-style, если его не указать, незаметно откатывается к дизайну 30. У версии со списком такого запасного варианта нет, и она запросит пустой дизайн.
Отсутствующий элемент-заполнитель отказывает молча. Ни счётчика, ни ошибки, ничего в консоли. Если ничего не появляется, первым делом стоит проверить ID — s4u_cp0, с нулём, а не с буквой O.
У невидимого счётчика намеренно нет ссылки. Дизайн 980 отрисовывается без неё, потому что прозрачная кликабельная область в один пиксель на чужой странице — это ловушка, а не полезная функция. Если ссылка нужна, подойдёт 981 — это маленькая иконка.

Проверка, что всё сработало

Достаточно включить режим Preview в Tag Manager и загрузить свою страницу. Тег должен появиться среди сработавших тегов для события DOM Ready. Затем — страница статистики: визит через Preview засчитывается как любой другой, так что число должно измениться в течение нескольких секунд.

Если тег срабатывает, но ничего не появляется, дело в элементе-заполнителе или в триггере — именно в таком порядке вероятности.