Налаштовуємо відстеження конверсій на WooCommerce

Part 2: Woocommerce wordpress ga4 conversion tracking

Отже, з чого стартуємо весь процес налаштування аналітики та конверсій? Перш за все — створюємо обліковий запис Google Analytics 4. Для цього переходимо за адресою analytics.google.com та авторизуємося під своїм Gmail-акаунтом. Натискаємо кнопку «Створити обліковий запис» і задаємо йому назву.

Я зазвичай копіюю доменне ім’я сайту та вставляю його як назву облікового запису. Дуже раджу робити так само — називати облікові записи саме за доменом. Чому? Коли у вас один сайт, це здається дрібницею. Але варто завести два-три проєкти, запустити рекламу в різних нішах — і починається плутанина.

Типова історія: назвали обліковий запис «Мій магазин» або «Тест», а через півроку не можете знайти потрібну аналітику. За ідентифікатором облікового запису шукати теж не вийде — пошук в інтерфейсі аналітики за ним зараз просто не працює. А ось за доменом — знайдете за секунду.

Далі все стандартно. Вказуємо країну, часовий пояс та валюту. Працюєте з Україною — ставите Україну та гривню. Продаєте на Європу — вибираєте потрібну країну та євро. У моєму прикладі залишу США та долар.

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

Після цього відмічаємо всі запропоновані галочки та натискаємо «Create». З’явиться угода користувача — в ідеалі варто її прочитати, щоб розуміти, на що погоджуєтесь. Приймаємо умови та рухаємося далі.

На етапі вибору платформи натискаємо «Web». Вводимо адресу сайту — зверніть увагу, що вона обов’язково має бути на https. Якщо ваш сайт досі працює на http без сертифіката безпеки, спочатку потрібно це виправити. Як назву потоку даних знову зручно використовувати доменне ім’я. Переконуємося, що всі прапорці активні, та натискаємо «Create stream».

Готово — обліковий запис створено. Система одразу запропонує налаштувати аналітику детальніше, але до цього ми перейдемо трохи пізніше.

Встановлення плагіна Google Tag Manager на WordPress

Рухаємося далі. Оскільки ми будемо налаштовувати конверсії в Google Analytics 4, зокрема тег покупки з передачею динамічних даних, всю реалізацію проведемо через Google Tag Manager. Це окремий інструмент від Google, який виконує роль «контейнера» для всіх ваших тегів та скриптів.

Чому я пропоную працювати саме через нього, а не через якийсь інший плагін? Тут дві основні причини:

• Бюджетне та при цьому повноцінне рішення. Ви отримуєте весь необхідний набір функціоналу, якого з запасом вистачає для роботи з Performance Max та іншими кампаніями на тривалій дистанції. Жодних платних підписок, жодних обмежень за базовими можливостями.
• Гнучкість. Google зараз оновлюється постійно: щось змінюється чи не щомісяця, випускаються нові вимоги до передачі даних та подій. Якщо ви зав’язані на жорстко прописаний код або плагін без гнучких налаштувань, кожне таке оновлення — головний біль. А з Tag Manager зайшли в інтерфейс, підправили потрібний тег або змінну — і все працює. Без правок в коді сайту, без залучення розробника.

Отже, нам потрібно встановити Google Tag Manager на WordPress WooCommerce. Заходимо в адмінку WordPress, переходимо в розділ «Плагіни» та натискаємо «Add New Plugin». У пошуковому рядку вводимо gtm4wp — це коротка назва потрібного нам плагіна. Першим у результатах з’явиться плагін GTM4WP — A Google Tag Manager (GTM) plugin for WordPress від автора Thomas Geiger. Встановлюємо його.

Хочу підкреслити: зараз ми робимо налаштування з нуля та до кінця, по максимуму. Наше завдання — передати Google всю можливу інформацію про дії покупців на сайті, і цей плагін якраз дозволяє задіяти всі необхідні додаткові налаштування. Після встановлення обов’язково натискаємо «Активувати». Готово — плагін встановлено, знаходимо його в списку плагінів.

Створення облікового запису Google Tag Manager

Тепер натискаємо «Settings» (налаштування плагіна) — і тут починається найцікавіше. Плагін попросить вказати ідентифікатор контейнера Tag Manager, а отже, нам потрібно спочатку цей контейнер створити. Не хвилюйтесь, це швидко.

Переходимо на tagmanager.google.com та натискаємо «Create account». У полі назви облікового запису вставляємо доменне ім’я сайту — та ж логіка, що й з аналітикою. Коли облікових записів стане кілька, ви завжди знайдете потрібний за пару секунд. Припустимо, у вас три інтернет-магазини — і всі облікові записи підписані за доменом. Зручно, наочно, без плутанини.

