Отслеживание копирования текста на сайте
Сегодня я хочу поделиться с вами своим новым скриптом, с помощью которого можно отслеживать событие копирования текста на вашем сайте, а также определить, какая именно информация была скопирована. С помощью такой настройки вы добавите еще один метод к набору инструментов для анализа контентных (и не только) ресурсов. Данную настройку достаточно просто выполнить, на реализацию не понадобится много времени. Кроме того, основное удобство в том, что не нужно привлекать никакие дополнительные инструменты, отслеживаемые данные будут доступны в привычном интерфейсе Google Analytics.
Описание скрипта
Опишу принцип работы скрипта.
С помощью метода addEventListener() регистрируем обработчик события копирования. В теле самого обработчика определяем выделенный в данный момент текст на странице и сохраняем его в переменную selected_text, удалив для читабельности переносы строк. Далее я осуществляю обработку выделенного фрагмента: если в тексте более 50 символов, берем лишь первые и последние 20 символов с помощью функции substring; в противном случае оставляем текст неизменным. В массив dataLayer передаем значение переменной selected_text и событие copy.
Код
<script>
document.addEventListener('copy', function (e) {
selected_text = window.getSelection().toString().replace("\n", ' ');
l = selected_text.length;
if (l > 50) {
selected_text = selected_text.substring(0, 20) + ' ... ' + selected_text.substring(l-20, l);
}
dataLayer.push({'selected_text':selected_text,'event':'copy'});
});
</script>
Настройки в Google Tag Manager
- Создаем новый тег в GTM типа “Пользовательский тег HTML” и копируем в текстовое поле приведенный выше код.
- Создаем триггер типа “Просмотр страницы — Модель DOM готова”. Он будет выступать правилом активации для пользовательского тега.
- Создадим пользовательскую переменную типа “переменная уровня данных” с именем “selected_text”.
Значение этой переменной мы сможем передавать в Google Analytics, например, при отправке события копирования.
- Добавим новый тег “Universal Analytics”. В параметрах события указываем переменную “selected_text”. Мне удобно анализировать такие данные в разрезе страниц, поэтому в атрибуте “Категория” я добавляю “Page Path”. Для того, чтобы легко отфильтровать данные только по событиям копирования, в начало параметров “Категория” и “Действия” я добавила “copy — ”. Вы же можете передавать те данные, которые удобно вам.
Обращаю ваше внимание на опцию “Не взаимодействие”. Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение “false” для этого параметра. В противном случае – устанавливайте значение “true”.
- В качестве условия активации этого тега добавляем новый триггер типа “Пользовательское событие”. В поле “Имя события” прописываем событие “copy”.
Для того, чтобы убедиться в корректности наших настроек, воспользуемся отладчиком GTM.
Для случая, когда копируемый текст более 50 символов, также все передается корректно.
Данные в отчетах Google Analytics
Включив в отчет по событиям данные, содержащие “copy -”, можно отфильтровать только события копирования. А выбрав в качестве дополнительного параметра категорию события, легко установить соответствие между скопированным текстом и конкретной страницей, с которой он был взят.
Выполнив всего несколько простых действий, описанных выше, вы сможете отследить, какую информацию копируют с вашего сайта. Надеюсь, моя статья будет полезной для вас! Еще об аналитике контентных ресурсов.
Спасибо! Всё работает 🙂
Добрый день Анастасия. А как отследить конкретно один элемент который копируют. Например нужно отследить копирование не всего текста а только емаил. Спасибо 🙂
Добрый день, Илья.
В триггере copy нужно указать дополнительное условие. Выбрать переменную selected_text в выпадающем списке, тип соответствия и значение, которое должен скопировать пользователь, чтобы тег сработал. http://prntscr.com/k7dfgo
Удачи!)
Дякую Анастасіє, стаття дуже корисна. Прочитав кілька Ваших матеріалів — і я в захваті, все ясно та доступно. Не втримався, та пишу коментар, щоб Вас похвалити;)
Дякую, менi дуже приємно=)
А можно в этот скрипт добавить, чтобы он отслеживал ip адрес с какого адреса человек копировал текст. А то у меня воруют текст с сайта, так хотя бы банить можно. Мешать им воровать.
Николай, добрый день!
Да, вы можете модифицировать скрипт соответственно вашим потребностям.
Спасибо! Сделал всё как написано — получилось, работает и радует глаз ))
Возможно у кого то возникнет проблема с этапом 4. Там нужно указать идентификатор вашего счетчика GA. На скриншоте выше, идентификатор задан через переменную (которой у вас может и не быть).
Ещё раз, спасибо автору! Всем высоких конверсий!
https://uploads.disquscdn.com/images/f04b952bc326c997e2ff90e89359c7dcfb65107cf77211a9568fd5ca18e4d4b5.png
Пожалуйста! А мне то как радует глаз — смотреть на свою работу в действии=))
В отладчике GTM происходит событие при копировании, однако отображается все это довольно странно, в частности там, где должен быть номер аккаунта — отображается скопированный текст: https://cloud.mail.ru/public/4Evm/gKsEFGd7U
И после сохранения версии контейнера в Analytics в режиме реального времени никаких событий не отображается. В чем может быть дело?
К сожалению, не сработало. В отладчике пусто http://clip2net.com/s/3ELm09p
Добрый день, Альбина!
Давайте разберемся, в чем может быть проблема. Чтобы я могла Вам помочь, опишите свои шаги по настройке, желательно с примерами скриншотов.
Тут есть минус. Если установлен скрипт, который добавляет: «подробнее тут (адрес сайта)». Тогда в GA тянется начало скопированного текста и конец урла, который добавляется при копировании
Спасибо за статью.
Позволите небольшое дополнение.
Если у Вас не GTM а классический GA, просто разместите на сайте:
document.addEventListener(‘copy’, function (e) {
selected_text = window.getSelection().toString().replace(«\n», ‘ ‘);
l = selected_text.length;
if (l > 50) {
selected_text = selected_text.substring(0, 20) + ‘ … ‘ + selected_text.substring(l-20, l);
}
ga(‘send’, ‘event’, ‘Копирование’, document.location.pathname , selected_text, l);
});
Событие будет: Копирование, адрес страницы, где происходит копирование и сам текст…
А в качесте ценности события будет количество скопированного текста. Тоже иногда полезно (скопировали строчку или всю страницу…)
Юрий, спасибо! Хорошее дополнение.