Настройка целей (конверсий) в Google Analytics 4

В этом материале разберем настройку самых распространенных целей для веб-сайтов в Google Analytics 4.

Обновление (февраль 2022): я выпустил электронное руководство по Google Analytics 4. Бесплатно скачать его можно в формате .PDF по ссылке.

В своем блоге я уже сделал 7 публикаций на тему событий и конверсий в GA4, я также выпустил одно методическое пособие на эту тему. Скачать его можно здесь. Если вам удобнее читать статьи на сайте, то рекомендую:

• Цели в Universal Analytics
• События в Google Analytics 4. Часть I. Введение
• События в Google Analytics 4. Часть II. Автоматически регистрируемые события
• События в Google Analytics 4. Часть III. Улучшенная статистика
• События в Google Analytics 4. Часть IV. Рекомендуемые события
• События в Google Analytics 4. Часть V. Специальные события
• Конверсии в Google Analytics 4

Теперь давайте с вами практически настроим самые стандартные, базовые цели для Google Analytics 4. Это:

• посещение страницы по определенному URL-адресу (на примере страницы благодарности);
• клик по кнопке;
• отправка формы;
• клик по e-mail;
• клик по номеру телефона;
• скачивание файлов.

Все эти цели я буду настраивать на своем тестовом сайте graphanalytics.ru как с помощью специального кода, добавленного на конкретный элемент, так и благодаря Google Tag Manager. Но обо всем по порядку.

Отслеживание посещения страницы по определенному URL-адресу

После заполнения формы пользователя перенаправляет на страницу graphanalytics.ru/thank-you.html

В Google Analytics 4 по умолчанию после установки счетчика на сайте фиксируется событие page_view (просмотр страницы). Но оно срабатывает каждый раз, когда загружается страница. Нам же необходимо настроить событие (а затем конверсию) только для конкретной страницы thank-you.html.

Для этого создайте новое событие через События - Создать событие:

В появившемся окне нажмите кнопку Создать. На следующем шаге введите имя нового события. Оно может быть любым. Я рекомендую в названии передавать смысл данного события. Например, для моей страницы я назову событие spasibo.

Событие, на основе которого мы будем создавать новое - это как раз page_view (просмотр страницы). Поскольку нам нужно фиксировать событие на конкретной странице, то нам нужно конкретизировать условие и добавить дополнительный параметр page_location (URL-адрес текущей страницы, который извлекается из location.href). В результат получится:

• event_name равно page_view
• page_location содержит thank-you

Сохраните новое событие. Как только пользователь совершит переход к странице graphanalytics.ru/thank-you.html сработает новое событие spasibo, из которого можно создать конверсию, а потом импортировать ее в Google Рекламу. Проверить срабатывания события можно также с помощью отчета В реальном времени и инструмента DebugView.

Отслеживание клика по кнопке

Теперь передадим в GA4 событие, которое будет срабатывать в результате клика по кнопке.

Зеленую кнопку (№1) настроим самостоятельно, добавив вышеописанную конструкцию события через код сайта, а клик по синей кнопке (№2) отследим с помощью Google Tag Manager.

№1. Зеленая кнопка

Для отслеживания клика по зеленой кнопке нам необходимо:

• найти нужный элемент на странице;
• вручную добавить к нему дополнительный код события.

Чтобы найти нужный элемент, воспользуемся консолью разработчика и проинспектируем зеленую кнопку:

Код зеленой кнопки найден. Сюда необходимо вставить конструкцию события для передачи данных в Google Analytics 4. Ее мы уже знаем. Осталось определиться с тем, хотим ли мы передать что-то дополнительно, в параметрах события. В качестве примера давайте отправим с событием 3 параметра и дадим им собственные названия и значения:

1. на какой странице было совершено событие (параметр stranica, а значение glavnaya);
2. по какому элементу был осуществлен клик (параметр component, а значение knopka);
3. какого цвета был элемент (параметр zvet, а значение zelenyy);

А название события по зеленой кнопке обозначим как buttonClick1. В результате мы получим конструкцию такого вида:

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

Сохраняем изменения. На этом все. Проверить корректность передачи данных можно также с помощью:

1. отчета В реальном времени;
2. DebugView;
3. расширения для браузера Google Chrome Google Analytics Debugger или его аналога.

Я воспользуюсь вторым способом и проверю через DebugView, предварительно совершив несколько кликов по зеленой кнопке.

На временной шкале отобразилось событие с моим названием buttonClick1, которое зафиксировалось 2 раза. Нажав на название события в списке основных событий, можно провалиться внутрь события и посмотреть всего его параметры:

