Привіт, друзі! Сьогодні розберемо, як налаштувати електронну торгівлю на OpenCart — і зробимо це максимально просто. Без зайвого головного болю і багатогодинних танців з бубном. Мій підхід Ви вже знаєте: налаштував один раз — працює стабільно, без постійних доопрацювань і переробок.
Для підключення e-commerce через GA4 будемо використовувати спеціальний плагін — посилання на нього знайдете під цим постом. До речі, якщо будете звертатися до розробників, можете сміливо згадати, що прийшли від мене. Мені буде приємно дізнатися, що матеріал виявився корисним.
Скільки дзвінків і продажів я отримаю замовивши у Вас контекстну рекламу?
Плагін SP SEO Remarketing All In One Pro 2.3.x – 3.x
Що являє собою цей плагін для OpenCart? Скажу чесно — це універсальне рішення, яке закриває практично всі завдання з аналітики та реклами на цій CMS.
Ось що Ви отримуєте з цим плагіном:
Динамічний ремаркетинг за актуальними вимогами Google — не застарілі шаблони, а саме те, що платформа очікує зараз;
Електронну торгівлю GA4 з коректною передачею даних — без збоїв і пропусків транзакцій;
Можливість вивантажити товарний фід прямо з панелі управління;
Інтеграцію з Google Tag Manager і передачу подій через dataLayer.
По суті, це мрія будь-якого PPC-фахівця, а не просто модуль.
Окремо про вартість. Ціна може змінитися до моменту, коли Ви будете читати цей матеріал, але можу сказати точно: це дешевше, ніж наймати програміста. Навіть якщо у Вас є розробник, який робив сайт, плагін все одно вигідніший. Чому? Вам не доведеться щоразу перевіряти, чи врахував програміст нові вимоги Google щодо передачі подій, не потрібно розбиратися в технічних завданнях і контролювати оновлення.
Автор плагіна сам стежить за актуальністю коду і адаптує його під зміни алгоритмів. Ви платите один раз — і користуєтеся. Ніяких щомісячних передплат, як на Shopify, де доводиться переплачувати знову і знову.
До речі, це українська розробка — приємний бонус для тих, хто підтримує вітчизняних розробників.
Що потрібно зробити першим кроком? Встановити плагін на свій сайт. Цей етап пропустимо — на демонстраційному сайті модуль вже встановлений.
Налаштування модуля для Google Analytics 4
Переходимо до практичної частини. Заходьте в адмін-панель Вашого OpenCart — якщо Ви PPC-фахівець, використовуйте логін і пароль, які надав клієнт.
Далі діємо покроково:
Відкриваємо розділ «Розширення»;
У фільтрі вибираємо «Модулі»;
Знаходимо в списку наш плагін SP SEO Remarketing;
Натискаємо на іконку олівця для редагування.
У мене модуль вже частково налаштований, але давайте розберемо все з нуля.
Що потрібно зробити в першу чергу для підключення Google Tag Manager і електронної торгівлі GA4? Рекомендую відразу налаштувати всі лічильники — так Ви уникнете зайвих питань і плутанини в подальшому.
Переходимо до вкладки «Лічильники» і додаємо:
Код Google Analytics 4 — вставляємо у відповідне поле;
Код GTM для секції head — розміщуємо в полі для хедера;
Код GTM для секції body — додаємо в окреме поле нижче.
Нічого складного вигадувати не потрібно — просто копіюєте коди з відповідних сервісів Google і вставляєте в зазначені поля. Помилитися тут практично неможливо, якщо дотримуватися цієї послідовності.
Де знайти код аналітики?
Тепер розберемося, звідки взяти код для Google Analytics 4. Переходимо в інтерфейс аналітики — у свій обліковий запис адміністратора.
Шлях наступний:
Відкриваємо розділ «Адміністратор» (значок шестерні внизу ліворуч);
Знаходимо і натискаємо на «Потоки даних»;
Вибираємо потрібний потік — той, що пов’язаний з Вашим сайтом;
Натискаємо кнопку «Перегляд інструкцій тегу».
Тут Ви побачите готовий код GA4 для встановлення на сайт. Скопіюйте його — або комбінацією Ctrl+C, або натиснувши на спеціальну іконку копіювання поруч з кодом. Поверніться до налаштувань плагіна і вставте в відповідне поле за допомогою Ctrl+V.
Поки що не зберігаємо налаштування — інакше може викинути з модуля, а нам ще потрібно додати GTM.
Встановлення коду Google Tag Manager
Наступний крок — підключення Google Tag Manager. Навіщо він потрібен? Якщо коротко — GTM дає гнучкість в управлінні тегами без постійного втручання в код сайту. Але це опціонально: якщо Вам не потрібен Tag Manager, просто пропустіть цей блок і переходьте до наступного розділу. Для зручності під відео будуть таймкоди.
Далі я покажу, як перевірити коректність роботи всіх налаштувань — і через GTM, і через DebugView в самій аналітиці. Другий варіант підійде тим, хто не хоче розбиратися з Tag Manager-ом.
Отже, якщо GTM Вам потрібен:
Створюєте контейнер Google Tag Manager (або відкриваєте існуючий);
Клацаєте на ідентифікатор контейнера — з’явиться вікно з двома фрагментами коду;
Перший код — для секції head. Скопіюйте його та вставте в поле «Header» в налаштуваннях плагіна;
Другий код — для секції body. Копіюєте і вставляєте в поле «Body».
Зверніть увагу: в інтерфейсі плагіна поля підписані зрозуміло — «Header» і «Body», тому переплутати складно. Вставили обидва коди — готово.
Додатковий пункт: куди ще потрібно вставити код Google Analytics?
Є ще один важливий момент. Скопіюйте код GA4 — можна взяти його прямо з поля, куди Ви його вже вставляли, або заново з інтерфейсу Google Analytics.
Тепер переходимо до вкладки «Електронна торгівля» в налаштуваннях плагіна. Тут потрібно виконати кілька дій:
Перемикач статусу — обов’язково встановлюємо в положення «Увімкнено». За замовчуванням він може бути вимкнений, тому перевірте цей момент.
Валюта — вибираєте потрібну (гривня, долар, євро — залежно від Вашого магазину).
Ідентифікатор товару — залишаємо стандартне значення «ID товару», зазвичай змінювати його не потрібно.
Код відстеження — вставляєте сюди той самий код Google Analytics 4.
У цьому ж розділі є додаткові опції — наприклад, передача даних через dataLayer. Але для базового налаштування електронної торгівлі перерахованого вище достатньо.
Скільки дзвінків і продажів я отримаю замовивши у Вас контекстну рекламу?
Перевірка роботи коду на сайті через Google Analytics Debugger
Налаштування зроблені — тепер потрібно переконатися, що все працює коректно. Відкриваємо сайт у браузері.
Для перевірки рекомендую встановити розширення Google Analytics Debugger для Chrome. У мене воно зараз у вимкненому стані — щоб активувати, просто клацніть на іконку розширення. Коли воно увімкнене, у консолі браузера будуть відображатися всі події аналітики.
Відкриваємо інструменти розробника (F12) і переходимо у вкладку Console. Будемо використовувати два способи перевірки, щоб точно розуміти: передаються дані чи ні, чи підходить нам ця зв’язка.
Перегляд результатів через Google Tag Manager
Другий спосіб — перевірка через режим попереднього перегляду в GTM. Чесно кажучи, це не мій улюблений метод: якщо сайт і так не дуже швидкий, з увімкненим превью Tag Manager він завантажуватиметься ще повільніше. Але показую про всяк випадок — може стати в нагоді.
Що робимо? Відкриваємо будь-яку картку товару на сайті. У режимі попереднього перегляду GTM дивимося список подій зліва. Якщо бачимо подію view_item — значить, відстеження e-commerce працює. Дані про перегляд товару передаються в аналітику, все налаштовано правильно.
Перевірка передачі даних в Google Analytics
Тепер переконаємося, що дані дійсно надходять в аналітику. Відкриваємо Google Analytics, закриваємо всі спливаючі вікна і переходимо в розділ «Адміністратор» (іконка шестерні). Знаходимо пункт DebugView — це інструмент для налагодження подій в реальному часі.
Що ми повинні тут побачити? Подію view_item, яка спрацювала під час перегляду картки товару. Якщо Ви перезавантажували сторінку кілька разів, подій буде декілька — вибирайте останню.
Клацаємо на подію і перевіряємо параметри. У моєму випадку це була валіза-сноуборд з такими даними:
item_id — 33603;
ціна — 4350,00;
quantity — вказано кількість.
Повертаємося в DebugView і перевіряємо: ціна 4350,00, ідентифікатор на місці, кількість передається. Формат відображення ціни може виглядати трохи інакше, але самі значення передаються коректно — це головне.
Наступний крок — перевірити подію додавання до кошика. Повертаємося на сайт, натискаємо кнопку «До кошика» на будь-якому товарі. Тепер у DebugView має з’явитися подія add_to_cart.
Зверніть увагу: все це зробив плагін автоматично. Жоден програміст не сидів і не прописував кожну подію вручну. Ви просто встановили модуль, внесли базові налаштування — і передача даних e-commerce запрацювала.
Те саме можна перевірити через розширення Google Analytics Debugger у консолі браузера. Там Ви побачите повну картину: подію add_to_cart, параметри currency, item_id, item_name — весь набір даних, який автоматично надходить в аналітику без будь-яких додаткових дій з Вашого боку.
Перевірка тестового замовлення
Фінальний і обов’язковий етап — тестове замовлення. Без нього неможливо переконатися, що весь ланцюжок подій передається коректно.
Знаходимо кошик на сайті (іноді він може бути захований в неочевидному місці). При переході до оформлення в GTM має з’явитися подія begin_checkout — це сигнал про початок процесу покупки.
Заповнюємо форму замовлення тестовими даними. Щоб не ускладнювати собі життя, вибираємо самовивіз і оплату готівкою — так простіше і швидше. Натискаємо «Оформити замовлення» і дивимося, які події зафіксувалися.
Що ми повинні побачити в режимі попереднього перегляду Google Tag Manager:
add_payment_info — інформація про спосіб оплати;
begin_checkout — початок оформлення;
purchase — сама покупка, головна подія для відстеження транзакцій.
Все це автоматично надходить до GA4 без будь-яких додаткових налаштувань. Особисто я віддаю перевагу перевірці саме через GTM: там все наочно, нічого не зникне при оновленні сторінки, можна спокійно вивчити кожен параметр.
Переходимо в DebugView аналітики і перевіряємо, що події надійшли. У моєму випадку там вже накопичилося більше десятка подій. Знаходимо add_payment_info, begin_checkout і purchase з повною «начинкою»: transaction_id, value, список товарів.
Цікавий момент: під час перевірки я виявила якісь дивні події purchase_new, які відправлялися паралельно. У GTM їх не було видно, а ось розширення Google Analytics Debugger їх показало. Причому вони спрацьовували кілька разів поспіль — явно щось зайве, встановлене раніше.
Ось чому тестові замовлення — обов’язкова практика. Іноді знаходиш те, про що навіть не підозрював. Такі «сюрпризи» можуть спотворювати дані у звітах з монетизації, тому їх потрібно знаходити і прибирати.
У моєму випадку ці зайві події не є критичними: конверсія буде налаштована на стандартний purchase, а не на purchase_new. Але для чистоти аналітики краще попросити розробника прибрати дублі.
Перевіряємо все в звіті реального часу: begin_checkout на місці, purchase з правильними параметрами — transaction_id збігається, value відповідає сумі замовлення. Все сходиться.
Підсумки
Ось і все — електронна торгівля GA4 на OpenCart налаштована і працює. Ніяких мук з кодами, ніяких складних інтеграцій. Плагін зробив всю роботу: події передаються, параметри заповнюються, дані надходять в аналітику.
Єдиний нюанс з purchase_new — це спадщина минулих налаштувань сайту, не пов’язана з плагіном. Якщо у Вас схожа ситуація, просто знайдіть джерело зайвих подій і видаліть їх.
А якщо говорити саме про роботу SP SEO Remarketing — все передалося ідеально. Тепер Google бачить повну картину: перегляди товарів, додавання до кошика, початок оформлення та завершені покупки. Саме це і потрібно для повноцінної аналітики інтернет-магазину.
