Яндекс Метрика и GA4: счётчик, события, цели

Счётчик (Яндекс Метрика, GA4) — код JavaScript на страницах, который сообщает сервису о визитах, просмотрах и событиях. Цель — важное событие, например заявка.

Как узнать, что происходит на сайте

В прошлом уроке вы записали гипотезы. Чтобы их проверить, нужен инструмент, который считает, что делают люди на вашем сайте. Такой инструмент называется счётчиком (или системой веб-аналитики). Это маленький фрагмент кода на JavaScript, который вы вставляете на страницы. Когда человек открывает страницу, код отправляет на сервер сервиса краткое сообщение: «открыта такая-то страница, с такого-то устройства, пришли оттуда». Сервис складывает такие сообщения и показывает отчёты.

Два счётчика, которые вы будете встречать чаще всего:

• Яндекс Метрика. Бесплатный сервис Яндекса. Широко используется в российских проектах, понимает метки UTM из урока про соцсети, дружит с Яндекс Директом и Вебмастером. Для сайта, которому нужны люди из России, это обычный выбор.
• Google Analytics 4 (GA4). Бесплатный сервис Google. Распространён во всём мире. Условия использования и доступность из России меняются, поэтому для проекта в России его чаще ставят рядом, а не вместо.

Принцип у них одинаковый, а различия в словах и в том, как считаются некоторые числа (о них следующий урок). Ставить два счётчика не обязательно: для небольшого сайта хватит одного, и он должен считать честно.

Откуда это. Первые счётчики посещений 1990-х были просто числом внизу страницы, о которых вы читали в уроке про 1996 год. Настоящая веб-аналитика появилась, когда компании стали анализировать журналы запросов серверов и потом добавили JavaScript-метки. Google выпустил Analytics в 2005 году после покупки компании Urchin (вы слышали это имя в уроке про UTM), Яндекс Метрика появилась позже, в конце 2000-х, а GA4 в 2020 году заменил прежнюю версию, в которой центральным была «сессия», на модель «всё событие».

Установка: один раз и в одном месте

Код выдаёт сам сервис, когда вы создаёте счётчик. В Метрике он выглядит так (номер счётчика условный):

<script>
  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
  m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

  ym(12345678, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true });
</script>

Первая часть (длинная функция) загружает сам счётчик с сервера Метрики и создаёт функцию ym. Вторая, ym(12345678, "init", {...}), включает счётчик с вашим номером и параметрами: карта кликов, учёт переходов по внешним ссылкам, «точный отказ» (о нём следующий урок). Вебвизор вы можете включить там же (параметр webvisor), но делать это нужно осознанно, и об этом есть отдельный урок.

В GA4 код короче и содержит свой идентификатор:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Правила установки одинаковы для обоих:

1. В head каждой страницы, чтобы счётчик начал работать, как только страница открылась, и не потерял быстрых уходов.
2. Ровно один раз. Дубль удваивает просмотры. Откройте исходный код страницы и найдите слово init или config: оно должно встретиться один раз.
3. На всех страницах, включая «Спасибо» (там вы будете считать цель).
4. Не на локальной копии для тестов, иначе в статистику попадут ваши собственные клики. Лучше создать отдельный счётчик для проверки.

Если сайт сделан в конструкторе или CMS, код вставляют не в файл, а в настройки: в Tilda это «Настройки сайта», раздел аналитики, куда вносится только номер счётчика; в WordPress код вставляют в шапку темы (в идеале дочерней темы) или плагином для вставки кода; в 1С-Битрикс в шаблон сайта, в шапку. Названия разделов в системах меняются, поэтому сверяйтесь со справкой вашей версии.

Что считает счётчик

Четыре слова, которые нужно различать, потому что в отчётах каждое значит своё.

• Визит (в GA4 «сеанс»): один приход человека. Серия его действий считается одним визитом, пока человек не замолчит; после паузы (как правило, тридцать минут; сверяйте со справкой) следующий приход считается новым визитом.
• Просмотр: одна загруженная страница. За визит их может быть несколько.
• Событие: любое действие, о котором страница сообщила счётчику. Прокрутка, нажатие, воспроизведение видео. В GA4 событием является и просмотр страницы (page_view).
• Цель (в GA4 «ключевое событие»): событие, которое вы назвали важным для проекта. Заявка, звонок, скачивание.

Откройте схему и попробуйте. Нажимайте на то, что может сделать посетитель, и смотрите, как счётчик превращает это в записи. Затем включите дубль кода и отключите защиту от повторов, и вы увидите две самые частые ошибки.

код счётчика на странице код вставлен дважды защита от повторной отправки цели Вебвизор

Открыть страницу Прокрутить до 50% Нажать на телефон Отправить форму Сбросить

Визитов 0 Просмотров 0 Событий 0 Целей 0

