Как подключить Google Analytics 4, Google Tag Manager и Meta Pixel к QR-меню WebQRMenu

WebQRMenu сам считает сканирования и заказы. Но если вы запускаете рекламу, догоняете гостей ретаргетингом в Instagram и Facebook или привыкли смотреть всю маркетинговую статистику в Google Analytics, логично, чтобы QR-меню отправляло данные и туда. Разработчик и код для этого не нужны: достаточно вставить один, два или три ID в настройки магазина, и WebQRMenu сам загрузит нужные скрипты на странице меню для посетителей.

В статье разберём раздел Статистика в настройках магазина: что делает каждый переключатель, где взять каждый ID, когда нужен Google Tag Manager, а когда хватит одного Google Analytics 4, и как убедиться, что данные действительно приходят. В конце коротко заглянем на страницу Интеграции.

Что понадобится: магазин в WebQRMenu и доступ к тем сервисам, которые вы подключаете: ресурс Google Analytics 4, контейнер Google Tag Manager или пиксель (набор данных) в Meta Events Manager.

Где находятся настройки

В боковом меню откройте Магазин → Магазины и выберите свой магазин (в наших примерах это демо-ресторан Aurora Prime). Внизу страницы магазина три вкладки: Информация, Макет страницы и Настройки. Перейдите в Настройки и раскройте раздел Статистика.

В разделе два переключателя.

Собирать аналитику WebQR

Первый переключатель, «Собирать аналитику WebQR», отвечает за собственную аналитику WebQRMenu — ту, что вы видите в разделе Аналитика бокового меню. Подсказка под ним: «Можно отключить, если аналитика в WebQR не нужна».

Оставьте его включённым, если хотите видеть сканирования и заказы прямо в кабинете. Этот переключатель не связан с внешними сервисами ниже: можно оставить аналитику WebQR и добавить к ней Google или Meta, а можно пользоваться чем-то одним.

Подключить Google Analytics 4, Tag Manager или Meta Pixel

Второй переключатель, «Подключить Google Analytics 4, Tag Manager или Meta Pixel», нужен для внешних сервисов. Пока он выключен, подсказка гласит: «После включения укажите ID — скрипты загрузятся на странице для посетителей».

Включите его — ниже появятся три поля, а подсказка сменится на «Заполните ID ниже. Пустые поля не подключаются».

Что это за поля:

• Google Analytics 4 — идентификатор потока данных GA4 для сайта (measurement ID). Начинается с G-.
• Google Tag Manager — идентификатор контейнера Tag Manager. Начинается с GTM-.
• Meta Pixel — идентификатор пикселя Meta, только цифры.

Заполнять все три не обязательно. Подключаются только поля с ID, пустые просто пропускаются. Например, можно подключить только Meta Pixel для рекламы в Instagram или только Google Analytics 4.

Так выглядит раздел, когда заполнены все три поля. ID на скриншоте придуманы для примера: G-A1B2C3D4E5, GTM-A1B2C3D и 100000000000001. У вас будут свои.

Где взять каждый ID

Все шаги ниже — по официальной справке Google и Meta, ссылки даны в каждом разделе. Названия пунктов меню приводим по-английски, как в официальной справке; в русском интерфейсе сервисов они переведены.

Google Analytics 4: идентификатор потока (G-…)

По официальной справке Google Analytics:

1. В Google Analytics откройте Admin (администрирование).
2. В блоке Data collection and modification нажмите Data streams (потоки данных).
3. Выберите вкладку Web.
4. Нажмите на свой веб-поток.
5. Идентификатор находится в первой строке сведений о потоке.

Он состоит из «G-» и комбинации латинских букв и цифр, например G-A1B2C3D4E5. По словам Google, чтобы его увидеть, нужна роль редактора или выше.

Google Tag Manager: ID контейнера (GTM-…)

По официальной справке Tag Manager:

1. Зайдите на tagmanager.google.com и войдите в аккаунт.
2. Откройте нужный контейнер.
3. ID контейнера, начинающийся с «GTM», виден на вкладке Workspace (рабочая область).

ID — это префикс GTM- и латинские буквы с цифрами, например GTM-A1B2C3D. Если нажать на него в Tag Manager, откроется инструкция по установке с фрагментом кода. Сам код вам не понадобится — WebQRMenu добавит его сам. Скопируйте только ID.

