Подмена номера телефона на сайте по utm-меткам с помощью GTM

Получил запрос сделать специфическую подмену номера телефона на сайте. На сайт идёт слабый рекламный трафик, коллтрекинг не используется, выводится только один статический номер телефона. Запущены несколько рекламных кампаний в поиске на 2 услуги. За каждую услугу ответственен свой менеджер, а значит посетителям из рекламы нужно показать разные номера телефонов в зависимости от того, по какой услуге они зашли на сайт. Во всех остальных случаях нужно оставить номер по умолчанию.

Поскольку в кампаниях нет мешанины (каждая РК рекламирует одну конкретную услугу), номер для показа буду определять исходя из метки utm_campaign. Настройку подмены номера выполню через Google Tag Manager.

Настройка переменных

Определим 3 пользовательские переменные. Я назвал их utm_campaign, changed_phone и cookie_changed_phone.

Переменная с названием рекламной кампании

1. Переменная utm_campaign будет захватывать из URL значение метки кампании. Тип переменной — URL, тип компонента — Запрос, ключ запроса — utm_campaign.

Воспользуюсь отчётом «utm-метки» в Яндекс.Метрике, чтобы достоверно определить метки активных рекламных кампаний. С такими метками сейчас приходит рекламный трафик на сайт.

Переменная с подменным номером телефона

2. Переменная changed_phone будет определять, какой номер телефона подставить при визите с той или иной utm-меткой. Тип переменной — таблица поиска; входная переменная — ранее созданная {{utm_campaign}}. Таблица поиска будет определять соответствие «кампания — номер телефона».

Переменная для хранения подменного номера в cookie

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

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

Сохранение данных о utm_campaign в cookie

Сайт многостраничный, а это значит, что utm-метка исчезнет из адреса, если пользователь перейдёт на другую страницу сайта. Нам нужно, чтобы вне зависимости от этого подменный номер закреплялся, как минимум, за текущим визитом. Поэтому настраиваем сохранение utm_campaign в cookie. Для одностраничных лендингов рекомендую выполнить эту же настройку, т. к. пользователь в процессе работы с лендингом может скинуть utm-метки из адреса.

Если пользователь пришёл на сайт по URL с меткой utm_campaign (другими словами, если переменная utm_campaign определена, т. е. не равна undefined), то в cookie нужно записать значение подменного номера. Настраиваем соответствующий триггер на просмотр страницы.

При срабатывании триггера utm_campaign exists выполним запись подменного номера в cookie. Запишем его в куки-переменную cookie_changed_phone, используя скрипт. Будем хранить cookie 7 дней (а это 604800 секунд), добавив к скрипту параметр max-age=604800.

Записывать подменный номер будем в переменную через document.cookie.

<script>
  document.cookie = "cookie_changed_phone={{changed_phone}}; max-age=604800; path=/";
</script>

• max-age=604800 — срок хранения cookie в секундах (7 дней); можете установить своё значение, например, 86400 для 1 суток
• path=/ позволяет хранить переменную в рамках всего сайта; без этого параметра cookie была бы доступна только в пределах страницы, на которой произошло срабатывание скрипта.

Если у вас есть поддомены, куда пользователь может переходить в рамках визита, и вам нужно сохранять подменный номер также и в рамках поддоменов, используйте параметр domain=.site.ru, указав вместо site.ru адрес вашего основного домена:

<script>
  document.cookie = "cookie_changed_phone={{changed_phone}}; max-age=604800; domain=.site.ru; path=/";
</script>

Настраиваем триггер, который проверит, есть ли в cookie переменная cookie_changed_phone. Если есть — произведём подмену номера. Для корректной работы подмену важно выполнять, когда HTML-код страницы уже обработан, поэтому в качестве типа события для триггера выбираем вариант «Модель DOM готова».

Скрипт подмены номера

Создаём тег подмены номера, срабатывающий при вышеуказанном триггере.

Способ 1. Поиск заменяемых номеров по селекторам

Этот способ может не работать на некоторых сайтах, и я не разбирался, с чем это связано =). На этот случай я просто придумал способ 2 (см. ниже).

<script>
	//Подменяем отображаемый на сайте номер телефона
	document.querySelector("СЕЛЕКТОР HTML-ЭЛЕМЕНТА С НОМЕРОМ ТЕЛЕФОНА НА САЙТЕ").innerText = {{cookie_changed_phone}};

	//Также подменяем номер телефона в ссылке, если он кликабельный
	document.querySelector("body > header > div > div > div > div.col-lg-3.col-md-3.col-sm-3.col-xs-12 > div > div > a").href = "tel:"+{{cookie_changed_phone}};
</script>

Селектор элемента с номером телефона легко скопировать с помощью панели разработчика браузера (F12, либо клик ПКМ на номере телефона => «Просмотреть код»).

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

Способ 2. Поиск заменяемых номеров по наличию «tel:» в ссылках

На случай, если первый способ оказался нерабочим в вашем случае, предлагаю второй вариант скрипта для поиска подменяемых телефонов на сайте.

<script>
// Получаем новый номер телефона из пользовательской переменной
var newPhoneNumber = {{cookie_changed_phone}};

// Получаем все элементы с номерами телефонов
var phoneElements = document.querySelectorAll('a[href^="tel:"]');

// Проходим по каждому элементу и меняем его содержимое
for (var i = 0; i < phoneElements.length; i++) {
    var element = phoneElements[i];
    element.textContent = newPhoneNumber;
    element.setAttribute('href', 'tel:' + newPhoneNumber.replace(/[^0-9]/g, ''));
}

</script>

Проверяем результат

В режиме предварительного просмотра GTM заходим на сайт, добавив к адресу сайта ?utm_campaign=[id кампании], проверяем подмену и сохранение подменного номера при переходах на другие страницы сайта.