Как видно на скриншоте, все 3 параметра с моими установленными значениями передались в Google Analytics 4 корректно.

№2. Синяя кнопка

Теперь сделаем тоже самое, только с помощью Google Tag Manager и для синей кнопки. Для ее отслеживания необходимо:

• создать триггер на клик по элементу с условием активации для синей кнопки;
• создать тег типа Google Аналитика: событие GA 4 с названием события и 3 нашими параметрами.

Для синей кнопки:

1. на какой странице было совершено событие (параметр stranica, а значение glavnaya);
2. по какому элементу был осуществлен клик (параметр component, а значение knopka);
3. какого цвета был элемент (параметр zvet, а значение sinyaya);

А название события обозначим как buttonClick2. С учетом наших данных, которые мы установили для клика по кнопке, получим такой тег типа Google Аналитика: событие GA 4:

Триггер активации - Клик - Все элементы с условием активации для синей кнопки. Сохраняем изменения.

Чтобы проверить корректность передачи данных в GTM можно воспользоваться режимом предварительного просмотра.

Тег Google Аналитика: событие GA 4 на триггер Click сработал, в деталях отображена подробная статистика по передаваемым данным. Возвращаемся в Google Analytics 4 и проверяем через DebugView.

На временной шкале отобразилось событие с моим названием buttonClick2. Также нажав на название события в списке основных событий, можно провалиться внутрь события и посмотреть всего его параметры.

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

Отслеживание отправки формы

На сайте graphanalytics.ru есть форма, которую требуется отслеживать:

Для этого необходимо:

• найти нужный элемент на странице;
• вручную добавить к нему дополнительный код события.

Так же, как и с кнопками, проинспектируйте элемент с помощью консоли разработчика:

В тег <form> необходимо вставить конструкцию события об отправки формы для передачи данных в Google Analytics 4. Ее мы уже знаем. Осталось определить название события и параметры, которые мы будем передавать с этим событием и их значения. В качестве примера давайте отправим с событием два параметра:

• название события (он же <event_name>) - sendForm;
• параметр события 1 (<parameter_1_name>), в котором будет передаваться название формы - formName и его значение (<parameter_1_value>) - freeAudit;
• параметр события 2 (<parameter_2_name>), в котором будет передаваться полный URL-адрес страницы, на которой было совершено событие - formURL и его значение (<parameter_2_value>) - graphanalytics.ru;

Добавляем эту конструкцию в код формы с событием onsubmit, поскольку именно оно срабатывает при отправке формы.

Получим:

Cохраняем изменения. После этого необходимо проверить корректность передачи данных в Google Analytics 4. Теперь я буду использовать не DebugView, а специальное расширение для Google Chrome, которое называется GTM/GA Debug. В нем очень удобно смотреть передаваемые хиты в Google Analytics на соответствующей вкладке. После отправки тестовой заявки в консоли разработчика отобразится информация по совершенным событиям в GA4:

Теперь настроим тоже самое отслеживание отправки формы, только с помощью Google Tag Manager. Для этого необходимо:

• создать триггер типа Отправка формы;
• создать тег типа Google Аналитика: событие GA 4.

Название события и передаваемые параметры оставим теми же, только вместо значения второго параметра graphanalytics.ru я подставлю встроенную переменную {{Page Hostname}}.

С учетом наших данных, которые мы установили для отправки формы, получим такой тег:

Триггер активации - Отправка формы. Сохраняем изменения. Чтобы проверить корректность передачи данных в GTM можно воспользоваться режимом отладки.

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

Отслеживание клика по e-mail

В подвале сайта размещена электронная почта с активной ссылкой:

По клику на нее запускается почтовая программа, установленная по умолчанию на компьютере пользователя. Для отслеживания клика по e-mail выполняем те же самые действия - находим элемент и на него вешаем дополнительный код события. В самом простом виде можно даже без параметров:

Добавляем эту конструкцию в атрибут href с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут, и переход в почтовый мессенджер. Получим:

Сохраняем изменения. На этом все. Проверить корректность передачи данных можно также с помощью инструмента DebugView. Кликнув по e-mail, на шкале событий должно отобразиться ваше событие. У меня это clickEmail:

Теперь сделаем тоже самое, только с помощью Google Tag Manager. Самое важное - это задать правильный триггер активации. Наиболее простым и распространенным вариантом является выбор триггера Клик - Только ссылки с условием Click URL содержит mailto:

На завершающем шаге создайте тег типа Google Аналитика: событие GA 4 с названием события (в примере я буду использовать clickEmail2, чтобы оно было отлично от предыдущего):

