Отслеживание скопированного текста с помощью GTM
Описанное в этой статье решение позволяет отслеживать события, связанные с копированием какого-либо текста на вашем сайте с помощью GTM, и передавать содержимое этого текста в инструменты веб-аналитики.
Разберем конкретную задачу, которую мы вместе с одной слушательницей моего курса решали на занятии. Необходимо было отправлять событие в Google Analytics каждый раз, когда пользователь копировал рефферальную ссылку:
Задача - активировать триггер на копирование рефферальной ссылки
Проблема заключалась в том, что никак не удавалось настроить триггер активации, поскольку у данного элемента не было ни класса (class), ни идентификатора (id).
Элемент без опознавательных знаков
В этом случае рекомендуется настраивать прослушивание событий с помощью метода addEventListener, о котором я писал в этой статье.
Для решения задачи воспользуемся кодом Даниэля Карлбома (Daniel Carlbom) из его публикации, который необходимо добавить через Google Tag Manager в тег типа Пользовательский HTML тег.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function getSelectionText() { var text = ''; if (window.getSelection) { text = window.getSelection().toString(); } else if (document.selection && document.selection.type != 'Control') { text = document.selection.createRange().text; } return text; } document.addEventListener('copy', function(e){ dataLayer.push({ 'event': 'textCopied', 'clipboardText': getSelectionText(), 'clipboardLength': getSelectionText().length }); }); </script> |
В GTM это выглядит так:
Код addEventListener в Google Tag Manager
Триггер активации – Все страницы (All Pages). Функция getSelectionText возвращает текст, который находится в буфере обмена. Метод addEventListener регистрирует обработчик события. В нашем случае – это copy. Событие срабатывает тогда, когда выделение было скопировано в буфер обмена. Затем полученную информацию мы помещаем в уровень данных (dataLayer), в которой есть 3 пары ключ:значение. Это:
- event – название пользовательского события (textCopied);
- clipboardText – фактическое содержимое скопированного текста;
- clipboardLength – длина скопированного текста (количество символов);
Теперь мы можем использовать все это при активации триггера и отправке значений в инструменты аналитики и т.д.
Чтобы извлечь значение скопированного текста, создайте переменную типа Переменная уровня данных со значением clipboardText:
Переменная уровня данных clipboardText
Для отслеживания количества символов создайте еще одну переменную со значением clipboardLength
Переменная уровня данных clipboardLength
Теперь необходимо создать триггер, который запускал бы пользовательское событие textCopied.
Триггер - Пользовательское событие textCopied
Все, что осталось сделать, это создать тег отправки полученных данных в Google Analytics. Для этого используется тег типа Google Аналитика – Universal Analytics с типом отслеживания Событие.
Тег Universal Analytics
Триггер активации - пользовательское событие textCopied. В качестве Категории и Действия можно указать произвольные значения, в Ярлык я поместил переменную со скопированным текстом, а в Значение добавил длину текста. Можно также добавить и путь (Page Path), чтобы знать, с какой страницы пользователь копировал текст.
Сохранив все настройки, можно проверить корректность их работы с помощью режима отладки. При клике на значок копирования срабатывает событие textCopied:
Событие срабатывает корректно, переменные содержат нужные значения
В созданные переменные информация передается. Тег Google Analytics активируется, в dataLayer содержимое тоже присутствует:
dataLayer
С помощью данного решения можно отслеживать копирование любого текста на странице, не только e-mail адреса. Например, на той же самой странице есть промокод, который мы также можем отследить. При копировании его пользователям будем срабатывать аналогичное событие, а в переменную clipboardText помещаться значение этого промокода:
Копирование промокода на странице
Данные в отчетах Google Analytics будут отображаться в разделе Поведение – События – Лучшие события.
