Привет, друзья! Сегодня разберём, как настроить электронную торговлю на 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;
price — 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 видит полную картину: просмотры товаров, добавления в корзину, начало оформления и завершённые покупки. Именно это и нужно для полноценной аналитики интернет-магазина.