Следите, чтобы это был именно ID контейнера GTM-, а не ID тега Google, который начинается с G-. Это разные вещи, и, как поясняет Google, все типы тегов поддерживает только контейнер GTM-.

Meta Pixel (ID набора данных)

Как сказано в справочном центре Meta для бизнеса, пиксель создаётся так:

1. Откройте Meta Events Manager.
2. Нажмите Connect data и выберите Web.
3. Нажмите Connect.
4. Введите название пикселя и нажмите Create pixel.

По словам Meta, так «создаётся новый ID, который виден в Events Manager». Сейчас Meta объединяет данные сайта, приложений и офлайн-событий в наборы данных (datasets). Согласно Meta, ID набора данных можно использовать так же, как ID пикселя, а если к набору привязан существующий пиксель, их ID совпадают. Поэтому если Events Manager показывает вам ID набора данных — его и вставляйте в поле Meta Pixel.

ID состоит только из цифр. Если у вас уже есть код пикселя от разработчика, то, как указано в документации Meta для разработчиков, ID встречается в нём дважды: внутри fbq('init', '…') и в адресе tr?id=. Скопируйте только цифры, например 100000000000001.

GTM или достаточно Google Analytics 4?

Оба варианта Google описывает в официальном сравнении Google Tag Manager vs. gtag.js. Если коротко:

• Одного тега Google достаточно, если нужны стандартные показатели: просмотры страниц, клики, прокрутка и так далее. Google называет этот вариант отличным для маркетологов, у которых нет под рукой команды разработчиков. Для QR-меню это значит просто заполнить поле Google Analytics 4.
• Google Tag Manager нужен, когда требуется больше контроля: несколько тегов Google, теги других сервисов и собственные теги, и всё это управляется в одном месте на tagmanager.google.com без правки кода сайта, с рабочими областями и историей версий. Google рекомендует его маркетологам, которые ведут и теги Google, и теги сторонних сервисов.

А если ваша команда уже работает в Tag Manager, Google советует продолжать им пользоваться.

Не подключайте один и тот же ресурс GA4 дважды

Если ваш контейнер GTM уже отправляет данные в Google Analytics 4 с тем же ID G-, оставьте поле Google Analytics 4 в WebQRMenu пустым. В справке об управлении тегом Google прямо сказано: если один и тот же тег Google настроен на странице два раза или больше, это может привести к дублированию данных или смешению настроек. Google также отмечает, что при использовании Tag Manager добавлять отдельный код gtag.js не нужно.

Правило простое: каждый сервис подключайте в одном месте — либо напрямую в его поле в WebQRMenu, либо внутри контейнера GTM. С Meta Pixel то же самое: если пиксель уже настроен в GTM, не вставляйте его ID ещё и в поле Meta Pixel.

Сохранение

Внизу страницы магазина есть панель, которая остаётся на месте при прокрутке: слева вкладки Информация, Макет страницы и Настройки, справа кнопки Отмена и Сохранить. Нажмите Сохранить. Кнопка сохраняет всю страницу магазина целиком, так что сохранять каждый раздел отдельно не нужно. Отмена сбрасывает изменения, которые ещё не сохранены.

Как проверить, что данные приходят

После сохранения откройте меню так, как это делает гость: отсканируйте QR-код или перейдите по ссылке на меню. Затем проверьте каждый сервис.

Google Analytics 4: отчёт в реальном времени и DebugView

В Google Analytics откройте Reports → Realtime (отчёты → в реальном времени; официальная справка). Отчёт показывает активность за последние 30 минут: активных пользователей за последние 5 и 30 минут, просмотры по заголовкам страниц, количество событий по названиям и многое другое. Среди его задач Google прямо называет проверку того, что код отслеживания работает. В справке о свежести данных сказано, что в реальном времени данные обычно появляются через несколько минут, а обработка для стандартных отчётов может занять 24–48 часов. Так что не волнуйтесь, если вчерашние цифры ещё не попали в обычные отчёты.

Для подробной проверки есть DebugView: Admin → Data display → DebugView (официальная справка). Он показывает события с устройства, на котором включён режим отладки. Проще всего включить его для себя через Google Tag Assistant (о нём ниже). В средней колонке — события за последние 60 секунд, по клику на событие видны его параметры. Учтите: если используется режим согласия и посетитель не разрешил аналитические cookie, события здесь не появятся.

