Подмена контента на сайте с использованием 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

One clap, two clap, three clap, forty?

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