Триггер активации - Клик по e-mail. Сохраняем изменения и проверяем с помощью DebugView:

Отслеживание клика по номеру телефона

Все аналогично. В подвале сайта (а на некоторых сайтах в нескольких местах, в том числе и в шапке) размещен номер телефона с активной ссылкой:

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

Для отслеживания клика по телефону выполняем те же самые действия - находим элемент и на него вешаем дополнительный код события. В самом простом виде без параметров:

Добавляем эту конструкцию в атрибут href с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут, и дальнейший вызов. Получим:

Сохраняем изменения. Проверить корректность передачи данных можно также с помощью все того же DebugView. Кликнув по номеру телефона, на шкале событий должно отобразиться ваше событие. У меня это clickPhone:

В Google Tag Manager можно скопировать предыдущий триггер для e-mail и поменять условие на Click URL содержит tel:

И скопировать тег, заменив название события (в примере я буду использовать clickPhone2, чтобы оно было отлично от предыдущего) и триггер активации:

Триггер активации - Клик по телефону. Сохраняем изменения и проверяем с помощью отчета в реальном времени:

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

Отслеживание скачивания файлов

В Universal Analytics ранее не существовало функционала, который позволял бы легко отслеживать скачиваемые с вашего сайта файлы (в Яндекс.Метрике такая настройка есть по умолчанию). Для этого необходимо было размечать каждую ссылку соответствующим кодом события, либо же использовать Google Tag Manager и настраивать по такой инструкции.

С появлением улучшенной статистики в Google Analytics 4 все отслеживается автоматически после активации настройки. Теперь нет необходимости использовать настройку через Google Tag Manager, о которой я писал в этой статье.

Событие file_download срабатывает, когда пользователь нажимает на ссылку скачивания файла на вашем сайте одного из следующих типов:

• документ;
• текст;
• исполняемый файл;
• презентация;
• сжатый файл;
• видео;
• аудио.

Расширения файлов, которые отслеживаются по умолчанию, соответствуют такому регулярному выражению:

После активации в событиях file_download фиксируются дополнительные параметры:

• file_extension - расширение файла;
• file_name - имя файла;
• link_classes - класс ссылки;
• link_domain - домен ссылки;
• link_id - идентификатор ссылки;
• link_text - текст ссылки;
• link_url - полный URL-адрес скачиваемого файла.

Предположим, что мы хотим отслеживать отдельно скачивание файлов формата .pdf, а не все расширения подряд. Как быть в этом случае? Очень просто:

1. в настройках Google Analytics 4 включить отслеживание улучшенной статистики;

2. использовать параметры событий, которые передаются вместе с событием file_download. Нам будет достаточно file_extension. Оно отвечает за расширение файла.

Чтобы отследить скачивание файлов только .pdf, создайте новое событие на основе существующего через События - Создать событие:

В появившемся окне нажмите кнопку Создать. Введите название пользовательского события (пример - downloadPDF), а в качестве условий совпадения добавьте параметр event_name равно file_download (название параметра) и параметр события file_extension содержит pdf, чтобы отслеживать только скачивания файлов формата .pdf.

Сохраните новое событие. На этом настройка всех событий завершена.

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

Данные в Google Analytics 4 могут доходить с задержкой до 24 часов. На заключительном шаге из событий следует настроить события-конверсии (цели). Если вы готовы подождать, то просто вернитесь к этому пункту через некоторое время, когда пользователи на вашем сайте совершат настроенные события. В разделе События - События из представленного списка событий с помощью переключателя отметьте те события, которые вы хотите отслеживать как конверсии:

Если вы не желаете ждать это время и хотите создать конверсию, которой еще нет в GA4, вы можете перейти в раздел События - Конверсии и Создать событие-конверсию.

Введите название вашего нового события и нажмите кнопку Сохранить. Событие отобразится в общем списке и будет отмечено как конверсия. На этом настройка завершена.

Настройка через Создать событие-конверсию полезна и в том случае, когда вы хотите, чтобы вся информация об атрибуции, связанная с этим событием, была доступна сразу же, как только вы начнете регистрировать его. В случае же с настройкой через Отметить как конверсию вы рискуете:

1. не успеть отметить какое-либо событие как конверсию (они могут начаться собираться до того, как вы переключите ползунок на ВКЛ., и вы просто потеряете часть данных по конверсиям);
2. неверно с_атрибуцировать конверсии, поскольку согласно п.1 не успеете их все отследить.

Все! На этом настройка целей в Google Analytics 4 завершена. Теперь вы можете импортировать конверсии из ресурса Google Analytics (GA4) в аккаунт Google Рекламы с помощью этой инструкции.