Перейти до основного вмісту

Покращена атрибуція посилань 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>