Бесплатный email трекинг своими руками через GTM

Думаю, что все уже умеют отслеживать клики по email. Однако на этом обычно отслеживание этого канала и заканчивается. Некоторые сервисы, вроде calltouch и манго предлагают услуги emailtracking’a, но малый бизнес не всегда готов со старта пользоваться их услугами. Для тех, кому бюджет не позволяет использовать платные решения, я предлагаю два дополнительных варианта отслеживания этого канала связи.

Во избежание обмана ожиданий читателей сразу предупреждаю, что первый вариант предложит дополнительно охватить к кликам тех, кто копирует email (как оказалось, об этой фишке тоже знают не многие). Второй подход я вообще еще ни у кого не встречал в открытом доступе, поэтому буду считать себя автором «проброса clientID в тему email письма». Таким образом, второй вариант подойдет тем, у кого есть crm (amo, bitrix 24 или любая другая, интегрированная с системами аналитики) или подключены сервисы связок (albato, apimonster и д.р.). Как с помощью таких сервисов спарсить из темы письма client ID закинуть в аналитику, думаю знаете и без меня. Если нет, пишите комментарии, раскрою тему.

Способ 1. Отслеживаем копирование email с помощью менеджера тегов и отправляем в аналитику

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

А теперь к цифрам. Сколько же вы теряете clientID для обучение рекламы, если не отслеживаете копирования email? Ниже скрин из метрики именно от строительного подрядчика:

Ради справедливости отмечу, что есть ниши, в которых показатели зеркальные, но даже 3 конверсии терять — плохая идея.

Итак, начинаем с того, что создаем тег с типом «Пользовательский HTML» и произвольным именем и вставляем в него вот такой код:

<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': 'copy_email', 
            'copy-text' : evt.target.text
            });
        });
        c[i].addEventListener('contextmenu', function(evt) {
            dataLayer.push({
            'event': 'rClick_email', 
            'copy-text' : evt.target.text
            });
        });
    }
}
</script>

Триггер для активации скрипта должен быть «Все страницы». В Tag Manager это будет выглядет так:

Скрипт слушает два вида событий на сайте:

• копирование ссылок, содержащих mailto (ну или по простому копирование email) через ctrl + c. Если событие случилось, то на уровень данных отправляется событие copy_email и переменная copy-text с текстом скопированного email (полезно, если у вас их несколько);
• открытие контекстного меню ссылки, содержащей mailto. Обычно это делают при попытке скопировать email через меню браузера. При этом на dataLaeer отправляется событие rClick_email и уже знакомая нам переменная copy-text.

Далее создаем триггер, который будет слушать появление событий rClick_email и copy_email. Его мы будем использовать для отправки конверсий в Метрику и Analytics.

• тип триггера — «специальное событие»;
• название события — rClick_email или copy_email.

Вы можете создать один триггер, использую режим регулярных выражений и перечисление событий через прямую черту «|», либо создать два триггера для rClick_email и copy_email отдельно. В GTM будет так:

Далее создаем тег «Пользовательский HTML» для Яндекс Метрики и тег «Google Analytics: событие GA4». Триггером у обоих тегов будет тот, что мы недавно создали. Напоминаю, что код для отправки цели в метрику выглядит так:

<script>
	ym('{{YM-number}}', 'reachGoal', 'email_copy');
</script>

вместо {{YM-number}} вставьте свой код счетчика. Кстати, лично я использую в GTM переменную типа константа с именем YM-number и вставляю её в тег, как написано в примере выше, а не вставляю номер напрямую. У такого подхода есть явный плюс — когда вы копируете контейнер GTM на другой аккаунт, вам нужно поменять код счетчика метрики только в одном месте (в переменной), а не лезть в +100500 тегов.

Пример тега отправки события в Google на скриншоте:

Не забудьте создать конверсии по отправляемым данным в системах аналитики.

Способ 2. Отправляем Client ID в теме email для дальнейшей маршрутизации

Передадим clientID в тему письма. Для этого сначала получим client ID. Для примера я опишу получение cid для Метрики, вариант для Google описан в этой статье. Первым делом создадим переменную в GTM:

