Улучшенная атрибуция ссылок Google Analytics — что это, зачем нужна и как настроить

Улучшенная атрибуция ссылок — это дополнительная (отключенная по умолчанию) возможность статистики сайтов Google Analytics.

Она нужна для того, чтобы понимать, какие ссылки на вашем сайте работают хорошо, а по каким люди почти не кликают.

Исходя из этих сведений, можно улучшить навигацию и юзабилити вашего сайта. Что, в свою очередь, положительно повлияет на его позиции в Google.

Настройка улучшенной атрибуции ссылок делается в три шага:

  1. Включите ее в аккаунте Google Analytics, как описано в официальной документации.
  2. На своем сайте внесите изменения в код счетчика Google Analytics — по-минимуму просто добавьте строку ga(‘require’, ‘linkid’);, как описано в той же документации.
  3. Добавьте к каждой ссылке на вашем сайте, которую вы хотите отслеживать, параметр id с уникальным именем. Это нужно, чтобы счетчик Google Analytics мог точно фиксировать, какая именно ссылка была кликнута.

Настройка улучшенной атрибуции ссылок Google Analytics в статичных сайтах Hugo

Для генератора статичных сайтов Hugo мы подготовили готовое решение.

В config.yaml добавьте строку с номером вашего счетчика Google Analytics:

googleAnalytics: "UA-123-45"

Создайте файл шаблона layouts/partials/ga.html со стандартным кодом счетчика 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', '{{ .Site.GoogleAnalytics }}', 'auto');
ga('require', 'linkid');
ga('send', 'pageview');
</script>

Подключите его в шаблон вашего сайта сразу после тэга <body>:

{{ partial "ga" }}

Добавьте к ссылкам код, который будет формировать уникальный id (в этом примере top-menu — это понятное вам имя блока, в котором находятся ссылки):

id="top-menu_{{ replace .URL "/" "_" }}"

В результате ссылки будут выглядеть примерно так:

<a href="/contacts/" id="top-menu__contacts_">Контакты</a>