Динамічний контент Перетворюємо один лендинг на кілька

Яна Троїцька

Продаюча сторінка (лендінг) зазвичай присвячена лише одній послузі. Коли послуг кілька, найочевидніше рішення — кілька лендінгів. Але це з'їдає час, гроші та терпіння — особливо коли нова послуга є тимчасовою або сезонною.

Конверсію підвищить динамічний контент, який дозволить змінювати заголовки, текст, кнопки та зображення залежно від потреб користувача.

В інтернеті є сервіси, які додадуть на сайт динамічний контент автоматично, але за кругленьку суму. А я розповім, як це зробити самостійно, безкоштовно, без реєстрації та СМС.

Але тут ви запитаєте мене…

Яна, а динамічний контент – це взагалі легально?

перетворюємо

Тих, хто хоче створити динамічний лендинг, нерідко зупиняє страшне слово "клоакінг" (ні, не від слова "клоака", наголос на перший склад). Це один із прийомів чорного SEO: людина бачить одну інформацію, а пошуковий робот – іншу. Погано виходить.

Скажу одразу: динамічні лендинги не мають до цього жодного відношення. Клоакери (на перший склад!) працюють із природною видачею, а ми підмінимо слова у браузері користувача, який перейшов за спеціально навченим посиланням.

Якщо ж користувач перейде за прямим посиланням, то побачить вихідний варіант сторінки, як і пошукові роботи. У мене все, ваша честь.

Збираємо динамічний контент

Потрібні три інструменти:

  • Google Tag Manager;
  • базові знання HTML;
  • прямі руки.

Етап 1. Створюємо тригер

динамічний

Даємо тригеру ім'я - наприклад, "Динамічний заголовок" (дуже оригінально, знаю). У полі "Вибір події" вказуємо "Перегляд сторінок".

контент

  • у першому полі вибираємо «Page URL»;
  • у другому полі вибираємо «містить»;
  • у третьому полі пишемо слово, яке ми вкажемо на динамічний лендинг — наприклад, dynamic_header.

Зберігаємось і йдемо далі.

контент

Етап 2. Створюємо тег

На першому кроці вибираємо «Тег користувача HTML».

динамічний

Відкриється вікно, вставляємо туди код:

Замість «Новий заголовок», мабуть, вигадуємо свій заголовок. Відповідно, другий рядок коду виглядатиме так:

$('h1').text('У всіх відстійні лендинги, а у мене крутий')

Натискаємо «Далі» та переходимо до умови активації. Клікаємо на "Ще", відкривається список тригерів, вибираємо той, який ми щойно створили - "Динамічний заголовок".

контент

Зберігаємо тег, натискаємо "Опублікувати".

контент

Готово! Тепер на сторінці з'явиться той самий заголовок, який ви вказали в налаштуваннях тега.

Але тут ви запитаєте мене…

Виходить, динамічний контент – це лише заголовки?! Як же так, Яна?

Зовсім ні, хто вам таке сказав? Ви можете, наприклад, змінити назву кнопки або текст на сторінці.

Для кожного елемента, який ви хочете зробити динамічним, напишіть унікальний ідентифікатор, наприклад,

У вікно для HTML (етап №2, крок №2) вставляємо рядок:

Динамічний контент на практиці

Кафе «Шоколадниця для дітей та їхніх батьків» має сторінку, на якій можна замовити день народження. Виглядає вона так (або можете пройти сюди).

динамічний

Наближаються літні канікули, виник сезонний попит на випускні вечори. Враховуючи, що пройде він досить швидко, я вирішила не створювати окрему сторінку, а додати динамічні елементи, що існують.

перетворюємо

Закріпимо засвоєне

Динамічний контент – це просто:

  • розміщуємо код контейнера Google Tag Manager на всіх сторінках сайту;
  • створюємо тригер;
  • створюємо тег;
  • вставляємо HTML код;
  • публікуємо!