Общий принцип
Оформление заказа в BigCommerce состоит из 4 этапов, каждый из которых последовательно отображается на странице /checkout:
- Customer (ввод email)
- Shipping (ввод имени, номера телефона и адреса доставки)
- Billing (ввод тех же полей, что и в shipping, но для выставления счета)
- Payment (ввод платежных данных, обычно это карта или PayPal)
По умолчанию BigCommerce не отдает данные о движении покупателей по этой воронке, что затрудняет анализ. Решить это можно с помощью создания для каждого этапа триггера и тега в Google Tag Manager.
Создание триггера и тега для каждого этапа чекаута
Каждый из описанных этапов – это заполняемая покупателем форма с html-тегом <form>. Наша задача – фиксировать отправку каждой формы и отправлять событие об этом в GA4.
Для отслеживания отправки форм будем использовать триггеры в GTM – «Отправка формы» и «Клик» (там где у формы не заполнен id).
У формы на этапе «Customer», id заполнен, ее отслеживание смотрите здесь.
У форм «Shipping», «Billing» и «Payment» id не заполнен, для них понадобится создать группу триггеров. Как это сделать описано здесь.
Отслеживание формы с заполненным параметром id
Узнать id формы можно через веб-инспектор браузера. В данном случае это checkout-customer-guest.
Далее необходимо в GTM создать триггер, который активируется при отправке формы с определенным id.
Ниже показано, как настроен триггер, срабатывающий при отправке формы ввода email-адреса (этап «Сustomer»).
После создания триггера нужно добавить тег, который будет отправлять событие об отправке формы в GA4 (перед этим убедитесь, что у вас уже установлен тег конфигурации GA4).
Ниже показано, как настроен тег, отправляющий событие об отправке формы на этапе «Customer» в GA4.
Название события можно указать любое. Именно оно будет отображаться в интерфейсе GA4.
Убедитесь, что тег активируется по с помощью триггера, который мы добавили ранее.
После публикации новой версии рабочей области GTM, события начнут появляться в отчетах GA4. Обычно это происходит с задержкой примерно в одни сутки.
Отслеживание формы с пустым параметром id
Если id формы не заполнен, в веб-инспекторе будет примерно такой HTML-тег:
Так как id отсутствует, необходимо использовать другой уникальный параметр – CSS селектор.
Порядок действий в данном случае выглядит так:
- Создание группы триггеров (отправка формы + клик по элементу с определенным CSS селектором)
- Создание тега, активирующегося группой триггеров
- Публикация рабочей области
Теперь обо всем по порядку и подробнее.
Тег, который отправляет событие о заполнении формы в данном случае необходимо активировать при срабатывании двух триггеров одновременно. Такое объединение реализуется с помощью типа триггера «Группа триггеров».
Настройка триггеров
Первый триггер – отправка любой формы на странице, URL которой содержит /checkout. Ниже показано окно его настройки:
Второй триггер – клик по кнопке «Сontinue», которая подтверждает отправку формы «Shipping» и переводит покупателя на следующий этап чекаута.
Чтобы учитывать клики именно по этой кнопке, необходимо узнать ее CSS селектор. Для этого находим ее тег в веб-инспекторе, кликаем по нему правой кнопкой мыши и нажимаем Copy → Copy selector.
Скопированный селектор выглядит так: checkout-shipping-continue.
Далее создаем триггер в GTM:
Третий триггер – для объединения отправки формы и клика по кнопке с CSS селектором. Настройка максимально простая:
Настройка тега
После создания группы триггеров, создаем тег абсолютно так же, как это делали с формой «Customer»:
Триггер для активации – ранее созданная нами группа:
События в интерфейсе GA4
После публикации рабочей области GTM, события примерно спустя сутки (иногда дольше) начнут отображаться в интерфейсе GA4. Это будет выглядеть так:
Далее вы можете использовать их, просматривая стандартные отчеты, или создать собственные, например, воронку продаж, через инструмент «Исследования» (Explorations).
На этом все. Надеюсь, что статья вам помогла.
Добавить комментарий