Перед тим, як перейти до налаштувань в GTM, власникам сайтів на WordPress необхідно зробити декілька підготовчих дій:
3. Також необхідно перевірити чи встановлено на вашому сайті маску для правильного введення номеру телефону. Тут може бути 3 сценарії:
– встановлена маска з дужками в форматі +38(000)111-22-33. Додаткові дії не потрібні.
– встановлена маска для введення номеру телефону без дужок в форматі +380001112233. Додаткові дії не потрібні.
– маска не встановлена та номер телефону можна вводити в довільномі форматі без обмеження по кількості символів. Необхідні додаткові дії, описані нижче.
Якщо маска для правильного введення номеру телефону не встановлена, то необхідно встановити її в налаштуваннях сайту за допомогою скрипта ( інакше Google не зможе розпізнати номер телефону покупця та відстежити його).
Зробити це доволі просто. В адмінці сайту переходимо в розділ “Вигляд” => Редактор тем” => в правому бічному меню обираємо вкладку functions.php => додаємо скрипт => не забуваємо “Оновити файл”.
Текст скрипта нижче:
// Перевіряємо український номер телефону під час введення
add_action( ‘woocommerce_checkout_process’, ‘ukr_phone_number_checkout_field_process’ );
function ukr_phone_number_checkout_field_process() {
// Перевіряємо формат номера телефону
if ( ! preg_match( ‘/^\+380(39|50|63|66|67|68|73|91|92|93|94|95|96|97|98|99)\d{7}$/’, $_POST[‘billing_phone’] ) ) {
wc_add_notice( __( ‘Неправильний формат номера телефону. Він повинен відповідати відомим кодам мобільних операторів та має мати певну кількість символів. Якщо ви не знайшли свого, повідомте, будь ласка, адміністрацію’ ), ‘error’ );
}
}
add_action( 'wp_footer', 'add_custom_js_checkout' );
function add_custom_js_checkout() {
if ( ! is_checkout() ) {
return;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var phoneField = $('#billing_phone');
if(phoneField.length > 0) {
phoneField.mask("+380000000000", {
placeholder: "+38xxxxxxxxxx"
});
}
});
</script>
<?php
}
Дотримання рекомендацій, описаних вище, забезпечить успішне налаштування розширеного відстеження конверсій та коректну передачу даних клієнтів.
Для подальших налаштувань переходимо безпосередньо в Google Tag Manager.
Тут не зупиняємось на детальному налаштуванні тегу Відстеження конверсій в Google Ads, який відповідає за передачу даних про конверсії напряму із сайту. Лише нагадаємо, що для різних сайтів Data Layer може передавати різні параметри змінних (наприклад ecommerce, eventModel), тому важливо перед початком налаштувань перевірити, який саме параметр передається з вашого сайту. Для цього необхідно зробити тестову покупку в режимі Попереднього перегляду в GTM.
Якщо ви ще не налаштували користувацьку конверсію Purchase напряму із сайту, то перегляньте відео з детальними покроковими інструкціями.
А ми рухаємось далі і доповнюємо тег Відстеження конверсій в Google Ads необхідними параметрами, щоб відстежувати телефон та e-mail клієнтів та інформацію про товари. Для цього в GTM необхідно виконати наступні дії:
а) позначаємо галочкою параметр “ Надавати дані про продаж на рівні товару”, відкривається наступне вікно. 
Center, який знаходиться у правому верхньому куті в обліковому записі Мерчант центру. 
Конфігурація нової змінної:
Тип змінної – Таблиця RegEx => Вхідна змінна – {{Page Path}} => в параметрі “Шаблон” натискаємо “додати рядок” і вводимо наступний скрипт ^/ru/*=> в параметрі “Вивід” вводимо ru. Нижче ставимо галочку навпроти “Установити значення за умовчанням” та вводимо значення UK. Нижче в розділі Advanced Settings знімаємо галочки навпроти трьох параметрів. Задаємо назву змінної “Site Language” та отримуємо наступну картинку.
Зберігаємо змінну.
У вікні, що відкриється натискаємо “+” для створення нової змінної.
Натискаємо на поле “Конфігурація змінної” та обираємо тип змінної – “Змінна рівня даних”.
Щоб коректно прописати імʼя змінної рівня даних зробимо перегляд товару (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() {
var email_class = 'woocommerce-customer-details--email';
var email = document.getElementsByClassName(email_class)[0].innerText;
return email;
}
Називаємо змінну JS-mail та натискаємо зберегти. 
Аналогічно створюємо змінну для відстеження номеру телефону.
У новому вікні обираємо конфігурацію змінної “ Спеціальна змінна Javascript” (Custom Javascript).
У вікні “Спеціальний сценарій JavaScript” необхідно вставити наступний скрипт для відстеження номеру телефону:
function() {
var phone_class = 'woocommerce-customer-details--phone';
var phone=document.getElementsByClassName(phone_class)[0].innerText;
return phone.replaceAll('-', '')
.replaceAll('(', '')
.replaceAll(')', '')
.replaceAll(' ', '');;
}
Називаємо змінну JS-phone та натискаємо зберегти. Даний скрипт не лише вказує на параметр, який необхідно відстежити, а й змінює формат номеру телефону відповідно до вимог Google. 
Таким чином ми створили змінну User-provided Data для відстеження телефону та e-mail користувачів. Натискаємо Зберегти.
Переглядаємо внесені зміни. 
Для перевірки коректності налаштувань зробимо тестову покупку в режимі попереднього перегляду.
Переходимо в GTM => Робоча область => Попередній перегляд.
Вводимо посилання на сайт та натискаємо Підключитись.
Повертаємось в GTM, знаходимо подію Purchase, бачимо, що спрацював наш тег GADS_crm_purchase, відкриваємо його та перевіряємо чи коректно передані необхідні дані.
Як бачимо на скріні вище, завдяки виконаним розширеним налаштуванням, тег Відстеження конверсій в Google Ads тепер передає такі дані, як:
Якщо при оформлені тестової покупки ви також побачили, що всі необхідні дані передаються, то можемо вас вітати, налаштування розширеного відстеження конверсій виконано правильно.
Публікуємо контейнер в GTM, щоб внесені зміни вступили в силу.
Через деякий час в рекламному кабінеті Google Ads статус конверсії crm_purchase стане “Активно” та висвітиться повідомлення, що Розширене відстеження конверсій увімкнено. 
В розділі Діагностика конверсій зʼявиться повідомлення: “Налаштування розширеного відстеження конверсій увімкнено й повністю оптимізовано”.
Висновки.
Завдяки налаштуванню розширеного відстеження конверсій ми допомагаємо Google отримувати більше даних про дії користувачів на сайті та отримуємо більше інформації для оптимізації рекламних кампаній.
У разі повного відключення сторонніх файлів cookies ми не ризикуємо втратити цінні дані про дії користувачів.
Всі необхідні скрипти по налаштуванню розширеного відстеження конверсій для сайтів на WordPress знайдете за посиланням.
Інформацію про те, як налаштувати розширене відстеження конверсій для сайтів на Хорошоп знайдете за посиланням.
Налаштування розширених конверсій для сайтів на OpenCart опублікуємо найближчим часом.
Підписатися
Спеціалізований практичний курс, на якому розглядаюся рекламні стратегії та струтктури рекламних кампаній для 6 типів інтернет-магазинів, серед яких 100% є ваш! 58 відеоуроків у записі, які можна дивитися одразу після оплати на зручній швидкості у зручний час. Підтримка в закритому telegram-чаті. Гарантія повернення коштів.
Зареєструватися