Подмена номера телефона на сайте по 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}}. Таблица поиска будет определять соответствие «кампания — номер телефона».

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

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

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

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

При срабатывании триггера utm_campaign exists выполним запись подменного номера в cookie. Запишем его в куки-переменную cookie_changed_phone, используя следующий код (я решил не усложнять задачу расчётом времени визита, для простоты буду хранить cookie 1 сутки, а это 86400 секунд).

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

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

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

<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, либо клик ПКМ на номере телефона => «Просмотреть код»).

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

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

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