Настройка отслеживания копирования текста

Введение

Здравствуйте! Меня зовут Артём, и мы продолжаем заниматься настройкой аналитики в GTM и YTM.

В предыдущих статьях:

• Мы провели необходимые подготовительные работы
• Настроили отслеживание кликов по элементам сайта
• Настроили отслеживание отправки форм

Если не читали – рекомендую ознакомиться.

А в этой статье мы разберём, как настроить отслеживание копирования текста и для чего это может быть полезно.

После того как мы завершили базовую настройку аналитики, самое время перейти к более точечным и специфическим действиям — таким, как отслеживание копирования информации со страниц сайта.

С помощью любого Тег Менеджера можно зафиксировать момент, когда пользователь:

• копирует номер телефона;
• копирует адрес электронной почты;
• копирует физический адрес компании.

Часто это важные поведенческие сигналы. Особенно в B2B-сегменте, где потенциальный клиент часто копирует контактную информацию, чтобы позже:

• позвонить;
• отправить коммерческий запрос на почту;
• построить маршрут до офиса через карты.

Такие действия — не просто «активность на сайте», а признаки реального интереса и потенциальной заявки. Поэтому имеет смысл фиксировать их как микроконверсии для использования в последующей аналитике. По ним же смогут обучаться и автостратегии в Яндекс Директ.

Если у вас есть небольшой скрипт (или вы используете готовое решение), настройка в YTM занимает буквально несколько минут. В следующем блоке покажу, как это сделать.

Перенос всех настроек по шагам

Шаг 1. Установка кода отслеживания копирования

В начале создаём Тег → Пользовательский HTML в YTM и вставляем следующий код

<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>

Этот код отслеживает любые действия пользователя по копированию текста на странице и отправляет в dataLayer событие textCopied вместе с самим текстом и его длиной:

•   ‘event’: ‘textCopied’,  – название события для триггера в YTM/GTM;
•   ‘clipboardText’: ‘XXX‘, – скопированный текст;
•   ‘clipboardLength’:  ‘XXX‘ – длина текста в символах.

Привязываем этот тег к триггеру «Модель DOM готова», чтобы код запускался сразу после загрузки страницы.

Добавляем к тегу триггер «Модель DOM готова»

Шаг 2. Создание переменной уровня данных

Далее создаём пользовательскую переменную уровня данных

с именем clipboardText.

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

Шаг 3. Создание триггера специального события

Теперь создаём триггер «Специальное событие» и даём ему название textCopied.

Создаём триггер «Специальное событие» textCopied

Теперь нам нужно лишь выбрать, что именно мы будем отслеживать на сайте. Давайте начнём с настройки копирования номера телефона.

Смотрим, какой номер телефона у нас на сайте.

Номер телефона на сайте

Указываем этот номер или его часть в дополнительном условии срабатывания триггера со специальным событием textCopied. Находим в выпадающем меню нашу переменную уровня данных clipboardText. Выбираем условие содержит и указываем часть номера 697 на случай, если номер может быть записан на сайте по-разному.

clipboardText – содержит – 697

Если он везде одинаковый – можем использовать оператор равно и указать весь номер телефона.

Используем оператор равно, если номер телефона на сайте везде указан одинаково

У меня номер телефона неизменен, поэтому я выберу последний вариант. Даём название триггеру Копирование номера телефона.

У меня такая цель уже была в Яндекс Метрике, поэтому я просто отредактирую её название. ID цели оставляю таким же: CopyPhone.

Идентификатор цели в Яндекс Метрике

После настройки триггера, отслеживающего копирование номера телефона, необходимо создать тег, который будет отправлять соответствующее событие в Яндекс Метрику.

Создаём тег Яндекс Метрики

 После успешной настройки отслеживания копирования номера телефона, точно так же можно отследить копирование почты и адреса на сайте. Нужно просто заменить в триггерах условия срабатывания. Для отслеживания копирования почты создаём триггер с условием:

Меняем условия при настройке триггера

Для копирования адреса на сайте берём ту часть текста, которую с высокой вероятностью будут копировать люди.

Я выбрал название улицы и номер дома

Для каждого нового триггера необходимо теперь создать 2 соответствующих тега.

Теперь мы отслеживаем не только клики, но и копирование контактных данных — сильный поведенческий сигнал, особенно в B2B.

Здорово, не так ли?

Результат нашей настройки

БОНУС: отслеживание любого скопированного текста + его передача в параметрах

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

Интересно?

Тем более, что настраивать особенно ничего и не нужно, так как бОльшая часть работы нами уже проделана.

Шаг 1. Создаём цель в Яндекс Метрике

Даём ей идентификатор Copy–Any–Text.

Идентификатор цели в Метрике

Шаг 2. Создаём триггер в YTM

Это всё тот же триггер со специальным событием textCopied, но без каких-то дополнительных условий активации. То есть, чтобы он срабатывал при любом копировании текста на сайте.

Триггер отслеживает любое копирование текста на сайте

Шаг 3. Создаём тег в YTM

Теперь добавим в тег передачу параметров. Для этого активируем поле params. И сразу выбираем триггер «Копирование любого текста на сайте», без каких-либо дополнительных условий.

Создаём тег Яндекс Метрики. Добавляем поле param

В поле params нам нужно написать корректные значения. Что и как писать нам уже подсказывают сами разработчики менеджера тегов.

Как писать подсказывают сами разработчики

Я буду использовать вот такие значения:

{"текст":"{{}}"}

В поле params достаточно написать {“текст”:”{{, после чего из выпадающего списка выбрать переменную clipboardText.

Выбираем из выпадающего меню переменную clipboardText

Выбираем её и не забываем поставить двойные кавычки в конце, и ещё одну закрывающую фигурную скобку.

Правильная формула в поле param

Сохраняем тег.

Шаг 4. Проверка в режиме отладки

Теперь переходим в «Предварительный просмотр» YTM и проверяем, что у нас получилось.

Для теста я скопировал на сайте текст «Стильные».

Сначала сработал тег мини-дебагер: Скопирован текст: Стильные 

Затем наша цель: Copy–Any–Text

А вместе с ней мы передали в параметрах слово и слово «Стильные».

Тег мини-дебагер, цель Copy-Any-Text + параметры цели

При копировании или почты или телефона, срабатывают уже 2 цели: Copy–Any–Text и CopyPhone.

Сработали 2 цели: Copy-Any-Text и CopyPhone

То же самое происходит и при копировании адреса.

Cрабатывают 2 цели: Copy-Any-Text и CopyAdress

Или почты на сайте.

Срабатывают 2 цели: Copy-Any-Text и CopyMail

Мы великолепны – все цели настроены корректно!

Теперь мы не просто отслеживаем копирование важных элементов — мы видим, что именно копируют пользователи на нашем сайте. Это даёт мощную дополнительную аналитику:

• какие тексты или блоки вызывают интерес;
• какой текст чаще копируют;
• какие страницы чаще дают поведенческие сигналы.

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