Настройка целей (конверсий) в Google Analytics 4
В этом материале разберем настройку самых распространенных целей для веб-сайтов в Google Analytics 4.
В своем блоге я уже сделал 7 публикаций на тему событий и конверсий в GA4, я также выпустил одно методическое пособие на эту тему. Скачать его можно здесь. Если вам удобнее читать статьи на сайте, то рекомендую:
Теперь давайте с вами практически настроим самые стандартные, базовые цели для 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.
Новое событие spasibo для конкретной страницы
Отслеживание клика по кнопке
Теперь передадим в GA4 событие, которое будет срабатывать в результате клика по кнопке.
Отслеживание кликов по кнопке (напрямую и через Google Tag Manager)
Зеленую кнопку (№1) настроим самостоятельно, добавив вышеописанную конструкцию события через код сайта, а клик по синей кнопке (№2) отследим с помощью Google Tag Manager.
№1. Зеленая кнопка
Для отслеживания клика по зеленой кнопке нам необходимо:
- найти нужный элемент на странице;
- вручную добавить к нему дополнительный код события.
Чтобы найти нужный элемент, воспользуемся консолью разработчика и проинспектируем зеленую кнопку:
Код зеленой кнопки найден. Сюда необходимо вставить конструкцию события для передачи данных в Google Analytics 4. Ее мы уже знаем. Осталось определиться с тем, хотим ли мы передать что-то дополнительно, в параметрах события. В качестве примера давайте отправим с событием 3 параметра и дадим им собственные названия и значения:
- на какой странице было совершено событие (параметр stranica, а значение glavnaya);
- по какому элементу был осуществлен клик (параметр component, а значение knopka);
- какого цвета был элемент (параметр zvet, а значение zelenyy);
А название события по зеленой кнопке обозначим как buttonClick1. В результате мы получим конструкцию такого вида:
Добавляем эту конструкцию в код кнопки с событием onclick, поскольку именно оно возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут. Получим:
Добавленная конструкция события GA4 на зеленую кнопку
Сохраняем изменения. На этом все. Проверить корректность передачи данных можно также с помощью:
- отчета В реальном времени;
- DebugView;
- расширения для браузера Google Chrome Google Analytics Debugger или его аналога.
Я воспользуюсь вторым способом и проверю через DebugView, предварительно совершив несколько кликов по зеленой кнопке.
Совершенное несколько раз событие buttonClick1
На временной шкале отобразилось событие с моим названием buttonClick1, которое зафиксировалось 2 раза. Нажав на название события в списке основных событий, можно провалиться внутрь события и посмотреть всего его параметры:
Параметры события, которые передались
Как видно на скриншоте, все 3 параметра с моими установленными значениями передались в Google Analytics 4 корректно.
№2. Синяя кнопка
Теперь сделаем тоже самое, только с помощью Google Tag Manager и для синей кнопки. Для ее отслеживания необходимо:
- создать триггер на клик по элементу с условием активации для синей кнопки;
- создать тег типа Google Аналитика: событие GA 4 с названием события и 3 нашими параметрами.
Для синей кнопки:
- на какой странице было совершено событие (параметр stranica, а значение glavnaya);
- по какому элементу был осуществлен клик (параметр component, а значение knopka);
- какого цвета был элемент (параметр zvet, а значение sinyaya);
А название события обозначим как buttonClick2. С учетом наших данных, которые мы установили для клика по кнопке, получим такой тег типа Google Аналитика: событие GA 4:
Конфигурация тега Google Аналитика: событие GA 4
Триггер активации — Клик — Все элементы с условием активации для синей кнопки. Сохраняем изменения.
Чтобы проверить корректность передачи данных в GTM можно воспользоваться режимом предварительного просмотра.
Тег Google Аналитика: событие GA 4 на триггер Click сработал, в деталях отображена подробная статистика
Тег Google Аналитика: событие GA 4 на триггер Click сработал, в деталях отображена подробная статистика по передаваемым данным. Возвращаемся в Google Analytics 4 и проверяем через DebugView.
Совершенное событие buttonClick2
На временной шкале отобразилось событие с моим названием buttonClick2. Также нажав на название события в списке основных событий, можно провалиться внутрь события и посмотреть всего его параметры.
Параметры события, которые передались
Описанным выше способом можно передавать события со своим названием и несколькими параметрами с помощью прямого добавления кода на сайт на отслеживаемый элемент кнопки, а также через диспетчер тегов Google.
Отслеживание отправки формы
На сайте graphanalytics.ru есть форма, которую требуется отслеживать:
Пример отслеживания формы
Для этого необходимо:
- найти нужный элемент на странице;
- вручную добавить к нему дополнительный код события.
Так же, как и с кнопками, проинспектируйте элемент с помощью консоли разработчика:
Источник
Пошаговая инструкция: как настроить события и конверсии в Google Analytics 4
В прошлом материале мы рассказывали, как установить на сайт Google Analytics 4. В этом — разберемся, как создать, настроить и протестировать события и конверсии.
Важным отличием Google Analytics 4 от его предшественника Universal Analytics стала ориентированность не на сеансы, а на события.
Событие — любое взаимодействие пользователя с сайтом: первое посещение, клик по кнопке, заполнение формы, прокрутка страницы и т. д. Конверсия — это то событие, которое вы хотите использовать, например, в Google Ads. Давайте разбираться по порядку.
С чего начать
Рекомендуем настраивать события через Google Tag Manager. Это бесплатный инструмент, контейнер тегов кодов, который нужно один раз установить на ваш сайт. Затем все необходимые теги можно будет настроить в GTM без изменения кода сайта. Тег — фрагмент кода, которые собирает данные о посетителях на сайте и отправляет на сторонние сервисы. Триггер — событие на вашем сайте, которое активирует тег. Триггером может стать нажатие на кнопку, прокрутка до определенного элемента, появление элемента на экране.
Все триггеры, настроенные ранее для Universal Analytics, будут работать и в Google Analytics 4, но нужно будет создать новые теги.
Для этого в Google Analytics 4 войдите во вкладку «События».
Изначально там будет пусто, но в течение 24 часов после создания нового ресурса появятся автоматические события: click, first_visit, page_view, scroll, session_start. Автоматически созданные события удалять не нужно. В этом же списке появятся специальные события — события, которые создадите вы.
Давайте разберем настройку событий на трех примерах: посещение страницы, клик по кнопке и отправка формы.
Событие: посещение страницы
Настроить такое событие непосредственно в Google Analytics 4 проще, чем в Google Tag Manager. Зайдите во вкладку «События», нажмите кнопку «Создать событие».
В открывшемся окне нажмите «Создать».
Дайте название специальному событию. В примере мы будем отслеживать попадание пользователя на страницу благодарности.
В графе «Параметр» в выпадающем меню выберите «Page location». В поле «Оператор» укажите «Содержит»: для такого события этого будет достаточно. А в «Значение» добавьте адрес страницы после слэша, например /thankyou. Каждый раз, когда пользователь будет заходить на эту страницу — событие сработает.
На этом базовая настройка закончена. Возвращайтесь на страницу с событиями: нового события пока на ней нет, оно появится примерно через 24 часа после создания.
Событие: клик по кнопке
Это событие создадим через Google Tag Manager. Для этого нужно настроить тег события и триггер.
Зайдите в менеджер тегов и выберете вкладку «Переменные», нажмите кнопку «Настроить».
В открывшемся окне выделите все переменные в перечне «Клики» и сохраните.
Теперь зайдите в «Триггеры», создайте новый и дайте ему название. Нажмите в любое место в поле настройки триггера.
Появится меню, в графе «Клик» выберите «Все элементы».
Теперь нужно настроить клики. По умолчанию выбраны «Все клики», но нужны только клики по конкретной кнопке. Выбирайте Click classes, затем «Соответствует селектору CSS» и укажите сам селектор CSS (о селекторах и их настройках можно узнать на вебинаре о Google Tag Manager). Нажмите кнопку «Сохранить».
Когда пользователь на сайте нажмет кнопку, которой соответствует указанный селектор CSS, — сработает триггер.
Зайдите в «Теги» и выберите только что созданный триггер. Дайте тегу максимально понятное название.
Кликните на конфигуратор тега, выберите пункт «Google Аналитика: события для GA 4».
Триггер уже выбран, задано название. Теперь необходимо указать название тега конфигурации GA4. Это название тега, которое вы давали Google Analytics 4 при установке на сайте через Google Tag Manager. Напишите название самого события, которое потом будет отражено в списке событий Google Analytics 4 и появится в ваших отчетах. Нажмите «Сохранить».
Перейдите в режим предварительного просмотра.
В tags not fired виден только что созданный тег. В режиме предварительного просмотра зайдите на сайт, кликните по кнопке, для которой создали событие. Вернитесь на панель с тегами и проверьте, переместился ли тег в tags fired. Если переместился — вы верно создали и настроили тег.
Чтобы проверить работу события в Google Analytics 4, зайдите на вкладку DebugView. Если здесь видно название события — оно настроено верно и передается в GA4.
Событие: отправка формы
Аналитику отправки формы многие отслеживают неверно: через клик по кнопке «Отправить». Не всегда клик по кнопке приводит к отправке формы: например, пользователь мог пропустить обязательные пункты. Но счетчик посчитает каждый клик.
На многих сайтах после отправки формы пользователь переходит на страницу с благодарностью или видит всплывающее окно «Спасибо. Ваша заявка принята». Во втором случае советуем отслеживать событие появления этого окна.
Зайдите в «Переменные» Google Tag Manager. Отметьте нужный пункт в разделе «Видимость».
Создайте новый триггер: зайдите в раздел «Триггеры», выберите пункты «Взаимодействие пользователей» — «Видимость элемента».
Заполните форму. Напишите понятное название. Снова в «Методе выбора» выберите «Селектор СSS». Теперь вам нужно найти селектор выбранного элемента.
Откройте форму на сайте, заполните и отправьте ее. Правой кнопкой мыши кликните по появившемуся окну, нажмите «Посмотреть код». Клик по коду правой кнопкой мыши, «Copy» — «Copy selector».
Вставьте селектор CSS в выделенную для него графу. Правила запуска в данном случае выбирайте исходя из своих задач. В этом примере повторная фиксация просмотра выбранного элемента не нужна. «Минимальный процент видимости» можете изменить или оставить по умолчанию. В данном случае важен сам факт открытия этого окна. Не забудьте сохранить.
Создайте тег. Как в предыдущем примере, дайте ему название, выберите созданный триггер, настройте тип тега. Проверьте тег в режиме предварительного просмотра.
О конверсиях
Самые важные события следует отметить как конверсии. Это позволит отслеживать их эффективность в отчетах и импортировать в Google Ads. Для этого включите тумблер в последнем столбце «Отметить как конверсию».
После этого они появятся на специальной вкладке «Конверсии». Теперь их можно передать в Google Ads.
Зайдите в Google Ads во вкладку «Инструменты», выберите «Конверсии» в графе «Отслеживание» и нажмите плюс, чтобы добавить конверсии.
В открывшемся окне нажмите «Импорт», а в нижнем углу — «Ресурсы Google Analytics 4» и «Сайт». Выберите все конверсии, которые вы хотите импортировать, нажмите «Импортировать и продолжить».
Если вы никогда не работали с Google Tag Manager, посмотрите наш обучающий вебинар. В нем евангелист eLama Никита Кравченко объясняет, как начать работу с Google Tag Manager и добавить в него самые популярные теги: Яндекс.Метрику, Google Analytics 4, пиксели Facebook и ВКонтакте.
И помните главное: никогда не запускайте рекламу без настроенной аналитики.
Материал подготовлен на основе вебинара евангелиста eLama Никиты Кравченко «Как настроить Google Analytics 4».
Источник