Цей пост з’явився випадково, але сподіваюсь він стане в нагоді багатьом маркетологам в ці передноворічні дні. Ми з Дімою Осіюком сьогодні обговорювали лендинг курсу SERVER-SIDE GTM BASICS і дійшли до думки, що було б круто, якби значення промокоду при можливості заповнювалось у формі автоматично.
Наприклад, зараз, якщо я публікую пост у своєму каналі Telegram з промокодом, юзеру доводиться клікнути на кнопку “Ввести промокод”, далі, власне, ввести промокод і натиснути кнопку “Застосувати”. Три дії, які додатково відділяють його від покупки. Cпробуймо спростити цей флоу за допомогою GTM.
Наш план виглядатиме так:
- Користувач переходить по лінку, який ми йому надаємо, а в цей лінк ми можемо додати get-параметр з промокодом. В результаті отримуємо ось такий лінк: https://proanalytics.academy/uk/course/server-side-gtm-basics/?promocode=OSIUK
- Коли юзер відкриває наш сайт, значення в get-параметрі ми можемо отримати за допомогою змінної типу URL:
- Тепер нам потрібно прописати значення промокоду у відповідне поле та натиснути кнопку “Застосувати”. І все це бажано без дій юзера. Зробимо це з допомогою Custom HTML (Користувацький тег HTML) тегу і JavaScript.
Сам код розберемо нижче в блоці “Як це працює”
4. Залишилось додати тригер та опублікувати налаштування.
Як це працює?
Напевно, ви помітили, що основну магію робить Custom HTML (Користувацький тег HTML) тег і JavaScript. Розберімо детальніше сам код.
Ця частина - просто обгортка для функції
<script>
(function () {
// some code })();
</script>Безпосередньо тіло функції можемо розділити на дві частини:
- Cпочатку оголошуємо 3 змінні, детальніше про кожну з них в коментарях до коду
var promocode_value = {{URL - Query - promocode}}; // отримує значення промокоду з get-параметра
var promocode_input = document.querySelector('#promocode-input'); // отримує елемент (поле) в який потрібно вводити промокод
var promocode_button = document.querySelector('#popup-form > div.promocode-block > div > button'); // отримує елемент по якому потрібно зробити клік, щоб застосувати промокодЯкщо у вас на сайті для застосуванню промокоду не потрібно робити клік, то ваш код може бути ще коротшим.
- В другій частині ми спочатку перевіряємо чи дійсні всі значення наших змінних, потім прописуємо значення промокоду в відповідне поле, і програмно імітуємо клік по кнопці, аби застосувати промокод:
if (promocode_value && promocode_input && promocode_button) { // перевіряємо чи дійсні всі значення наших змінних
promocode_input.value = promocode_value; // прописуємо значення промокоду в відповідне поле
promocode_button.click(); // програмно імітуємо клік по кнопці, щоб застосувати промокод
};Результат того, як це працює, можна побачити нижче:
Схема, яку я розібрав, підійде для лендингу. Якщо ж ми говоримо про повноцінний сайт, то вам доведеться додати проміжний крок і записувати дані промокоду в cookie або localStorage. Ось гарна стаття на цю тему у Сімо Ахави.
Ви також можете скористатись змінною типу Lookup Table (Таблиця пошуку), щоб задавати значення для промокоду, наприклад, на основі даних utm_campaign чи інших значень з URL.
Замість висновку
Звісно, такі маніпуляції ліпше робити з допомогою розробника. Але інколи розробників “під рукою” не має, а рішення потрібне вже зараз. Саме для таких випадків і існує Google Tag Manager. Не бійтесь експериментувати з цим прекрасним інструментом.
Поділіться в коментарях, які ще цікаві кейси використання GTM ви зустрічали?
Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.
Вебаналітик, Маркетолог