Как отслеживать на сайте клики по email и копирование адресов

Учитываем все ценные лиды в B2B

Как отслеживать клики по email-письмам

Хотя сегодня почти на каждом сайте есть формы обратной связи и онлайн-помощники, часть заявок (особенно в B2B) может попадать в компанию по старинке — по электронной почте. При оценке источников трафика, настройке рекламы и т. д. лучше учитывать такие конверсии наравне с другими. Для этого нужно отслеживать клики на ссылки mailto и копирования email-адресов с сайта. Рассказываю, как это сделать с помощью Яндекс Метрики и Google Tag Manager.

С помощью Яндекс Метрики

В Яндекс Метрике можно отследить как людей, которые кликают по вашим ссылкам-mailto, так и тех, кто просто копирует email — например, в разделе «Контактов», футере или другом месте.

Если вы еще не пользуетесь этой системой аналитики, нужно будет сначала установить на сайт счетчик. В журнале «Конверт» мы подробно разбирали, как подключить и настроить Яндекс Метрику.

Настройка цели «Клик по email»

Заходим в настройки счетчика и нажимаем «Добавить цель». В появившемся окне пишем название цели, выбираем тип условия «Клик по email» и указываем, отслеживать копирование всех адресов или только конкретного. Жмем кнопку «Добавить цель». Готово!

добавить цель

Также можно задать так называемую автоцель. В этом случае Метрика сама распознает электронные адреса по ссылкам mailto в коде. Для этого в настройках счетчика нужно только включить «Автоматические цели».

Настройка автоцелей в Метрике

Теперь, когда посетитель нажмет на ссылку с email на сайте, цель будет зафиксирована и появится в списке целей на вкладке «Цели».

Важно! Если у вас уже настроена цель «Клик по email», автоцель с таким же условием создать нельзя.

Настройка цели «Копирование email»

Чтобы отслеживать копирование электронного адреса в Метрике, нужно в настройках счетчика создать JavaScript-событие для определенного класса, потом в HTML прописать этот класс у ссылки email на сайте. Разберем пошагово, как это сделать.

Создание JavaScript-события. Заходим в настройки счетчика. Выбираем вкладку «Цели» и нажимаем кнопку «Добавить цель». 

В появившемся окне пишем название цели и выбираем тип условия — JavaScript-событие. Обязательно указываем идентификатор цели, например, copy_email. Нажимаем кнопку «Добавить цель».

Добавление цели типа JS-событие

Добавление кода на сайт. Далее на сайте — в том месте, где установлен счетчик Метрики — добавляем следующий код:

<script>

$(".copymail").bind('copy', function() {

console.log("1");

yaCounterXXXXXXXX.reachGoal('copy_email');

return true;

});

</script>

где XXXXXXXX — номер вашего счетчика, ‘copy_email' — идентификатор цели, который вы указывали на предыдущем шаге, а “copymail” — название класса для HTML-элемента.

Затем на сайте (там, где указан электронный адрес) в HTML-код нужно добавить тег с указанием класса (в нашем случае это «copymail»). Например, вот так:

<div class="copymail">mail@site.ru</div>

Просмотр отчетов по кликам на email. Посмотреть статистику по достижениям всех созданных целей можно в отчете «Конверсии». Подробнее, как это сделать, можно узнать в нашей статье про цели в Яндекс Метрике. Также показатели, связанные с новыми целями, можно использовать и в других отчетах.

С помощью Google Tag Manager

Отследить клики на email, копирование адресов и многие другие вещи можно совсем без изменений в HTML-коде — это позволяет делать Google Tag Manager. В журнале «Конверт» уже рассказывали, как установить и начать пользоваться GTM.

Внимание! В соответствии с современным российским законодательством использование иностранных систем аналитики (в частности, Google Tag Manager и Google Analytics) относится к трансграничной передаче данных. C 2025 года Роскомнадзор требует обязательных уведомлений об использовании на сайте таких метрик. Вот, как это правильно сделать.

Отслеживание копирования email

Чтобы передавать данные о событиях из Tag Manager в Analytics, нужно настроить два тега. Один обеспечивает передачу данных из Tag Manager, второй позволяет настраивать события, не меняя код сайта.

Создание тега копирования email. Заходим в Google Tag Manager, выбираем аккаунт, в рабочей области нажимаем «Новый тег».

Рабочая область GTM

В появившемся окна заполняем название тега, в «Конфигурации тега» выбираем «Пользовательский HTML».

Создание тега в GTM

Откроется новое окно.

Пользовательский HTML в GTM

В верхнем блоке «Конфигурация тега» вставляем следующий код:

<script>

var c = document.getElementsByTagName("a");

for(var i = 0; i < c.length; i++) {

    if((typeof(c[i]) !== undefined) && (c[i].href.indexOf('mailto') !== -1)) {

        c[i].addEventListener('copy', function(evt) {

            dataLayer.push({

            'event': 'copyText', 

            'copy-class' : evt.target.className

            });

        });

        c[i].addEventListener('contextmenu', function(evt) {

            dataLayer.push({

            'event': 'rightClick', 

            'copy-class' : evt.target.className

            });

        });

    }

}