Всё сходится: одно действие одна запись.

Счётчик выдуманный и никуда ничего не отправляет: журнал только в этой схеме.

Цель через JavaScript

Цели бывают разные: открытие страницы (например «Спасибо»), число просмотров за визит, время на сайте, составная цель по шагам. Самая гибкая и самая частая цель JavaScript-событие: страница сама сообщает счётчику, что человек сделал важное. В Метрике:

ym(12345678, 'reachGoal', 'lead_submit');

Первое число номер вашего счётчика, второе слово фиксировано, третье название цели: вы его придумываете и затем указываете в Метрике, когда создаёте цель типа «JavaScript-событие» (идентификатор должен совпасть до буквы). В GA4 то же самое пишется gtag('event', 'generate_lead'), а затем событие отмечается ключевым.

Когда вызывать. При действии человека, а не при открытии страницы: при отправке формы (событие submit у формы, о событиях вы читали в части про JavaScript), при нажатии на номер телефона, при записи. Если форма уходит без перезагрузки страницы, цель отправляют, когда сервер ответил «успешно», а не при нажатии на кнопку: иначе в цель попадут и ошибочные отправки (об ответе сервера вы знаете из части про HTTP: код 200 или ошибка).

Один раз за действие. Человек может нажать кнопку дважды, страница может перерисоваться, обработчик может подвеситься дважды. Поэтому цель защищают: переменная-флаг («уже отправляли») или обработчик, который срабатывает один раз ({ once: true }). Без этого конверсия растёт сама собой, и вы принимаете решения по ложным числам.

Не отправляйте в цель персональные данные. Название цели и параметры должны быть техническими: lead_submit, а не имя человека или его телефон. Счётчик не место для хранения контактов (для этого есть форма и ваша почта).

Как назвать. Вы уже договорились о схеме в уроке про лестницу ценности: объект_действие, латиницей, строчными, навсегда одно имя.

Проверка: правда ли срабатывает

После настройки обязательно проверьте.

1. Откройте страницу с параметром ?_ym_debug=2 в адресе и консоль браузера (вы знакомились с инструментами разработчика в начале курса): Метрика будет писать, что она отправляет.
2. Сделайте действие сами. В консоли должна появиться одна запись о цели.
3. Повторите действие. Вторая запись не должна появиться.
4. Через несколько минут цель появится в отчётах сервиса (отчёты чуть запаздывают).
5. Не забудьте убрать тестовые визиты из статистики, например фильтром по своему адресу.

План событий

Прежде чем ставить цели, составьте план событий: короткую таблицу, где для каждого события записано, как оно называется, когда срабатывает, как защищено от повторов и как называется в другом счётчике. Это дешёвый способ не запутаться через полгода. Начните с главного действия из брифа и одного-двух шагов к нему (нажатие на телефон, прокрутка до подтверждений).

Данные, закон и честность

Счётчик получает данные о людях: адрес страницы, время, устройство, источник перехода, файлы cookie и IP-адрес. В сочетании с другими сведениями такие данные могут считаться персональными, и закон о персональных данных (152-ФЗ) требует, чтобы вы об этом сказали человеку и объяснили цель. Вот ориентир на сегодня (а не юридическая консультация, ваш юрист должен проверить):

• В политике обработки данных должно быть сказано, какие сервисы вы используете, какие данные они собирают и зачем (вы напишете такой абзац в практике).
• Не собирайте лишнего. Не включайте Вебвизор там, где он не нужен, не передавайте в цели имена и телефоны. Об этом следующие уроки части.
• Согласие и уведомление о cookie. В России нет отдельного закона о cookie, как в Европе, но принято сообщать об их использовании. Как сделать баннер, который не обманывает, вы научитесь в уроке про этику аналитики.
• Если на сайт заходят люди из других стран, там действуют свои правила (например европейский GDPR).

Проверьте себя: почему цель «заявка» нужно защищать от повторной отправки?

Человек может нажать кнопку несколько раз, и одно действие превратится в несколько записей. Конверсия вырастет без всякой пользы, и решения будут приниматься по ложным числам.

Практика

Доработайте страницу и план.

1. Код счётчика в head: загрузчик Метрики и вызов ym(номер, "init", …), один раз.
2. Цель в конце body: при отправке формы вызывается ym(…, "reachGoal", "lead_submit"), но не больше одного раза за действие.
3. План событий из двух строк: имя, когда срабатывает, защита, имя в GA4. Главное действие из брифа названо теми же словами.
4. Где вставлять код в Tilda, WordPress и Битрикс.
5. Абзац для политики с Метрикой, cookie и IP-адресом.

Проверка смотрит на то, что код есть и один, что цель отправляется с защитой, что в плане корректные имена и что политика полная. Работает ли это на живом сайте, покажет режим отладки: проверьте его сами, как описано выше.