Далі вибираємо свою країну. У налаштуваннях контейнера я теж віддаю перевагу використовувати доменне ім’я — так простіше орієнтуватися, особливо якщо в одному обліковому записі з часом з’явиться кілька контейнерів. Вибираємо платформу «Web» та натискаємо «Створити». Система покаже умови використання — набір мов там невеликий, але суть стандартна. Без згоди з умовами продовжити не вийде, тому приймаємо та йдемо далі.

Обліковий запис Google Tag Manager створено. Що далі? Копіюємо ідентифікатор контейнера — він виглядає як GTM-XXXXXXX (буквено-цифровий код у верхній частині екрана). Повертаємося в адмінку WordPress WooCommerce, відкриваємо налаштування плагіна GTM4WP та вставляємо скопійований ідентифікатор у відповідне поле.

Налаштування плагіна GTM4WP

Переходимо до налаштування самого плагіна. Відкриваємо вкладку «Integration», знаходимо блок «WooCommerce» та проставляємо кілька принципово важливих галочок.

Перша і головна — вмикаємо відстеження e-commerce. Власне, заради цього ми все й затіяли.

Наступний параметр — «Products for impression». За замовчуванням стоїть значення 10, але я рекомендую поставити мінімум 5. Чому? Шаблони WordPress у всіх різні: на одних темах передається багато подій, на інших — зовсім мало. Далі я покажу по порядку, як все красиво підігнати під ваш конкретний випадок. Якщо не хочете розбиратися з кожним налаштуванням вручну — можу поділитися готовим контейнером Google Tag Manager, який достатньо імпортувати та підставити свої дані. Напишіть у коментарях, якщо такий варіант потрібен — буду знати, що підготувати.

Але всю ланцюжок налаштування я все одно розпишу цілком. Це важливо, тому що рано чи пізно знадобиться щось підкрутити або доробити, і ви повинні розуміти, що за що відповідає.

Йдемо далі по галочках. Вмикаємо «Cart content» — щоб дані про кошик передавалися коректно. Таксономію поки залишаємо автоматичну — нехай Google сам визначає категорії. Також відмічаємо «Customer data» та «Order data».

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

У блоці типу бізнесу обов’язково вибираємо «Retail». Там є варіанти для освіти, авіаквитків, різних сфер — але раз ми налаштовуємо інтернет-магазин, наш варіант саме «Retail».

Окремо зупинюся на полі «Product ID prefix». Щоб зрозуміти, чи потрібно його заповнювати, поверніться в Google Merchant Center, відкрийте «Продукти» → «All products» та подивіться на ідентифікатори товарів. Якщо перед цифрами стоїть якась приставка — наприклад, «gla_» — її потрібно скопіювати та вставити в це поле в налаштуваннях плагіна. Для чого це потрібно, розкажу трохи пізніше, коли дійдемо до налаштування конверсій. Більше тут нічого не відмічаємо, натискаємо «Зберегти».

На всяк випадок перепровірте, що блок з контейнером у статусі «ON» — буває, після збереження налаштувань він скидається. Перевіряємо код контейнера, натискаємо «Зберегти зміни». Після цього повертаємося в Google Tag Manager, натискаємо «Submit», потім «Publish» — щоб всі зміни набули чинності.

Експорт та імпорт готового контейнера Google Tag Manager

А ось тепер починається найцікавіше. На даний момент наш контейнер повністю порожній — у ньому немає ні тегів, ні змінних, ні тригерів. Будемо це виправляти, причому швидким способом.

Повертаємося в плагін GTM4WP (він же плагін Томаса Гайгера), переходимо у вкладку «Інтеграції», знову відкриваємо розділ «WooCommerce» та знаходимо посилання на «Official Guide». Пролистуємо сторінку вниз до посилання на готовий контейнер.

Клікаємо по ній правою кнопкою миші, вибираємо «Зберегти як» та підтверджуємо збереження. Файл завантажується вже в потрібному форматі — нічого додатково конвертувати не доведеться.

Тепер повертаємося в Google Tag Manager, переходимо в розділ «Admin» та натискаємо «Import Container». Вибираємо файл, який щойно завантажили.

Далі система запропонує два варіанти: завантажити контейнер в нову робочу область або в існуючу. Якщо у вас, як і в нашому випадку, контейнер абсолютно порожній — вибирайте «Існуючу» (Existing). На наступному кроці Tag Manager запитає, перезаписати вміст або об’єднати. Раз контейнер чистий — сміливо вибираємо «Overwrite» (перезаписати).

