Звернутися до підтримки

Відповідаємо електронною поштою, зазвичай протягом двох днів.

Google reCAPTCHA перевіряє це звернення на зловживання; дані передаються до Google. Скрипт завантажується лише під час відкриття цієї форми.

← Усі записи

Додавання лічильника Stats4U за допомогою Google Tag Manager

· Lukas Wojcik

Про це вже є інструкція в блозі з 2015 року. На її скриншотах Tag Manager виглядає вже не так, а один із семи кроків — позначання document.write — тепер узагалі не потрібен. Цей допис її замінює.

Він також відповідає на питання, яке стара інструкція просто залишила без відповіді. Там було сказано, що з Tag Manager слід використовувати невидимий лічильник, бо місце показу зображення Stats нібито неможливо контролювати. Насправді воно контролюється. Опис — унизу цієї сторінки.

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

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

20157 — кроківсьогодні3 — поля і тригеркрок із document.write відпадає — скрипт ним більше не користується 
<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 зараховується як будь-який інший, тож число повинно змінитися протягом кількох секунд.

Якщо тег спрацював, а нічого не з'явилося, річ або в заповнювачі, або в тригері — саме в такому порядку ймовірності.

Реклама