Яндекс Целевой звонок своими руками с помощью Google Tag Manager
https://telegram.me/ppclifehacksЭтот лайфхак является логическим продолжением инструкции по подмене контента на сайте с использованием 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, вводим наш домен, переходим по ссылке и проверяем. Если номера поменялись, то выключаем предварительный просмотр и публикуем изменения.
Вот и всё!
Изменяйте этот метод на свой вкус.
Всё вышеописанное предоставляется как есть, используйте на свой страх и риск.