Але якщо у вас Tag Manager уже використовувався раніше і в ньому є якісь налаштовані теги, тоді краще вибрати «Merge» (об’єднати). Так ви не втратите існуючі налаштування. При об’єднанні система ще уточнить — перезаписати конфліктуючі теги або перейменувати. Я вибираю «Overwrite conflicting tags», підтверджую — і готово.

Після імпорту ви побачите, що в контейнері вже з’явилися теги та цілий набір змінних. Це економить пристойний шматок часу, тому що вручну створювати кожну змінну — заняття довге та монотонне. Далі нам залишиться лише доналаштувати все під свій магазин.

Встановлення Global Tag четвертої аналітики

Пам’ятаєте, трохи раніше ми створювали обліковий запис Google Analytics 4? Настав час зв’язати його з нашим контейнером. Для цього потрібно встановити так званий Global Tag — базовий тег, без якого аналітика просто не отримуватиме дані з сайту.

Переходимо в Google Tag Manager та натискаємо «Створити тег». У списку типів вибираємо Google Analytics, потім — Google Tag. Тепер нам знадобиться ідентифікатор потоку даних. Повертаємося в нашу аналітику, знаходимо розділ Data Streams (потоки даних), відкриваємо потрібний потік та копіюємо Measurement ID — він починається з «G-» і далі йде набір символів.

Вставляємо скопійований ідентифікатор у відповідне поле тегу.

Далі потрібно призначити тригер. Якщо сумніваєтесь, який саме тригер вибрати, — загляньте в офіційну документацію плагіна GTM4WP, про яку я згадувала раніше. Там рекомендують використовувати тригер «Initialization» (Ініціалізація). Я завжди звертаю на це увагу: якщо з часом щось зміниться і мої рекомендації відрізнятимуться від актуальної документації, у вас завжди є першоджерело, до якого можна повернутися.

Називаємо тег — наприклад, «GA4-id» — та натискаємо «Save».

Після збереження заходимо в щойно створений тег ще раз. Тут важливий момент: потрібно прибрати автоматично підставлене значення та вручну вставити Measurement ID з четвертої аналітики. Я віддаю перевагу робити це до того, як з’явиться напис «Google Tag знайдено в контейнері» — так точно не заплутаєтесь. Зберігаємо.

Що ми отримали на даному етапі налаштування?

Давайте зафіксуємо, що ми вже зробили і навіщо це потрібно. На поточний момент у нас готовий робочий чернетка — базова конфігурація для подальшого налаштування Google Analytics 4 під інтернет-магазин. Що він нам дає?

1. Фундамент для фіксації конверсій та цільових дій на сайті. Коли все доділаємо, ви зможете бачити повну картину: які товари переглядають найчастіше, що додають в кошик, а що в підсумку купують. Це справді потужний звіт — трохи пізніше покажу його на прикладі демо-акаунту Google, щоб ви оцінили масштаб. Така аналітика допомагає зрозуміти, які позиції в каталозі реально працюють та приносять гроші, а які просто займають місце.
2. Четверта аналітика покаже, як відвідувачі поводяться на сайті — де затримуються, де йдуть, які сторінки викликають труднощі. Якщо потрібно щось покращити в юзабіліті або структурі магазину — ці дані будуть незамінними.
3. Навіть якщо ви вирішите не заглиблюватися в подальші налаштування, вже зараз можна використовувати конверсію покупки з GA4 та імпортувати її в рекламний обліковий запис Google Ads. Для цього ми трохи пізніше налаштуємо окрему конверсію. Але це вже трохи інша історія.

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

Оформлення тестового замовлення

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

Відкриваємо будь-яку картку товару на сайті. Паралельно переходимо в Google Tag Manager та натискаємо кнопку «Preview» — це запускає режим відладки. Вставляємо посилання на сайт та чекаємо завантаження.

Після запуску відкриються як мінімум два вікна. Перше — це відладчик Tag Assistant, де в реальному часі видно всі теги та події, що спрацьовують. Ви одразу помітите, що четверта аналітика вже встановлена через Google Tag Manager — система це підтвердить. Друге вікно — сам сайт з позначкою «Debug information for this page is viewable in the Tag Assistant window».

Саме у другому вікні ми й проходитимемо весь шлях покупця: відкриваємо картку товару, додаємо його в кошик, переходимо до оформлення, заповнюємо дані та завершуємо замовлення. Просто рухаємося по кроках так, як це зробив би звичайний покупець. На фініші — сторінка підтвердження замовлення. Вона може виглядати по-різному: на одних шаблонах відображається повна інформація про замовлення, на інших — просто «Дякуємо за покупку». Це залежить від вашої теми WordPress та не впливає на передачу даних.

