Отслеживание скопированного текста с помощью GTM

Февраль 06, 2020

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

Разберем конкретную задачу, которую мы вместе с одной слушательницей моего курса решали на занятии. Необходимо было отправлять событие в Google Analytics каждый раз, когда пользователь копировал рефферальную ссылку:

Отслеживание скопированного текста с помощью GTM

Задача — активировать триггер на копирование рефферальной ссылки

Проблема заключалась в том, что никак не удавалось настроить триггер активации, поскольку у данного элемента не было ни класса (class), ни идентификатора (id).

Отслеживание скопированного текста с помощью GTM

Элемент без опознавательных знаков

В этом случае рекомендуется настраивать прослушивание событий с помощью метода addEventListener, о котором я писал в этой статье.

Для решения задачи воспользуемся кодом Даниэля Карлбома (Daniel Carlbom) из его публикации, который необходимо добавить через Google Tag Manager в тег типа Пользовательский HTML тег.

В GTM это выглядит так:

Отслеживание скопированного текста с помощью GTM

Код addEventListener в Google Tag Manager

Триггер активации – Все страницы (All Pages). Функция getSelectionText возвращает текст, который находится в буфере обмена. Метод addEventListener регистрирует обработчик события. В нашем случае – это copy. Событие срабатывает тогда, когда выделение было скопировано в буфер обмена. Затем полученную информацию мы помещаем в уровень данных (dataLayer), в которой есть 3 пары ключ:значение. Это:

  • event – название пользовательского события (textCopied);
  • clipboardText – фактическое содержимое скопированного текста;
  • clipboardLength – длина скопированного текста (количество символов);

Теперь мы можем использовать все это при активации триггера и отправке значений в инструменты аналитики и т.д.

Чтобы извлечь значение скопированного текста, создайте переменную типа Переменная уровня данных со значением clipboardText:

Отслеживание скопированного текста с помощью GTM

Переменная уровня данных clipboardText

Для отслеживания количества символов создайте еще одну переменную со значением clipboardLength

Отслеживание скопированного текста с помощью GTM

Переменная уровня данных clipboardLength

Теперь необходимо создать триггер, который запускал бы пользовательское событие textCopied.

Отслеживание скопированного текста с помощью GTM

Триггер — Пользовательское событие textCopied

Все, что осталось сделать, это создать тег отправки полученных данных в Google Analytics. Для этого используется тег типа Google Аналитика – Universal Analytics с типом отслеживания Событие.

Отслеживание скопированного текста с помощью GTM

Тег Universal Analytics

Триггер активации — пользовательское событие textCopied. В качестве Категории и Действия можно указать произвольные значения, в Ярлык я поместил переменную со скопированным текстом, а в Значение добавил длину текста. Можно также добавить и путь (Page Path), чтобы знать, с какой страницы пользователь копировал текст.

Сохранив все настройки, можно проверить корректность их работы с помощью режима отладки. При клике на значок копирования срабатывает событие textCopied:

Отслеживание скопированного текста с помощью GTM

Событие срабатывает корректно, переменные содержат нужные значения

В созданные переменные информация передается. Тег Google Analytics активируется, в dataLayer содержимое тоже присутствует:

Отслеживание скопированного текста с помощью GTM

dataLayer

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

Отслеживание скопированного текста с помощью GTM

Копирование промокода на странице

Данные в отчетах Google Analytics будут отображаться в разделе Поведение – События – Лучшие события.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике