Как отслеживать копирование E-mail с помощью Google Tag Manager

Константин Булгаков
Константин Булгаков
18 Янв.2019
Чтобы точно оценить эффективность интернет-маркетинга необходимо анализировать все точки контакта с аудиторией. В этой статье мы настроим отслеживание копирования электронного адреса и передадим событие в Яндекс.Метрику и Google Analytics.

Коллеги, в прошлой статье я рассказал как отслеживать копирование E-mail на сайте с помощью несложного скрипта и небольшого изменения HTML тегов на посадочной странице сайта.

Предыдущий способ я считаю самым простым и понятным.

Однако, передавать данные в Яндекс.Метрику и Google Analytics можно и другим способом. Если вы используете в своей работе Google Tag Manger, то настроить передачу события можно через специальные теги, не заморачиваясь на редактирование верстки.

Важно! Перед тем как начинать настройку отслеживания, убедитесь, что на сайте установлен Google Tag Manager.

Шаг №1. Создание пользовательского HTML тега

  • Войдите в Google Tag Manager и выберите рабочий аккаунт для начала работы;
  • Откройте Рабочую область и в левой части выберите меню Теги;
  • Создайте новый тег и выберите из предложенного списка Пользовательский HTML.

Добавляем в пустую область следующий Javascript код:

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

Именно этот JS и будет отвечать за отслеживание копирования нужных нам элементов на страницах сайта.

Называем новый Тег понятным именем и переходим в нижний блок Триггеры. Выбираем доступный стандартный триггер All Pages и нажимаем на кнопку Сохранить.

Если все сделали правильно, то по итогу настройка созданного тега будет выглядеть так:

Код отслеживания копирования адреса в теге

Далее нам требуется создать два триггера, которые будут активировать тег GTM при копирование электронного адреса или выделении адреса мышкой.

Шаг №2. Создание триггеров на копирование и выделение мышкой электронного адреса

Переходим к текущей рабочей области в раздел Триггеры и создаем новый.

Указываем название для триггера, например «Копирование Email мышкой».

  1. Тип триггера — Пользовательское событие;
  2. Имя события — rightClick и указываем Некоторые специальные события и добавляем условие;
  3. Event — содержит — rightClick, далее сохраняем изменения.

Триггер на копирование Email

Но это еще не все. На втором шаге создаем еще один триггер. Называем его «Выделение Email мышкой«, но вместо rightClick используем copyText.

Триггер копирования текста

Поздравляю! Основные настройки закончены. Теперь нам нужно настроить передачу события в Яндекс.Метрику и Google Analytics.

Шаг №3. Передача события в Яндекс.Метрику

Возвращаемся в раздел теги и создаем новый Пользовательский HTML тег.

Добавляем в пустую область нового тега следующий код:

<script type="text/javascript">
 yaCounterXXXXXXXXX.reachGoal('copy_email');
</script>

где XXXXXXXX — номер счетчика, а copy_email — идентификатор отслеживания события (задается произвольно).

В блоке Триггеры добавляем два ранее созданных триггера:

  1. Выделение Email мышкой;
  2. Копирование Email мышкой.

Получится примерно следующее:

Тег на копирование электронной почты

Теперь переходим в настройки счетчика Яндекс.Метрики.

Шаг №4. Настройка цели в Метрике

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

  1. Переходим в Яндекс.Метрику и находим в общем списке нужный счетчик;
    В разделе Настройки открываем вкладку Цели;
  2. Нажимаем на кнопку Добавить цель и указываем тип условия JavaScript-событие;
  3. Указываем на латинице в качестве идентификатора цели copy_email (указывали на предыдущем шаге в качестве идентификатора в JS коде);
  4. Жмем на кнопку Добавить цель.

Получится так:

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

Готово! Цель создана, теперь данные начнут подтягиваться в Яндекс.Метрику. В стандартном отчете Конверсии будет собираться статистика по выполненным целям. На выходе будет примерно такой отчет с количеством достигнутых целей и коэффициентов конверсии.

Отчет по конверсиям в Яндекс.Метрика

Далее на этих пользователей можно настроить ремаркетинг и показывать дополнительную рекламную информацию.

Шаг №5. Передача события в Google Analytics

  1. Переходим вновь в раздел Теги и создаем новый тег;
  2. Тип тега указываем Google Аналитика — Universal Analytics;
  3. В поле Тип отслеживания указываем Событие;
  4. В полях Параметры отслеживания событий указываем следующие значения: Категория — Copies, Действия — Email Copy, Ярлык — mailCopy.
  5. В поле Идентификатор отслеживания указываем ваш код отслеживания UA-XXXXXXXX-X (найти и скопировать его можно на уровне ресурса в Google Analytics в разделе Отслеживание — Код отслеживания);
  6. В блоке Триггеры выбираем два ранее созданных триггера с пользовательскими событиями;
  7. Добавляем понятное название для тега и нажимаем Сохранить;