А тепер найважливіше — повертаємося у вікно відладчика Tag Assistant. Листаємо список подій в самий низ та перевіряємо, що зафіксувалося. Які події ми шукаємо?

• view_item — сигнал про те, що відвідувач переглянув картку товару. Наприклад, зайшов на сторінку конкретних кросівок або чохла для телефону.
• view_item_list — перегляд лістингу, тобто списку товарів. Це може бути сторінка категорії («Кросівки Nike»), блок схожих товарів на картці, підбірка «З цим товаром купують» — все, що представляє собою перелік позицій.
• add_to_cart — додавання товару в кошик.
• view_cart — перегляд вмісту кошика.
• begin_checkout — початок оформлення замовлення.
• add_shipping_info — заповнення даних про доставку.
• add_payment_info — вибір способу оплати.
• purchase — фінальна подія, підтвердження покупки.

Всі ці події повинні автоматично «пропушитися» в нашу аналітику, якщо попередні кроки виконані правильно. Якщо якоїсь події не бачите — не панікуйте, далі розберемо, як це виправити.

Дивимося результати тестового замовлення в аналітиці

Тестове замовлення оформлено — тепер потрібно переконатися, що всі дані дійшли до Google Analytics 4. Закриваємо зайві вкладки та переходимо в інтерфейс аналітики. Натискаємо «Адміністратор», прокручуємо сторінку вниз та знаходимо інструмент під назвою DebugView.

Це вбудований відладчик аналітики, який показує події в режимі реального часу. Іноді дані підтягуються миттєво, іноді потрібно почекати пару хвилин — це нормально. Щойно інформація з’явилася, прокручуємо стрічку подій вниз та починаємо перевірку.

Відкриваємо подію view_item. Всередині обов’язково повинні передаватися два ключових параметри: currency (валюта) та value (вартість товару). Значення value повинно збігатися з ціною, яка була вказана на сайті. Припустимо, товар коштував 1250 грн. — отже, і в аналітиці ми повинні бачити 1250. Інші параметри — ID товару, кількість, назва, категорія — теж передаються, але найкритичніші саме value та currency. Ціна в блоці «Елементи» може відображатися у незвичному форматі — не лякайтеся, головне, щоб у параметрі value все було коректно.

Переходимо до view_item_list. Тут логіка та ж, тільки елементів буде більше — адже лістинг містить кілька товарів. Наприклад, якщо на картці товару виводився блок «Схожі товари» з двома позиціями, в події побачите саме два елементи.

Далі — add_to_cart. Тут є один важливий нюанс. Подія додавання в кошик повинна спрацьовувати саме при натисканні кнопки «Add to cart», а не при перегляді сторінки кошика. Це різні дії. Перегляд кошика — окрема подія (view_cart). Тому якщо ви додали один товар, а в add_to_cart бачите два — значить, щось налаштовано некоректно. Перевіряйте value та кількість елементів.

Коли відкриєте подію view_cart, там вже буде повна сума всіх товарів у кошику. Скажімо, додали два товари по 2005 та 2005 — в value побачите 4010. Все повинно сходитися арифметично.

Та ж перевірка для begin_checkout — переконуємося, що кількість позицій та сума збігаються з тим, що було в кошику на момент оформлення. У нашому прикладі — дві позиції. Аналогічно перевіряємо add_payment_info та add_shipping_info: currency, value, елементи — все на місці.

І нарешті — подія purchase. У DebugView вона підсвічується зеленим, тому що це головна конверсія, заради якої ми все налаштовували. Що обов’язково повинно бути всередині? Валюта, сума замовлення (value), дані про доставку (shipping) та transaction ID — ідентифікатор транзакції. Зазвичай він збігається з номером замовлення в WooCommerce. Наприклад, у нашому випадку це 5304 — заглядаємо в адмінку магазину та бачимо замовлення з тим же номером. Якщо ідентифікатори відрізняються, розберіться, звідки береться цифра, — буває, що плагіни або кастомні налаштування підміняють стандартну нумерацію. Відкриваємо елементи: перша позиція — на місці, друга — теж. Value збігається з підсумковою сумою 2564. Все зійшлося, дані передаються коректно.

Приклад звіту Google Analytics 4 для інтернет-магазину

