Яндекс Целевой звонок своими руками с помощью Google Tag Manager

Подписывайтесь на мой канал в Телеграме t.me/ppclifehacks — лайфхаки и решения проблем из PPC и веб-аналитики: как собрать свой коллтреккинг на коленке, устроить вечную рекламную акцию или правильно отследить заполнение AJAX-форм на сайте. Всё это и другие статьи в канале и этом блоге.

Этот лайфхак является логическим продолжением инструкции по подмене контента на сайте с использованием Google Tag Manager.

В качестве примера мы будем подменять два телефонных номера на одной странице в зависимости от поисковой системы, с которой пришёл пользователь. Ограничимся только Google и Яндексом. Обратите внимание, у рекламы тоже может быть аналогичный реферер, но для примера вполне подойдёт. Если хотите делать подмену по utm-метке — смотрите инструкцию по ссылке в первом абзаце.

Возьмём распространённую схему посадочной страницы:

<html>
<body id="mybody">
<p class="phone upper">8–800–000–00–00</p>
….
<p class="phone lower">8–800–000–00–00</p>
</body>
</html>

Здесь нам нужно обратить внимание на идентификатор у BODY (mybody) и на то, что один из классов у обоих номеров телефона одинаков (phone).

В вашем частном случае структура может быть иной, например у body не будет идентификатора, но будет у div, внутри которого находятся оба тега с номером телефона, или вообще не будет — самое главное, что при использовании этой инструкции элементы для замены должны быть внутри одного тега с ID. Если не получается, но у элементов для замены есть свои ID — в шаге №2 модифицируйте скрипт из этой инструкции.

Создаём переменные в Google Tag Manager

Переходим в раздел “Переменные” и нажимаем на “Создать” в пользовательских переменных

Создаём переменную типа “Источник ссылки HTTP”, в неё будет записываться источник визита, выбираем тип компонента “Имя хоста”, ставим галочку “Убрать www.” и называем переменную seoreferer:

Создаём вторую переменную типа “Таблица поиска”. В качестве входной переменной выбираем нашу первую переменную seoreferer. Во входные данные вносим домены поисковых систем, а в результат соответствующие номера для подмены. Не забудьте установить значение по умолчанию.

2. Создаём тег, который будет менять номер телефона

Заходим в раздел “Теги” и создаём новый тег:

Называем его как нам удобно, выбираем тип тега “Пользовательский HTML” и вставляем следующий код:

<script type="text/javascript">
var x = document.getElementById("mybody");
x.getElementsByClassName("phone")[0].innerHTML = "{{content}}";
x.getElementsByClassName("phone")[1].innerHTML = "{{content}}";
</script>

Обратите внимание, в коде мы использовали наш ID элемента body из первого шага — mybody, и название общего класса для двух номеров phone, а также указали переменную content. Если у вас другие значения, то код нужно поправить. Если у вас больше 2 номеров, то соотв. добавляем нужно количество строк:

x.getElementsByClassName("phone")[N].innerHTML = "{{content}}";

Далее выбираем триггер — чтобы скрипт срабатывал на всех страницах, нужно выбрать All Pages, в ином случае сделайте триггер на нужные вам страницы.

В итоге должно получиться так:

3. Проверяем, сохраняем

Для проверки запускаем предварительный просмотр:

Возьмите за правило перед публикацией изменений проверять корректность работы

Открываем в соседней вкладке Яндекс или Google, вводим наш домен, переходим по ссылке и проверяем. Если номера поменялись, то выключаем предварительный просмотр и публикуем изменения.

Вот и всё!

Изменяйте этот метод на свой вкус.

Всё вышеописанное предоставляется как есть, используйте на свой страх и риск.

Другие лайфхаки на нашем канале https://telegram.me/ppclifehacks

Если вы хотите отблагодарить автора, то сделать это можно по ссылке: http://yasobe.ru/na/ppclifehacks

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.