Налаштування розширеного відстеження конверсій для сайтів на Хорошоп за допомогою Google Tag Manager

В одній з попередніх статей ми писали про те, що таке розширене відстеження конверсій (Enhanced conversions) і для чого вого потрібне.

Сьогодні ж поговоримо про налаштування розширеного відстеження конверсій для сайтів на Хорошоп за допомогою Google Tag Manager (далі GTM).

Перед тим, як перейти до налаштувань в GTM, власникам сайтів на Хорошоп необхідно зробити ряд підготовчих дій:

1. В рекламному кабінеті Google Ads попередньо необхідно створити користувацьку конверсію purchase, яка передається напряму із сайту в обхід Аналітики. Задайте зрозумілу вам назву цієї конверсії (crm_purchase або purchase_website), переведіть в статус другорядної та перенесіть в категорію “Інше”, щоб уникнути дублювання даних. Відповідно, у вашому рекламному кабінеті в розділі Цілі => Підсумок буде 2 конверсії Purchase: одна – імпортована з Google Analytics 4, друга – кастомна, яка передається напряму з сайту, для якої в подальшому і будемо робити додаткові розширені налаштування.

Детальну відео-інструкцію про те, як створити користувацьку конверсію crm_purchase власникам сайтів на Хорошоп, WordPress, OpenCart та Okay CMS знайдете на Youtube-каналі “K2 – реклама для інтернет-магазинів”.

2. В налаштуваннях конверсії в Google Ads не забудьте активувати “Розширене відстеження конверсій”. 

3. Налаштування розширеного відстеження конверсій будемо робити через Mенеджер тегів Google (Google Tag Manager, GTM).  Тому у рекламному кабінеті Google Ads в розділі Цілі => Налаштування необхідно:

1) прийняти умови щодо даних клієнтів; 

2) увімкнути Розширене відстеження конверсій від потенційних клієнтів та обрати GTM; 

3) активувати Розширене відстеження конверсій та обрати GTM.

4. Зайти в адмінку сайту на Хорошоп і перевірити, чи активований режим маски для введення номера телефону при оформленні замовлення. Якщо ні, то ставимо галочку навпроти параметру “Увімкнути маску для введення телефону”. Це необхідно для того, щоб користувачі при оформленні замовлення вводили номер телефону в конкретному форматі, і коректної роботи скрипта для відстеження номеру телефону. 

Налаштування в Google Tag Manager (GTM).

Для подальших налаштувань переходимо безпосередньо в Google Tag Manager і доповнюємо наш тег Відстеження конверсій в Google Ads необхідними параметрами, щоб відстежувати телефон та e-mail клієнтів та інформацію про товари. Для цього в  GTM необхідно виконати наступні дії:

1. Знаходимо тег Відстеження конверсій в Google Ads. 

     2. Відкриваємо його та клікаємо в області “Конфігурація тегу”, щоб активувати налаштування. Ми вже зазначили ідентифікатор та мітку конверсії, налаштували передачу цінності, ідентифікатору трансакції та валюти. Тепер доповнимо ці дані додатковою інформацією про товар та користувача. 

а) помічаємо галочкою параметр “Надавати дані про продаж на рівні товару”, відкривається наступне вікно. 

• Поле Джерело даних залишаємо без змін, обравши “Спеціальні поля”. 

• У поле Ідентифікатор продавця вставляємо ідентифікатор Merchant 

Center, який знаходиться у правому верхньому куті в обліковому записі Мерчант центру. 

• В поле “Країна фіду” прописуємо код країни. В нашому випадку це міжнародний код України “UA”.
• В поле мова фіду необхідно прописати код мови вашого фіда з товарами. Якщо використовуєте в рекламі фід лише українською мовою, в даному вікні достатньо прописати значення “UK”. 

• Якщо ж рекламуєтесь і українською і російською мовами, то в даному полі необхідно проставити невеличкий скрипт для визначення мови (UK або RU). Для цього створюємо нову змінну, натиснувши на плюсик біля поля “Мова фіду” і у віконці, що відкриється натискаємо “+” (створити нову”) 

Конфігурація нової змінної: 

