Google Analytics проследяване, чрез Google Tag Manager

Направихме общ преглед на Google Tag Manager в предна статия. Сега е време да покажем как се настройва Google Analytics проследяване, чрез Google Tag Manager. Имплементирането на подобен тип проследяване няма да подобри веднага скоростта на зареждане на сайта, но е отправна точка към настройката на различни проследяващи маркери на нашата уеб страница. Иначе казано, трябва да започнете от Google Analytics тага и да продължите да надграждате с различни маркери за следене на значими за вас действия, извършени от потребителите.

За да избегнете дублиране на проследяващи кодове, премахнете от вашите страници стандартния Google Analytics фрагмент. Той изглежда по подобен начин:

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

След като сте намерили и премахнали това проследяване от всичките ви страници, отидете  Google Tag Manager и влезте с вашия Google акаунт. Създайте контейнер за Web, където ще можете да добавяте тагове за конкретен сайт. Може да създадете толкова контейнера, колкото уеб страници притежавате.

Когато създадете контейнера, ще ви се покаже нов код, който трябва да поставите веднага след body тага на вашия уеб сайт. Фрагментът на Google Tag Manager можете да намерите в таб Администриране и секция Инсталиране на Мениджър на маркери на Google. Изглежда по аналогичен начин:

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-NXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-NXXXX’);</script>
<!– End Google Tag Manager –>

Отидете в секцията за променливи. Тук се намират всички променливи, които може да използвате, като съществува и възможност да създадете нова. В конкретния случай създаваме константна променлива, която съдържа идентификатора на собтвеност от Google Analytics. Обърнете внимание, че поставяме само идентификатора, а не целия скриптов фрагмент на Google Analytics.

Сега е време да създадем проследяващия таг или маркер. За избор на продукт и тип на маркера избираме, съответно Google Analytics и Universal Analytics. В идентификационен номер за проследяване поставяме нашата променлива. Тук може директно да поставим и идентификатора на собствеността, но е добра практика да изнасяме такива данни в променливи. Ако на по – късен етап ни се наложи смяна на тази собственост – трябва да променим единствено стойността в променливата. За тип на проследяване избираме показване на страница.

Важна част от настройката на таговете са задействанията. В този случай, ще изберем задействане при всяко показване на страница, но в поредица от статии и видеа, ще покажем и конфигурация на по – сложни задействания.

Преглеждаме дали всичко по нашия нов таг е коректно и запазваме.

Още не сме готови с инсталирането на проследяването. Сега ни остава да публикуваме и тестваме нашия нов маркер. В горния десен бутон избираме публикуване, а след това може да изберем визуализация, за да видим дали маркера се задейства в нашия сайт. Ако сме в режим на визуализация и влезем в нашата уеб страница – ще се покаже допълнителна конзола в долната част на Chrome браузера. Това се осъществява посредством cookie, което се поставя в Chrome и се вижда само от нас. По този начин може да тестваме задействанията на тагове, както и много други параметри.

Както се вижда на изображението горе, на тази страница се задейства маркерът, който създадохме по – рано. Ако отидем в Google Analytics, може да се провери със сигурност, че този таг работи коректно и изпраща информация.

Това е само началото на маркирането на нашата страница, след като имаме основата – може да продължим да създаваме тагове, които да отчитат действията в сайта. Хубавото в случая е, че това се постига само с един код на сайта.

Вижте също и това видео, където показваме как се инсталира Google Analytics проследяване, чрез Google Tag Manager на практика.

Вижте още интересни статии, свързани с изграждане, поддръжка и развитие на уеб страници.