Google Tag Assistant

Tag Assistant проверяет теги на живой странице:

1. Откройте tagassistant.google.com.
2. Нажмите Add domain.
3. Введите адрес меню, начиная с https://.
4. Нажмите Connect.

Меню откроется в сеансе отладки. Вид Summary даёт общую картину событий и тегов, а в блоке Output видно, куда ушли обращения (хиты). Если на странице несколько тегов Google или контейнеров, можно выбрать каждый и посмотреть его хиты отдельно. Кроме того, Tag Assistant добавляет к адресу параметр _dbg, поэтому этот же визит появится в DebugView в GA4.

Если вы работаете с Google Tag Manager, ту же проверку удобно начать из контейнера: на вкладке Workspace нажмите Preview, введите адрес меню и нажмите Connect (официальная справка). Tag Assistant покажет, какие теги сработали и в каком порядке. Обычные гости ничего этого не видят.

Meta Ads Data Advisor (бывший Meta Pixel Helper)

Браузерное расширение Meta для проверки пикселя переименовано: теперь это Meta Ads Data Advisor (formerly Meta Pixel Helper), оно доступно для Chrome и Edge (документация для разработчиков).

Откройте меню с установленным расширением. Если на странице есть Meta Pixel, на значке расширения появится метка с точкой или числом отправленных событий. Нет метки — нет пикселя на странице. Нажмите на значок, и откроется боковая панель: в ней видно, какие пиксели найдены и загрузились ли они, а если выбрать пиксель, появятся его события.

Как читать статусы:

• Active — пиксель или событие работает правильно.
• Warning — что-то настроено неправильно или может влиять на результаты.
• Inactive — данные не отправляются.
• Error — критическая ошибка настройки, например дублирование событий.

Перед проверкой отключите блокировщик рекламы для страницы меню — так советует Meta.

Тестовые события в Meta Events Manager

Для более подробной проверки Meta рекомендует инструмент Test events (официальная справка):

1. Откройте Events Manager.
2. В меню слева нажмите Data sources.
3. Выберите свой пиксель или набор данных.
4. Откройте Test events.
5. Введите адрес меню и нажмите Open website.

Полистайте меню — события появятся на вкладке Test events. Активность записывается, только пока страница Test events открыта. Meta также предупреждает, что в аналитике данные могут появиться через 30 минут и позже, так что для быстрой проверки пользуйтесь Test events.

Страница «Интеграции»

В боковом меню раскройте группу Интеграции. Первый пункт в ней — Мои домены (для подключения своего домена), а второй открывает страницу интеграций с сервисами. На странице четыре вкладки: Касса, Платежи, Принтеры и Автоматизация. Переключатель магазина вверху справа позволяет выбрать, с каким магазином вы работаете.

WebPos на вкладке «Касса»

Первая карточка на вкладке Касса — WebPos, наша собственная касса: смены, чеки и оплаты. Меню редактируется здесь, в WebQRMenu, и автоматически синхронизируется с кассой, так что на кассе всегда те же блюда и цены. Кнопка Подключить открывает WebPos.

Наличные на вкладке «Платежи»

На вкладке Платежи есть карточка Наличные с переключателем «Принимать заказы за наличные»:

• Включено — гость оформляет заказ и платит в зале.
• Выключено — заказ без оплаты не принимается.

Оставьте его включённым, если гости могут расплатиться с персоналом на месте. Выключите, если каждый заказ из меню должен быть оплачен, прежде чем его примут.

Список интеграций постоянно пополняется, так что на эту страницу стоит иногда заглядывать.

Коротко

1. Магазин → Магазины → ваш магазин → Настройки → Статистика.
2. Оставьте «Собирать аналитику WebQR» включённым, если нужна статистика в кабинете.
3. Включите «Подключить Google Analytics 4, Tag Manager или Meta Pixel» и вставьте только нужные ID.
4. Не подключайте один и тот же ID GA4 или один и тот же пиксель и в отдельном поле, и внутри GTM.
5. Нажмите Сохранить на нижней панели.
6. Откройте меню и проверьте данные в Realtime, Tag Assistant, Meta Ads Data Advisor и Test events.