Блог
31 Июля, 2019

Отслеживание событий с помощью CSS-селекторов в Google Tag Manager.

На этот раз мы рассмотрим процесс настройки передачи данных для успешной отправки формы, при условии, что после отправки вас не перенаправляет на страницу «спасибо».

1.Для начала заполняем форму, на которую хотим настроить передачу данных. В нашем случае это «заказать звонок».

1.png

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

2.png

3. Для определения селектора нажимаем ПКМ -> Посмотреть код -> Находим элемент в коде, который отвечает за это сообщение -> ПКМ -> Copy -> Copy selector. В нашем случае селектор имеет вид: #wrapper_form_order_call_40cd750bba9870f18aada2478b24840a > div > div.o-call-success-body

3.png

4. Перейдите в GTM и создайте новый тег типа Google Аналитика. Выберите событие и заполните поля «Категория» и «Действие». Сохраните тег.

4.png

5. Перейдите во вкладку триггеры. Создайте новый триггер типа «Доступность элемента». Метод выбора «Селектор-CSS». В другое поле необходимо ввести селектор, который мы нашли на шаге 3 (в нашем случае: #wrapper_form_order_call_40cd750bba9870f18aada2478b24840a > div > div.o-call-success-body).

5.png

6. Сохраняем триггер. После чего переходим в теги, выбираем ранее созданный тег, добавляем туда наш триггер, сохраняем.

6.png

7. Проверяем работоспособность нашего тега, после чего опубликовываем изменения.

7.png

8. Теперь заходим в Google Analytics. Жмем Администратор -> Цели -> +Цель.

9. Выбираем «собственная цель», жмем далее. Даем название цели, выбираем тип «Событие».

7.png

10. В данном окне указываем категорию и действие такие же, какие мы указывали в GTM. В нашем случае это «Заказать» и «Звонок. (картинка 8) Жмем сохранить. Готово, отправка формы «Заказать звонок» отправляется в Гугл аналитикс в качестве достижения цели.

8.png

Готово! Вы восхитительны!