Подмена контента на сайте с использованием Google Tag Manager
Подписывайтесь на мой канал в Телеграме t.me/ppclifehacks — лайфхаки и решения проблем из PPC и веб-аналитики: как собрать свой коллтреккинг на коленке, устроить вечную рекламную акцию или правильно отследить заполнение AJAX-форм на сайте. Всё это и другие статьи в канале и этом блоге.
Ранее мы рассматривали как подменять контент на сайте в зависимости от параметра URL с использованием PHP, ниже инструкция как сделать это практически без вмешательства в исходный код сайта.
Но одно изменение нам всё же сделать нужно, а именно добавить ID элементу, который мы будем менять. И, конечно, нужно установить Google Tag Manager, если у вас его ещё нет.
В нашем примере мы будем менять заголовок посадочной страницы.
1. Небольшие изменения в коде страницы
Находим наш заголовок. Допустим, он выглядит так:
<h1>Купите слона!</h1>Если у тега нет id, то нужно его добавить:
<h1 id="mytitle">Купите слона!</h1>Если есть, то ничего менять не нужно.
2. Создаём переменные в Google Tag Manager
Переходим в раздел “Переменные” и нажимаем на “Создать” в пользовательских переменных
Создаём переменную типа URL, в неё мы будем помещать значение параметра URL (UTM-метки), выбираем тип компонента “Запрос” и назовём переменную urlparam:
В нашем примере мы будем получать информацию из метки utm_content, её и нужно указать как ключ запроса, но вы можете использовать любую
Создаём вторую переменную типа “Таблица поиска”. В качестве входной переменной выбираем нашу первую переменную urlparam. Во входные данные вносим те значения, которые передаются в параметре utm_content, а в результат наш новый заголовок. Не забудьте установить значение по умолчанию.
Эта переменная будет сопоставлять данные из параметра URL (метки) и присваивать переменной content нужный текст заголовка. Впоследствии менять заголовки можно будет редактируя эту переменную.
2. Создаём тег, который будет менять контент
Заходим в раздел “Теги” и создаём новый тег:
Называем его как нам удобно, выбираем тип тега “Пользовательский HTML” и вставляем следующий код:
<script type="text/javascript">document.getElementById("mytitle").innerHTML="{{content}}";</script>
Обратите внимание, в коде мы использовали наш ID элемента из первого шага — mytitle, а также указали переменную content. Если вы назовёте их по-другому, код нужно поправить.
Далее выбираем триггер — чтобы скрипт срабатывал на всех страницах, нужно выбрать All Pages, в ином случае сделайте триггер на нужные вам страницы.
В итоге должно получиться так:
3. Проверяем, сохраняем
Для проверки запускаем предварительный просмотр:
Возьмите за правило перед публикацией изменений проверять корректность работы
Открываем в новой вкладке наш сайт с тестовым параметром, например:
http://site.ru/?utm_content=slony_moscowЕсли заголовок поменялся, то выключаем предварительный просмотр и публикуем изменения.
Вот и всё!
Изменяйте этот метод на свой вкус.
Всё вышеописанное предоставляется как есть, используйте на свой страх и риск.
Другие лайфхаки на нашем канале https://telegram.me/ppclifehacks
Если вы хотите отблагодарить автора, то сделать это можно по ссылке: http://yasobe.ru/na/ppclifehacks