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

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

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

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

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

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

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

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

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

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

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

Создаем JavaScript-событие

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

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

Добавляем код на сайт

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

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

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

Просмотр отчетов по кликам на email

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

С помощью Google Tag Manager

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

Настройка копирования email

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

Создание тега копирования email

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

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

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

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

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

Создание триггеров копирования email

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

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

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

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

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

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

Проверка и публикация

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

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

Настройка кликов по email

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

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

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

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

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

Не забудьте опубликовать все новые настройки (см. раздел «Проверка и публикация»).

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

Важно: с 1 июля 2024 года старая версия Google Analytics (Universal Analytics) окончательно перестанет работать, поэтому мы описываем настройки для новой версии аналитики. Для тех, кто был знаком со старой версией, следует учесть, что теперь вместо «цели» в Google Analytics 4 применяется понятие «конверсия».

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

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

Настройка передачи события в Яндекс Метрику

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

Создаем новый тег

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

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

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

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

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