Настройка целей в Google Analytics 4

Маруся

Администратор
Команда форума
Регистрация
21 Окт 2020
Сообщения
199

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

В своем блоге я уже сделал 7 публикаций на тему событий и конверсий в GA4, я также выпустил одно методическое пособие на эту тему. Если вам удобнее читать статьи на сайте, то рекомендую:
Теперь давайте с вами практически настроим самые стандартные, базовые цели для Google Analytics 4. Это:
  • посещение страницы по определенному URL-адресу (на примере страницы благодарности);
  • клик по кнопке;
  • отправка формы;
  • клик по e-mail;
  • клик по номеру телефона;
  • скачивание файлов.
Все эти цели я буду настраивать на своем тестовом сайте graphanalytics.ru как с помощью специального кода, добавленного на конкретный элемент, так и благодаря Google Tag Manager. Но обо всем по порядку.

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

1616060352353.png
Страница благодарности

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

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

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

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

Отслеживание клика по кнопке
Теперь передадим в GA4 событие, которое будет срабатывать в результате клика по кнопке.
1616060478358.png
Отслеживание кликов по кнопке (напрямую и через Google Tag Manager)

Зеленую кнопку (№1) настроим самостоятельно, добавив вышеописанную конструкцию события через код сайта, а клик по синей кнопке (№2) отследим с помощью Google Tag Manager.
№1. Зеленая кнопка
Для отслеживания клика по зеленой кнопке нам необходимо:
  • найти нужный элемент на странице;
  • вручную добавить к нему дополнительный код события.
Чтобы найти нужный элемент, воспользуемся консолью разработчика и проинспектируем зеленую кнопку:
1616060490701.png
Инспектирование элемента

Код зеленой кнопки найден. Сюда необходимо вставить конструкцию события для передачи данных в Google Analytics 4. Ее мы уже знаем. Осталось определиться с тем, хотим ли мы передать что-то дополнительно, в параметрах события. В качестве примера давайте отправим с событием 3 параметра и дадим им собственные названия и значения:
  1. на какой странице было совершено событие (параметр stranica, а значение glavnaya);
  2. по какому элементу был осуществлен клик (параметр component, а значение knopka);
  3. какого цвета был элемент (параметр zvet, а значение zelenyy);
А название события по зеленой кнопке обозначим как buttonClick1. В результате мы получим конструкцию такого вида:

1
2
3
4
5
gtag('event', 'buttonClick1', {
'stranica': 'glavnaya',
'component': 'knopka',
'zvet': 'zenelyy',
});
Добавляем эту конструкцию в код кнопки с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут. Получим:
1616060510924.png
Добавленная конструкция события GA4 на зеленую кнопку

Сохраняем изменения. На этом все. Проверить корректность передачи данных можно также с помощью:
  1. отчета В реальном времени;
  2. DebugView;
  3. расширения для браузера Google Chrome Google Analytics Debugger или его аналога.
Я воспользуюсь вторым способом и проверю через DebugView, предварительно совершив несколько кликов по зеленой кнопке.
1616060526433.png
Совершенное несколько раз событие buttonClick1

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

Как видно на скриншоте, все 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:
1616060570246.png
Конфигурация тега Google Аналитика: событие GA 4

Триггер активации - Клик - Все элементы с условием активации для синей кнопки. Сохраняем изменения.
Чтобы проверить корректность передачи данных в GTM можно воспользоваться режимом предварительного просмотра.
1616060623554.png
Тег Google Аналитика: событие GA 4 на триггер Click сработал, в деталях отображена подробная статистика

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

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

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

Отслеживание отправки формы
На сайте graphanalytics.ru есть форма, которую требуется отслеживать:
1616060690483.png
Пример отслеживания формы

Для этого необходимо:
  • найти нужный элемент на странице;
  • вручную добавить к нему дополнительный код события.
Так же, как и с кнопками, проинспектируйте элемент с помощью консоли разработчика:
1616060705485.png
Инспектирование формы

