Настройка веб-аналитики, используя код отслеживания Global Site Tag
В августе компания Google анонсировала новый код отслеживания веб-страниц, основанный на библиотеке gtag.js. Глобальный тег сайта (Global Site Tag) использует новый механизм для управления и работы с тегами. В Google Analytics в настройках кода отслеживания как нового, так и уже существующего ресурса предлагается использовать код отслеживания Global Site Tag (gtag.js). При этом для новых ресурсов однозначно рекомендуется использовать библиотеку gtag.js, а для сайтов на которых уже установлен какой-либо код Google Analytics - в зависимости от ситуации. То есть, если на сайте используется стандартный не модифицированный код аналитики, не используется отправка событий, отслеживание электронной торговли и др., то можно сделать замену старого кода на Global Site Tag (GST). В случае дополнительных настроек (события, электронная торговля и др.), то для перехода на Global Site Tag потребуется аналогичная настройка, с учётом особенностей библиотеки gtag.js.
Примеры кодов Гугл Аналитикс
Так выглядит код Global Site Tag, где UA-xxxxxxxx-x - это номер идентификатора ресурса в системе Google Analytics
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-x');
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-x');
</script>
Стандартный не модифицированный код Universal 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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');
</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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>
Как было сказано выше, если нет других расширений (события, электронная торговля), то достаточно удалить старый код и вместо него поставить GST.
Некоторые примеры модификаторов
Некоторые примеры модификаторов
ga('require', 'ec');
ga('require', 'linkid');
if (!document.referrer || document.referrer.split('/')[2].indexOf(location.hostname) != 0)
setTimeout(function(){ ga('send', 'event', 'Новый посетитель', location.pathname); }, 15000);
ga('send', 'event', ...
ga('require', 'linkid');
if (!document.referrer || document.referrer.split('/')[2].indexOf(location.hostname) != 0)
setTimeout(function(){ ga('send', 'event', 'Новый посетитель', location.pathname); }, 15000);
ga('send', 'event', ...
Другой стандартный не модифицированный код Universal Analytics.
<script data-skip-moving="true">
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js' data-skip-moving="true"></script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js' data-skip-moving="true"></script>
Но в таком виде практически не встречается, т.к. его обычно устанавливают опытные сеошники и, конечно же, добавляют различные модификаторы как указано выше или другие, например,
ga('require', 'displayfeatures');
Иногда, несмотря на то что он уже устарел, на сайтах используется асинхронный код Google Analytics. Ниже приведён стандартный не модифицированный код.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Некоторые примеры модификации такого кода
_gaq.push(['_addOrganic', 'rambler.ru', 'words']);
_gaq.push(['_addOrganic', 'nigma.ru', 's']);
_gaq.push(['_trackEvent', ...
_gaq.push(['_addOrganic', 'nigma.ru', 's']);
_gaq.push(['_trackEvent', ...
В настоящее время, хотя и крайне редко, встречается ещё один древний код - синхронный код Google Analytics.
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-xxxxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-xxxxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>
Для него также использовались модификаторы, например,
pageTracker._addOrganic("rambler.ru","words");
pageTracker._addOrganic("aport.ru","r");
pageTracker._trackEvent( ...
pageTracker._addOrganic("aport.ru","r");
pageTracker._trackEvent( ...
Ну, и наконец, Urchin WebAnalytics - это уже история, но возможно на каких-то сайтах ещё используется.
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-xxxxxx-x";
urchinTracker();
</script>
</script>
<script type="text/javascript">
_uacct = "UA-xxxxxx-x";
urchinTracker();
</script>
Важное замечание. Приведённые примеры кодов веб-аналитики, на сайте (в html-коде) часто бывают размещены в разделе <body>, несмотря на то, что асинхронный код Google Analytics и тем более Universal Analytics рекомендовали устанавливать в разделе <head>. Новый код Global Site Tag необходимо устанавливать в разделе <head>.
Пример кодов Диспетчера тегов Google
Также установка любого варианта кода может осуществляться с помощью Диспетчера тегов Google (Google Tag Manager). Его не нужно удалять! Один из вариантов кода приведён ниже
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxx');</script>
<!-- End Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxx');</script>
<!-- End Google Tag Manager -->
Где GTM-xxxxxx - это номер идентификатора в Google Tag Manager
Подведём итог
- Если Вы ещё не использовали гугловскую аналитику, то рекомендуем поставить новый код.
- Если использовали любой из вариантов, то сохраните свой образец кода.
- Если использовался стандартный не модифицированный код, то замените на новый.
- В случае использования модификаторов - внимательно изучите руководства, предоставляемые компанией Google. В зависимости от сложности ситуации, выполните миграцию сразу или начните подготовку к ней.
Вопросы и предложения пишите в форме обратной связи