• тип переменной — «Собственный код JavaScript;
• название — произвольное, например YA_CID};
• вставляем в нее код, который ниже.

function(){
var yaCID;
ym('{{YM-number}}', 'getClientID', function(clientID) { 
  yaCID = clientID;
});
return yaCID;
}

место {{YM-number}}’ опять вписываем свой код счетчика. Также хочу сделать комментарий, что это официальный способ из документации Метрики и я рекомендую использовать его, а не переменную типа файл cookie со значением  _ym_uid. Из кук clientID поступает в переменную раньше (уже при инициализации счетчика), а через официальный способ только после полной загрузки контента страницы, однако с куками сейчас есть проблемы и не известно через сколько месяцев/лет вам придется переделывать все свои контейнеры GTM. Так же официальный метод в любом случае лучше, т.к. Яндекс в теории может изменить название своей куки (хоть это и маловероятно) и не обязан ставить вас об этом в известность, а вот про официальный метод обязательно сообщит в рассылке заранее.

Теперь создадим триггер с типом «Просмотр страницы — Окно загружено». Обязательно проверьте, что в переменную с clientID к этому моменту успевают подгрузиться данные, иначе используйте триггер на более поздних стадиях. В качестве условия активации выбираем «Некоторые события» и проверяем по регулярному выражению, что в переменной с clientID находятся от 15 до 25 цифр (рег. выражение — \d{15,25}). В GTM выглядит так:

Теперь создаем тег. Для этого, нам придется применить подход, который я уже описывал в своей статье по отправке client ID в whatsapp с небольшой модернизацией. Конечный скрипт будет выглядеть так:

<script>
  
  var emailLink = document.querySelectorAll('a[href^="mailto:"]');
  emailLink.forEach(function(link)
    {
    link.setAttribute('href', 'mailto:info@zurov.ru?subject=[ID%20Обращения%20{{YA_CID}}].%20Тема:');
    }
  )
 
</script>

Поменяйте в скрипте info@zurov.ru?subject=[ID%20ООбращения%20{{YA_CID}}].%20Тема: на нужное вам значение. Чтобы понять смысл этой записи, давайте разберем её на составляющие:

• info@zurov.ru — email, который будет подставляться в поле «От» в почтовом клиенте посетителя сайта;
• ?subject= — это get параметр (аналог utm_меткпи) который передает тему письма;
• [ID%20ООбращения%20{{YA_CID}}].%20Тема — это тема письма, в которой содержится переменная менеджера тегов {{YA_CID}} (в ней clientID), а %20 — кодировка пробела в url коде.

После клика по email в почтовом клиенте тема письма будет выглядеть так:

Отмечу, что скрипт подойдет только в том случае, если у вас один и тот же email на всем сайте. Если email(ов) несколько и они разные, тогда используем такой скрипт:

<script>
  var emailElements = document.querySelectorAll('a[href^="mailto:"]');
  
  emailElements.forEach(function(emailElement) {
    var emailAddress = emailElement.getAttribute('href').replace('mailto:', '');
    
    var subject = '?subject=[ID%20Обращения%20{{YA_CID}}].%20Тема:';
    var newEmailAddress = 'mailto:' + emailAddress + subject;
    
    emailElement.setAttribute('href', newEmailAddress);
  });
</script>

По аналогии, в нем нужно поменять то, что хотите видеть в теме письма и название переменной с clientID (хотя, если делали переменную с таким именем, как я писал выше, то в этом скрипте можно вообще ничего не менять).

Вставляем один из этих скриптов в тег типа «Пользовательский HTML». Привязываем к нему триггер, который создали шагом ранее и на этом все. Скрин из GTM ниже:

Если хотите проверить как это работает — кликните по email на этом сайте. Далее вам уже нужно будет придумать каким образом использовать clientID переданный с письмом. Варианты я описал в начале статьи.

Если статья была полезна, подпишитесь на канал в telegram. Туда 1-2 раза в месяц я отправляю уведомления о выходе новых статей. Чаще не получается, т.к. я не теоретик, а практикующий специалист. Если есть идеи по поводу новых статей, не стесняйтесь писать их ниже в комментариях. Я все читаю.