Отже, налаштування відстеження конверсій завершено. Що тепер з цим робити та які звіти стануть доступні? Покажу на прикладі демо-акаунту Google — це тестова аналітика з агрегованими даними, в яку може зайти будь-хто охочий та подивитися, як виглядають звіти «вживу».

Переходимо в розділ «Монетизація» → «Ecommerce purchases». Тут відкривається повна картина за товарами: назви, кількість переглядів, додавання в кошик та покупки. По суті, ви бачите всю воронку для кожної позиції в каталозі.

Ось як це працює на практиці. Припустимо, у вас в магазині 200 товарів. У звіті видно, що футболку «Basic Black» переглянули 3000 разів (view_item), в кошик додали 400 разів (add_to_cart), а купили 85 разів. А кросівки «Runner Pro» переглянули 5000 разів, але купили лише 20. Одразу зрозуміло: з карткою кросівок щось не так — може, ціна завищена, може, фото не продаючі, може, доставка дорога. Без цих даних ви б просто гадали, а з ними — приймаєте рішення на основі цифр.

Окрема колонка — revenue (дохід). Щоб дохід рахувався коректно, критично важливо, щоб параметр currency передавався правильно. Саме на цьому я акцентувала увагу при перевірці в DebugView — без валюти аналітика не зможе коректно порахувати виручку. Навіть у самого Google в демо-акаунті бувають проблеми з відображенням revenue, тому перевіряйте цей момент у себе двічі.

Цей звіт — один із найкорисніших інструментів для власника інтернет-магазину. Крім нього в GA4 доступна маса інших зрізів: за категоріями, за джерелами трафіку, за поведінкою користувачів на сайті. Кожен із них заслуговує окремого розбору, але головне — фундамент для збору даних електронної комерції вже закладено.

Чому події можуть дублюватися?

Повертаємося в Google Tag Manager. Четверта аналітика налаштована — але є один нюанс, про який варто знати заздалегідь.

Після того як все запрацює, ви можете помітити, що деякі події почали дублюватися. Найчастіше це стосується view_item або view_item_list — одне й те саме дію фіксується два, а то й три рази поспіль. Чому так відбувається? Причина зазвичай криється в поєднанні конкретного шаблону WordPress та набору плагінів, які ви використовуєте. Наприклад, одна тема може генерувати подію перегляду товару при завантаженні сторінки, а встановлений плагін аналітики — дублювати її при скролі. В результаті замість одного view_item у звіті з’являється два, і статистика починає брехати.

Рекомендую подивитися окреме відео про те, як уникнути дубляжів подій — посилання залишу в описі або вона з’явиться в підказці до цього ролика. Якщо картинка у вашому DebugView відрізняється від того, що я показувала, — не панікуйте. Перегляньте той матеріал, знайдіть зайві спрацьовування та приберіть їх. Логіка проста: кожна подія повинна фіксуватися рівно один раз за одну дію користувача.

У моєму прикладі все чисто — дублів немає, за винятком view_item_list. Поки залишаю як є, але за потреби це легко виправити.

Четверта аналітика налаштована — чудово. Залишилося не забути опублікувати контейнер. Переходимо в Google Tag Manager, натискаємо «Submit», задаємо назву версії — наприклад, «GA4» — та публікуємо. З цього моменту аналітика почне збирати всі дані про дії відвідувачів на сайті.

Як вибрати метод ідентифікації?

Ще один момент, який варто підправити в налаштуваннях Google Analytics 4. Заходимо в адміністрування аналітики, знаходимо розділ «Способи ідентифікації» (Reporting Identity), натискаємо «Show all» та вибираємо останній варіант — «На основі пристрою» (Device-based). Підтверджуємо вибір.

Що це змінює на практиці? За замовчуванням GA4 намагається «склеювати» користувачів за кількома ознаками — Google Signals, User-ID та дані пристрою. Звучить добре в теорії, але на ділі це часто призводить до спотворень у звітах: цифри плавають, користувачі задвоюються або, навпаки, схлопуються. Метод «На основі пристрою» дає більш стабільну та передбачувану картину, особливо на старті, коли вам важлива точність даних для прийняття рішень.

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

Що далі?

З налаштуванням Google Analytics 4 на цьому закінчуємо. Але попереду ще важливий крок — потрібно зв’язати четверту аналітику з Google Ads. Без цієї зв’язки рекламний обліковий запис не зможе використовувати дані про конверсії для оптимізації кампаній. Як саме це зробити, розберемо на наступному етапі, коли перейдемо до створення та налаштування рекламного облікового запису Google Ads.

А поки рухаємося далі — нас чекає налаштування інших інструментів, необхідних для повноцінного запуску реклами.