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

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

Техническое задание

Условия

  1. Есть одностраничный сайт, на котором пользователи могут отдать свой голос за один из двух продуктов, при этом есть дополнительная возможность — поделиться своим решением с другими пользователями.
  2. Всего на сайте 4 кнопки:
    — Голосуй за продукт (1)
    — Голосуй за продукт (2)
    — Поделись результатом (1)
    — Поделись результатом (2)

    Уточнение: Надписи на кнопках попарно одинаковые. Цифры были добавлены для более простого восприятия действий по отношению к 1ому и 2ому продукту.

    Кнопки Голосуй

    Первая пара кнопок

    Кнопки Поділись

    Вторая пара кнопок

  3. При нажатии на кнопки Голосуй и Поділись, требуется регистрация на сайте или же войти в уже созданную ранее учетную запись. Для этого на сайте представлена форма в виде всплывающего окна.
  4. После регистрации необходимо повторно проголосовать за один из продуктов, после чего появится всплывающее окно с благодарностью за оставленный голос.

Какие цели нужно отслеживать?

  1. Нажатие на кнопки Голосуй (для каждого из продуктов).
  2. Открытие всплывающего окна с благодарностью.

Важно: Необходимо понимать, сколько пользователей, которым показалось окно с благодарностью, проголосовали за 1ый или 2ой продукт.

Решение

Этап 1. Клик на кнопку Голосуй

  1. В GTM создаем тег с типом отслеживания — Событие.
  2. Необходимо задать условие (триггер), при котором сработает наш тег.
    Сложность в том, что:
    — класс кнопок Голосуй и Поділись — одинаковый;
    — id также одинаковый;
    — текст на кнопках не отличается.
    Контейнер Голосуй

Голосуй код

Единственное отличие между ними — разное значение data-type (1 и 2 соответственно).

Исходя из этого, можем использовать 2 условия в триггере:

  1. Click class равно btn-vote, что позволит срабатывать тегу только по кнопкам Голосуй (у кнопок Поділись класс отличается).
  2. Click element соответствует селектору CSS [data-type=»1″], чтобы тег срабатывал при нажатии Голосуй конкретного продукта.

Важно: Не забываем заключать data-type=»1″ и data-type=»2″ в квадратные скобки, т.к. в тег менеджере нет возможности выбора части селектора CSS. Это справедливо для всех data-атрибутов.

Таким образом, триггер для одной из кнопок будет выглядеть так:

Триггер Голосуй

Этап 2. Регистрация всплывающего окна благодарности

  1. В GTM создаем тег с типом отслеживания — Событие.
  2. Необходимо задать условие (триггер), при котором сработает наш тег.
    Сложность в том, что:
    — на сайте представлено 6 всплывающих окон, у которых одинаковый класс;
    — параметры, которые можно использовать для ограничения условий — динамичные.

Окно благодарности код

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

  1. Используем тип триггера — Доступность элементов, в котором указываем селектор CSS — .modal-dialog.
    Не забываем ставить галочку возле Регистрации элементов DOM, так как содержимое модального окна динамическое. Это плохо, так как незначительно нагружает страницу сайта дополнительными проверками, но другого выхода нет 🙁
    Все эти действия приводят к срабатыванию тега, при появлении всплывающих окон.
  2. Дополнительным ограничением будет выступать Form Text содержит ДЯКУЄМО! ТВІЙ ГОЛОС ЗАРАХОВАНО! Это позволяет ограничить регистрацию всех всплывающих окон только окном с благодарностью.

Таким образом, триггер для окна благодарности будет выглядеть так:

Триггер всплывающего окна

Этап 3. Последовательность событий

По ТЗ нам необходимо понимать не только сколько пользователей проголосовало в целом, но и по каждому продукту по отдельности. А значит, нужно регистрировать 2 последовательности событий:

  • Клик по кнопке Голосуй за продукт (1) — Всплывающее окно благодарности
  • Клик по кнопке Голосуй за продукт (2) — Всплывающее окно благодарности

Поэтому, необходимо настроить два тега событий, которые будут отличаться триггерами.

Напомним, что окно благодарности не меняется в зависимости от того, за какой продукт вы отдали свой голос.

Для того, чтобы тег срабатывал только при выполнении действий по одной из последовательности событий, необходимо воспользоваться конструкцией Группа триггеров.

В группе триггеров выбираем триггер с кликом на Голос за нужный продукт, а также триггер с открытием окна благодарности.Это позволит фиксировать сколько пользователей после регистрации на сайте проголосовало за продукт и какой именно.

Триггер в данном теге будет выглядеть следующим образом:
Группа триггеров

Этап 4. Настраиваем цели в GA

Последний этап заключается в создании целей в GA на основе созданных событий в GTM.

В разделе Администратор на уровне представления создаем две цели (отдельно для каждого продукта).

При этом, выбираем настройку целей по событиям с заполнением категорий и действий, которые ранее указывали в соответствующих тегах.

Не забываем проверять срабатывает ли тег с помощью окна предварительного просмотра, а также передается ли событие в GA (Отчет в режиме реального времени — События).

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