Тип змінної – Таблиця RegEx => Вхідна змінна – {{Page Path}}  => в параметрі “Шаблон” натискаємо “додати рядок” і вводимо наступний скрипт  ^/ru/*  => в параметрі “Вивід” вводимо ru. Нижче ставимо галочку навпроти “Установити значення за умовчанням” та вводимо значення UK. Нижче в розділі  Advanced Settings знімаємо галочки навпроти трьох параметрів. Задаємо назву змінної “Site Language” та отримуємо наступну картинку. 

Зберігаємо змінну.

• У полі Знижка ставимо 0
• Для поля “Елементи” (Items) необхідно створити змінну, яка буде передавати інформацію про товари . Для цього натискаємо “+”. 

У вікні, що відкриється натискаємо “+” для створення нової змінної. 

Натискаємо на поле “Конфігурація змінної” та обираємо тип змінної – “Змінна рівня даних”. 

Щоб коректно прописати імʼя змінної рівня даних зробимо перегляд товару (view_item) в режимі Попереднього перегляду в GTM та перевіримо, який саме параметр (ecommerce або eventModel) передає Data Layer. 

У нашому випадку це параметр ecommerce, тому у полі “Імʼя змінної рівня даних” вводимо ecommerce.items. Для зручності задаємо назву змінної DL_ecommerce.items та зберігаємо змінну.

Якщо при перегляді товару в режимі попереднього перегляду ви отримали в Data Layer наступний варіант.

То ваша змінна має має такий вигляд:

У результаті вищевказаних дій ми налаштували передачу розширених даних про товари. Тепер переходимо до налаштування передачі даних про користувача, а саме e-mail та телефону. Для цього ставимо галочку навпроти параметру “Включати дані, надані користувачем, з вашого вебсайту”. 

Та створюємо нову змінну. 

Задамо назву змінної User-provided Data (можете дати будь-яку зручну для вас назву).

• У полі “Електронна адреса” скролимо до самого низу та обираємо “Нова змінна”.

У новому вікні натискаємо на поле “Конфігурація змінної” та обираємо обираємо конфігурацію змінної “ Спеціальна змінна Javascript” (Custom Javascript). 

У вікні “Спеціальний сценарій JavaScript” необхідно вставити наступний скрипт для відстеження електронної пошти:

function(){

  try{

    return document.querySelector('[name="Recipient[delivery_email]"]').value;

  }catch(e){}

  try{

    return document.querySelector('[name="ProductQuick[delivery_email]"]').value;

  }catch(e){}

  return '';

}

Називаємо змінну JS_mail та натискаємо зберегти. 

Аналогічно створюємо змінну для відстеження номера телефону. 

У полі “Телефон” скролимо вниз до параметру “Нова змінна”

=> У новому вікні обираємо конфігурацію змінної “ Спеціальна змінна Javascript” (Custom Javascript).

=> У вікні “Спеціальний сценарій JavaScript” необхідно вставити наступний скрипт для відстеження номеру телефону:

function () {

  try {

    return document

      .querySelector('[name="Recipient[delivery_phone]"]')

      .value.replaceAll('-', '')

      .replaceAll('(', '')

      .replaceAll(')', '')

      .replaceAll(' ', '');

  } catch (e) {}

  try {

    return document.querySelector('[name="ProductQuick[delivery_phone]"]')

      .value.replaceAll('-', '')

      .replaceAll('(', '')

      .replaceAll(')', '')

      .replaceAll(' ', '');

  } catch (e) {}

  return '';

}

Називаємо змінну JS_phone та натискаємо зберегти. Даний скрипт не лише вказує на параметр, який необхідно відстежити, а й змінює формат номеру телефону відповідно до вимог Google. 

Таким чином ми створили змінну User-provided Data для відстеження телефону та e-mail  користувачів. Натискаємо Зберегти. 

Переглядаємо внесені зміни. 

1. Коли всі необхідні параметри для розширеного відстеження конверсії заповнено, зберігаємо оновлений тег “Відстеження конверсій в Google Ads”. 

Для перевірки коректності налаштувань зробимо тестову покупку в режимі попереднього перегляду.

Переходимо в GTM Робоча область Попередній перегляд. 

Вводимо посилання на сайт та натискаємо “Connect”. 

У новій вкладці відкривається сайт в режимі попереднього перегляду, де і необхідно оформити тестову покупку. Відкриваємо будь-який товар, додаємо його в корзину і виконуємо оформлення замовлення, заповнюючи всі дані, включаючи e-mail. 

Повертаємось в GTM, знаходимо подію Purchase, бачимо, що спрацював наш тег GADS_crm_purchase, відкриваємо його та перевіряємо чи коректно передані необхідні дані. 

Як бачимо на скріні вище, завдяки виконаним розширеним налаштуванням, тег Відстеження конверсій в Google Ads тепер передає такі дані, як:

• країна фіду;
• ідентифікатор трансакції;
• e-mail користувача;
• телефон користувача (в оновленому форматі без дужок та пробілів); 
• мова фіду;
• інформація про знижку;
• інформація про товар (ідентифікатор, назва, вартість, кількість);
• ідентифікатор продавця.

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

Публікуємо контейнер в GTM, щоб внесені зміни вступили в силу.

Через деякий час в рекламному кабінеті Google Ads статус конверсії crm_purchase стане “Активно” та висвітиться повідомлення, що Розширене відстеження конверсій увімкнено. 

У розділі Діагностика конверсій зʼявиться повідомлення: “Налаштування розширеного відстеження конверсій увімкнено й повністю оптимізовано”. 

Висновки

Завдяки налаштуванню розширеного відстеження конверсій ми допомагаємо Google отримувати більше даних про дії користувачів на сайті та отримуємо більше інформації  для оптимізації рекламних кампаній. 

У разі повного відключення сторонніх файлів cookies ми не ризикуємо втратити цінні дані про дії користувачів.

Корисні посилання

Всі необхідні скрипти по налаштуванню розширеного відстеження конверсій для сайтів на Хорошоп знайдете за посиланням. 

Інформацію про те, як легко налаштувати розширене відстеження конверсій для сайтів на WordPress за допомогою плагіну “Ecommerce Events&Feeds for Google&Facebook (v2)”, знайдете тут.

Інструкції з налаштування розширених конверсій для сайтів на WordPress за допомогою Google Tag Manager знайдете за посиланням.

Інструкцію з налаштування розширених конверсій для сайтів на Okay CMS знайдете за посиланням.

Інформацію про те, як легко налаштувати розширене відстеження конверсій для сайтів на OpenCart за допомогою плагіну “Ecommerce Events&Feeds for Google&Facebook (v2)”, знайдете тут. 

Інструкції з налаштування розширених конверсій для сайтів на OpenCart за допомогою Google Tag Manager тут.