Всім привіт! Мене звати Яна Ляшенко, я — Google-логіст. Сьогодні розберемо, як на Хорошопі налаштувати розширене відстеження конверсій з передачею e-mail та номера телефону користувача.
Відразу уточню: налаштування тегу покупки в цьому матеріалі розглядати не буду — для цього у мене є окреме відео. Посилання знайдете десь поруч або просто загляньте в плейлист по Хорошопу.
А тут покажу саме той спосіб налаштування розширеного відстеження, який рекомендує сам Google. Поїхали!
Скільки дзвінків і продажів я отримаю замовивши у Вас контекстну рекламу?
З чого починаємо? У мене відкритий Google Tag Manager, натискаю кнопку Preview для попереднього перегляду. Сам сайт показувати не буду — не буду висвітлювати проект клієнта, якому це налаштовую.
Що робити далі? Ваше завдання — оформити тестове замовлення. У мене товар вже доданий до кошика, тому просто натискаю «Оформити замовлення».
Далі все, крім блоку оформлення, буде приховано — щоб Ви бачили тільки потрібні поля. Дивіться, що вводжу: нехай ім’я буде, припустимо, «Янка тест». Номер телефону у мене вже підставився автоматично, але давайте впишемо щось своє для наочності. І, звичайно, вказуємо електронну пошту.
Ось так виглядає заповнення форми перед відправкою тестового замовлення на Хорошопе.
Налаштування передачі телефонного номера
Тепер переходимо до практики — налаштовуємо передачу телефону в Google Tag Manager. Відкриваємо наш GTM і переходимо до розділу Variables (якщо у Вас інтерфейс російською мовою — це «Переменные»).
Усередині цього розділу знаходимо блок User-Defined Variables (користувацькі змінні). Зверніть увагу: тут зазвичай два блоки — вбудовані змінні та ті, які ми створюємо самі. Нас цікавить саме другий.
Натискаємо кнопку New, потім — «Конфігурація». У списку типів шукаємо пункт DOM Element і вибираємо його.
У налаштуваннях DOM Element потрібно вказати метод вибору — ставимо CSS Selector. Запам’ятайте цей момент.
Далі нам знадобиться сам селектор. Не лякайтеся — нічого складного тут немає. Повертаємося на сайт, де оформляли тестове замовлення. Клацаємо правою кнопкою миші прямо на полі з номером телефону і вибираємо «Переглянути код» (або використовуйте гарячі клавіші — на Windows зазвичай F12, потім Ctrl+Shift+C).
Браузер підсвітить потрібний елемент у коді блакитним кольором. Якщо натиснете, наприклад, на поле з ім’ям — підсвітиться блок імені. Нам потрібен саме телефон, тому натискайте на нього.
Коли потрібний елемент підсвічений, не клацаючи більше нікуди, наводимо курсор на цей блок коду, натискаємо праву кнопку і вибираємо «Копіювати» → «Копіювати селектор». Готово.
Повертаємося в GTM і вставляємо скопійований селектор у відповідне поле. Так, він буде довгим — це нормально. У полі Attribute Name обов’язково прописуємо value — саме це дозволить отримати введене значення, а не просто знайти елемент.
Залишилося дати змінній зрозумілу назву. Наприклад, «Phone CSS» або «Телефон Хорошоп» — як Вам зручніше. Головне, щоб потім не заплутатися серед інших змінних.
Налаштування передачі електронної пошти
Тепер повторюємо аналогічну процедуру для e-mail. Створюємо нову змінну, в конфігурації знову вибираємо DOM Element і змінюємо метод на CSS Selector.
Чому e-mail так важливий? Якщо заглянути в довідку Google (поки вона актуальна — самі знаєте, все постійно змінюється), стане зрозуміло: телефон як окремий параметр можна передавати тільки за наявності e-mail. Тобто особливого вибору немає — електронна пошта обов’язкова.
Так, технічно можна ще додати ім’я, прізвище, місто, адресу. Але сенсу в цьому мало: в таргетуванні вони не використовуються, а для адресних даних система вимагатиме ще й індекс, якого на Хорошопі в формі замовлення зазвичай немає. Коротше кажучи, не морочте собі голову — e-mail і телефону цілком достатньо.
Повертаємося на сайт, клацаємо правою кнопкою миші на полі електронної пошти, вибираємо «Переглянути код». Елемент підсвітився — натискаємо праву кнопку і копіюємо селектор. Вставляємо в GTM, в полі атрибута прописуємо value. Називаємо змінну, наприклад, «Email CSS» і зберігаємо.
Перевірка: чи передаються параметри?
Налаштували — тепер потрібно переконатися, що відстеження конверсій працює коректно. Як це перевірити?
Знову натискаємо Preview в GTM, переходимо на сайт. Оскільки товар вже в кошику, відразу відкриваю оформлення замовлення. Заповнюю поля тестовими даними: ім’я — «Янка RRRRRR», телефон змінюю, e-mail теж вводжу новий.
Скільки дзвінків і продажів я отримаю замовивши у Вас контекстну рекламу?
Повертаюся до вікна попереднього перегляду GTM. Знаходжу сторінку оформлення замовлення, переходжу на вкладку Variables (змінні). Перегортаю список і — вуаля! — бачу свою змінну «Email CSS» з тим значенням, яке щойно ввела.
А тепер фокус: уявіть, що користувач ввів e-mail з помилкою, помітив і виправив, припустимо, на «vsepusik@…». Що станеться? Клацаємо десь на сторінці, повертаємося до попереднього перегляду — і бачимо вже оновлене значення «vsepusik». Система фіксує актуальні дані, тобто в результаті передасться саме те, що користувач надішле разом із замовленням.
Те саме з телефоном. Змінюю номер на одинички, клікаю в інше поле, перевіряю в GTM — новий номер на місці. Саме це нам і потрібно для коректного налаштування передачі даних.
Хочете — можете за таким же принципом налаштувати збір імені, прізвища або чого завгодно ще. Далі вже Ваша фантазія.
Налаштування змінних у тезі покупки
Змінні створені — тепер потрібно підключити їх до тегу покупки. Переходимо в розділ Tags (теги), знаходимо свій тег покупки, який вже був налаштований раніше.
Відкриваємо його і шукаємо блок Include user-provided data from your website (українською — «Включити дані користувача з веб-сайту»). Якщо у Вас цей параметр ще не налаштований, просто натисніть New Variable і виберіть тип User-Provided Data, потім вкажіть «Вручну задати».
Далі підставляємо наші змінні. У полі Email вибираємо ту саму змінну «Email CSS», яку створювали раніше. У полі Phone — відповідно, змінну з телефоном.
Які ще дані можна додати? Система дозволяє передавати ім’я, прізвище, вулицю, місто, регіон, країну та поштовий індекс. Але давайте розберемося, що з цього реально корисно.
Ім’я та прізвище — Google колись обіцяв персоналізовану рекламу в дусі «Яна, ця пропозиція для Вас!». Поки що такого масового застосування не бачила, тож трекувати чи ні — вирішуйте самі. Для українських сайтів люди зазвичай вказують реальні дані, адже хочуть отримати посилку через Нову Пошту.
З адресними даними складніше. На Хорошопе в формі замовлення немає поштового індексу, а без нього Google не зможе коректно використовувати геодані. Та й сама адреса часто вказує на відділення Нової Пошти, а не на реальне місце проживання покупця. Таргетувати за такою інформацією ризиковано — система може вирішити виливати бюджет у радіус навколо поштового відділення, куди люди просто приходять забирати посилки.
Для порівняння: на американських сайтах або проектах на Shopify при оформленні замовлення завжди є поля «адреса», «вулиця» і «postal code» — це стандартна вимога, в тому числі для коректної роботи з Google.
Для українського ринку e-mail і телефону буде достатньо. Називаємо змінну зрозуміло, зберігаємо.
Важливий момент: ця конструкція спрацює на подію purchase. На Хорошопе вона спрацьовує саме в момент натискання кнопки «Оформити замовлення». Тобто якщо користувач спочатку ввів один e-mail, потім помітив помилку і виправив її — система надішле тільки остаточний варіант. Саме те, що потрібно.
Налаштування збору змінних з використанням сторонніх скриптів
Бувають ситуації, коли тег покупки реалізований безпосередньо з Хорошопа через додатковий скрипт. Скажу чесно — такий спосіб не дуже рекомендую. Через GTM працювати набагато зручніше: більше гнучкості, повний контроль над даними. Захотіли додати новий параметр в purchase — будь ласка. Вирішили щось прибрати або змінити — без проблем. Не потрібно щоразу просити розробника або лізти в код сайту.
Але якщо все-таки у Вас налаштування зроблено через скрипти безпосередньо в Хорошопе, тоді знадобиться створити окремий тег. Він називається Google Ads User-provided Data Event.
Як це зробити:
Переходимо в GTM, натискаємо на створення нового тегу
У конфігурації вибираємо Google Ads, потім шукаємо пункт User-provided Data Event — він зазвичай знаходиться в кінці списку, не переплутаєте.
Вставляємо ID свого Google Ads — це все, що йде після «AW-» (знайдете в налаштуваннях конверсії)
У полі User Data підтягуємо змінні, які створили раніше
Тригер для Хорошопа — подія purchase
Зберігаємо, публікуємо — готово, дані будуть передаватися.
У моєму випадку цей тег призупинено, оскільки всі дані вже передаються через основний тег покупки. Окремий User-provided Data Event потрібен, коли відстеження конверсій налаштовано різними способами або спрацьовує не в один момент.
Публікація та аналіз результатів
Залишилося опублікувати зміни і почекати реакції Google. Відразу попереджаю: система часто буде «сваритися» на відсутність якихось даних. Наприклад, при повторному замовленні e-mail може не відображатися у формі — він збережений в cookies або профілі користувача. Це нормально, більшості сайтів вистачить тих даних, які передаються.
За термінами: приблизно протягом трьох діб стане зрозуміло, прийняв Google параметри чи ні. В інтерфейсі побачите позначку «Вимагає уваги» — або не побачите. А ось повноцінну аналітику щодо розширеного відстеження конверсій чекайте десь через 45 днів. Google сам про це попереджає.
Ось, власне, і все. Це максимально простий спосіб налаштування передачі даних без написання складних скриптів — ідеально, якщо Ви не програміст. Метод повністю відповідає офіційним рекомендаціям Google. Все відстежується, все фіксується і відправляється за подією purchase.