Создание тега GA

С этим разобрались. Теперь нужно создать новую цель и передать данные в GA.

Шаг №6. Создание цели в Google Analytics

Переходим в аккаунт Google Analytics и выбираем нужное для работы представление. Рекомендую не использовать стандартное представление по умолчанию, а создать новое рабочее представление.

Выбираем пункт Цели в блоке Представление и нажимаем на красную кнопку Кнопка новая цель. Создание цели происходит в несколько несложных шагов. Давайте разберем последовательность подробно:

  1. На первом шаге создания цели указываем Собственная и нажимаем Далее;
  2. На втором шаге задаем понятное название цели и указываем тип цели Событие и нажимаем Далее;
  3. Третий шаг потребует от нас заполнение полей Категория — CopiesДействие — Email Copy, Ярлык — mailCopy.

Настройку новой цели можно посмотреть на скриншоте:

Настройка цели в Google Analytics для копирования электронного адреса

Если все указали корректно, то можно нажать кнопку Сохранить.

Дополнительных настроек больше не потребуется. Новая цель появится в списке, а данные начнут собираться примерно через 24 часа после создания.

Статистику по всем созданным целям можно посмотреть в стандартном отчете Конверсии -> Цели -> Обзор.

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

Шаг №7. Публикация настроек

Возвращаемся в Google Tag Manager. В правом верхнем углу нажимаем синюю кнопку Отправить. Далее нажимаем Опубликовать, описание версии контейнера можно пропустить — «Далее».

Готово! Наши настройки успешно переданы. Если вы не уверены, что все работает корректно, то просто перейдите в режим предварительного просмотра Диспетчера тегов и протестируйте работу каждого тега и триггера.

Все получилось?

Вы можете оставлять ваши вопросы в комментариях или писать прямо на электронную почту info@konstantinbulgakov.com. По мере наличия свободного времени, буду стараться отвечать на запросы.

Как отслеживать копирование E-mail с помощью Google Tag Manager: 11 комментариев

  1. А если следовал инструкции, а цели в итоге не работают? Что могло произойти?

    1. Оксана, здравствуйте! Метод использовал неоднократно для разных проектов — все передавалось корректно. Я бы советовал перепроверить настройки для GTM и в системах аналитики.

    2. Оксана, здесь не написано, что нужно скопировать javascript-код из googleTagManager и вставить в шаблон сайта (если CMS). Проверьте, добавлен ли этот код.

      Спасибо за статью. Без такой чёткой структуры что-куда нажимать новичку не вариант самостоятельно выполнить.

  2. Добрый день, Константин!
    При копировании email из блока меню цель отправляется в YM корректно, но при копировании из блока контакты событие не отправляется.

    Может есть решение для данной ситуации?

    Подскажите пожалуйста, как правильно продублировать в GA?

    Спасибо за статью!

    1. Никита, здравствуйте!
      Дополнил статью необходимой для ваших задач информацией.
      Посмотрите, пожалуйста.
      Насчет Яндекс.Метрики не все понял из вашего комментария, можете написать подробнее?

  3. Заказывал настройку данной функции у Константина, сделал все быстро.
    Функция работает, спасибо за работу.

  4. Статья дельная, спасибо.
    Хотелось бы отметить, что не всегда люди копируют email, и цель порой нужно устанавливать на кликание по mailto тоже, поскольку почтовый агент позволяет сразу отправлять письмо.

    1. Здравствуйте! Спасибо за комментарий. Да, все верно, но какой процент пользователей использующих почтовые агенты?

      Такое условие отследить еще проще, достаточно в Google Tag Manager настроить тип триггера «Клик по элементу» и указать точное вхождение почтового адреса в условиях активации тега. Если такая задача актуальна, то могу подготовить отдельный материал с подробной инструкцией.

  5. Класс, все работает, спасибо большое! А что надо в скрипте поменять, чтоб например можно было таким же образом отслеживать выделения адреса на сайте и номера телефона?

  6. Чтобы отслеживать копирование номеров телефонов нужно делать по аналогии (как в случае отслеживания копирования почты), но с небольшими корректировками:

    1. Создать два новых триггера по аналогии, но с другими названиями, например: http://joxi.ru/bmoKNbBF7Go4Nm и http://joxi.ru/eAOOy65I68EXKA
    2. Откорректировать скрипт http://joxi.ru/Rmzy6QvCjxGP5r , где «tel» — нужно вписать именно так, а названия событий прописать так, как вы их назвали в пункте 1.
    3. Создать теги по аналогии как для отслеживания копирования почты, но с триггерами из пункта 1.

    Если есть вопросы, пишите в Инсте dozhdikovainna

Добавить комментарий для Игорь Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *