Връзка с поддръжката

Отговаряме по имейл, обикновено до два дни.

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; след това запазете и публикувайте контейнера. Атрибутът data-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 съвпада. Тригерът е подходящ за правила по адреси, заместителят — за правила по шаблони.

Повече от един брояч на страница

Списъкът приема колкото са нужни. Позицията в списъка е числото в 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 се брои като всяко друго, така че числото трябва да се промени до няколко секунди.

Ако маркерът се задейства, но нищо не се появява, причината е заместителят или тригерът — в този ред по вероятност.

Реклама