</script>

Переходим в нижний блок «Триггеры», выбираем «All Pages». Нажимаем «Сохранить».

Выбор триггеров для тега

Затем, чтобы всё работало, необходимо создать триггер копирования email. В рабочей области переходим в раздел «Триггеры» и нажимаем кнопку «Создать».

Создание нового триггера GTM

В появившемся окне пишем понятное имя триггера, например «Клик по ссылке» и в поле «Настройка триггера» выбираем тип триггера — «Специальное событие». Пишем название события — rightClick, ставим галочку «Некоторые специальные события» и добавляем условие: «Event содержит RightClick». Нажимаем кнопку «Сохранить».

Настройка триггера (специальное событие) в GTM

После этого создаём ещё один триггер — для отслеживания копирования email — по аналогии. Выбираем тип триггера «Специальное события», в названии события указываем «copyText», ставим галочку «Некоторые специальные события» и условие: «Event содержит copyText». Нажимаем «Сохранить».

Настройка триггера (специальное событие) в GTM

Создание тега для отправки данных в GA4. Создаем новый тег. В появившемся окне в верхней части «Конфигурация тега» выбираем «Google Аналитика», потом «Событие GA4». Идентификатор потока данных копируем из Google Analytics. Название события пишем сами, оно потом будет отображаться в Analytics в отчетах.

В нижней части окна выбираем триггеры, которые мы создали на предыдущем шаге. 

Настройка тега для данных в GA

Проверка и публикация. Для проверки выберите на вкладке «Теги» созданный вами тег и нажмите «Предварительный просмотр». Нужно будет указать URL вашего сайта, чтобы система подключилась. Затем на сайте сделайте клик по электронному адресу. Проверить детали можно на вкладке «Теги».

Чтобы все новые настройки Google Tag Manager работали, необходимо их опубликовать. Для этого в рабочей области нажимаем синюю кнопку «Отправить». В появившемся окне — кнопку «Опубликовать». Описание контейнера можно пропустить, затем нажимаем «Далее». Готово! Данные появятся в системе аналитики через 1–2 дня.

Отслеживание кликов по email

Чтобы отследить клики по электронному адресу, нужно создать ещё один тег и настроить отчеты в Google Analytics 4. (В журнале «Конверт» также можно почитать статью для начинающих о том, как работать с GA4.)

В рабочей области создаем новый тег. В появившемся окне в верхней части «Конфигурация тега» выбираем «Google Аналитика», потом «Событие GA4». Идентификатор потока данных — копируем из Google Analytics. Название события пишем сами, оно потом будет отображаться в интерфейсе GA.

Конфигурация тега «Клики по email»

В нижней части окна добавляем триггер. Выбираем тип триггера «Только ссылки», задаём ему понятное имя.

Выбор типа триггера

В настройках триггера выбираем «Некоторые клики по ссылкам». Задаём условие «Click URL содержит mailto». Либо можно указать конкретный электронный адрес.

Настройка триггера в GTM

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

Сохранение триггера и тега

Не забудьте опубликовать все новые настройки — так, как это описано в предыдущем разделе по отслеживанию копирования email.

Настройка конверсии в Google Analytics. Если вы хотите, чтобы созданные события по кликам и копированиям email автоматически засчитывались как конверсии, требуется дополнительная настройка. Для начала необходимо перейти в «Отчеты» — «События» — «Все события». У события, которое вы создали в Tag Manager, необходимо будет включить переключатель «Отметить как конверсию».

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

Как объединить данные из Google Tag Manager и Яндекс Метрики

Из Google Tag Manager можно передавать данные не только в Google Analytics, но и в Яндекс Метрику  — тогда в Метрике у вас будет полная картина кликов и копирований, зарегистрированных GTM. Для этого необходимо создать новый пользовательский тег и настроить цель в Метрике.

Создание тега для передачи данных

В разделе «Теги» создаем новый тег. Тип тега выбираем «Пользовательский HTML». В конфигурации тега в пустую область вставляем следующий код:

<script type="text/javascript">

 yaCounterXXXXXXXXX.reachGoal('copy_email');

</script>

где XXXXXXXXX — номер счетчика Метрики, а 'copy_email' — идентификатор события, задаете его сами.

Ниже в блоке «Триггеры» выбираете два ранее созданных триггера — «Выделение email» и «Клик по email». Нажимаете кнопку «Сохранить».

Настройка передачи в Метрику

Настройка цели в Яндекс Метрике

В Метрике выбираем нужный счетчик, переходим в его настройки. В разделе «Цели» добавляем новую цель. Выбираем тип условия «JavaScript-событие». Обязательно указываем идентификатор цели, он должен совпадать с тем, который мы прописали в Tag Manager на предыдущем шаге. Жмем «Добавить цель» — готово!

Добавление новой цели в Метрике

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

«Честно» — рассылка о том, что волнует и бесит

Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.

Наш юрист будет ругаться, если вы не примете :(
Нажимая «Подписаться», я принимаю Правила использования и подтверждаю, что ознакомлен с Политикой обработки персональных данных.
🔮 Создать письмо