В тег <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;
1
2
3
4
gtag('event', 'sendForm', {
'formName': 'freeAudit',
'formURL': 'graphanalytics.ru',
});
Добавляем эту конструкцию в код формы с событием onsubmit, поскольку именно оно срабатывает при отправке формы.

Получим:
1616060724801.png
Добавленная конструкция события GA4 на тег отправки формы

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

Теперь настроим тоже самое отслеживание отправки формы, только с помощью Google Tag Manager. Для этого необходимо:
  • создать триггер типа Отправка формы;
  • создать тег типа Google Аналитика: событие GA 4.
Название события и передаваемые параметры оставим теми же, только вместо значения второго параметра graphanalytics.ru я подставлю встроенную переменную {{Page Hostname}}.

С учетом наших данных, которые мы установили для отправки формы, получим такой тег:
1616060754722.png
Тег Google Analytics 4 с отправкой формы

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

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

Отслеживание клика по e-mail
В подвале сайта размещена электронная почта с активной ссылкой:
1616060784469.png
Пример отслеживания клика по e-mail

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

1gtag('event', 'clickEmail');
Добавляем эту конструкцию в атрибут href с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут, и переход в почтовый мессенджер. Получим:
1616061184332.png
Добавленная конструкция события GA4 на электронную почту

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

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

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

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

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

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

1gtag('event', 'clickPhone');
Добавляем эту конструкцию в атрибут href с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут, и дальнейший вызов. Получим:
Настройка целей в Google Analytics 4
Добавленная конструкция события GA4 на номер телефона

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

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

И скопировать тег, заменив название события (в примере я буду использовать clickPhone2, чтобы оно было отлично от предыдущего) и триггер активации:
Настройка целей в Google Analytics 4
Тег Google Аналитика: событие GA 4 на триггер "Клик по телефону"

Триггер активации - Клик по телефону. Сохраняем изменения и проверяем с помощью отчета в реальном времени:
Настройка целей в Google Analytics 4
Совершенное событие clickPhone2

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

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

1pdf|xlsx?|docx?|txt|rtf|csv|exe|key|pp(s|t|tx)|7z|pkg|rar|gz|zip|avi|mov|mp4|mpe?g|wmv|midi?|mp3|wav|wma
После активации в событиях file_download фиксируются дополнительные параметры:
  • file_extension - расширение файла;
  • file_name - имя файла;
  • link_classes - класс ссылки;
  • link_domain - домен ссылки;
  • link_id - идентификатор ссылки;
  • link_text - текст ссылки;
  • link_url - полный URL-адрес скачиваемого файла.
Предположим, что мы хотим отслеживать отдельно скачивание файлов формата .pdf, а не все расширения подряд. Как быть в этом случае? Очень просто:
1. в настройках Google Analytics 4 включить отслеживание улучшенной статистики;
Настройка целей в Google Analytics 4
Улучшенная статистика в GA4

2. использовать параметры событий, которые передаются вместе с событием file_download. Нам будет достаточно file_extension. Оно отвечает за расширение файла.
Чтобы отследить скачивание файлов только .pdf, создайте новое событие на основе существующего через События - Создать событие:
Настройка целей в Google Analytics 4
Создание события

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

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

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

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

Настройка через Создать событие-конверсию полезна и в том случае, когда вы хотите, чтобы вся информация об атрибуции, связанная с этим событием, была доступна сразу же, как только вы начнете регистрировать его. В случае же с настройкой через Отметить как конверсию вы рискуете:
  1. не успеть отметить какое-либо событие как конверсию (они могут начаться собираться до того, как вы переключите ползунок на ВКЛ., и вы просто потеряете часть данных по конверсиям);
  2. неверно с_атрибуцировать конверсии, поскольку согласно п.1 не успеете их все отследить.
Все! На этом настройка целей в Google Analytics 4 завершена.

Источник
 

Вложения

  • 1616060797041.png
    1616060797041.png
    110.9 KB · Просмотры: 0
Сверху