Перейти к содержимому

База знанийShopify

Что такое Shopify Customer Events (web pixels)?

Определение

Shopify Customer Events описывают действия покупателя: например, product_viewed, product_added_to_cart и checkout_completed.

Магазин публикует их в собственный слой данных. Web pixels подписываются на события и передают их в аналитику или маркетинговые системы. Пиксель написан на JavaScript и зарегистрирован в магазине. Он выполняется в песочнице Shopify отдельно от кода страницы. Общий поток событий охватывает витрину, чекаут и этап после покупки. Поэтому пиксель получает и события чекаута, недоступные коду темы.

путь покупателя по магазину
page_viewedproduct_viewedcart_viewedproduct_added_to_cartsearch_submitted
события чекаута
checkout_startedcheckout_contact_info_submittedcheckout_shipping_info_submittedpayment_info_submittedcheckout_completed
  1. На практике

    Как работают Customer Events и web pixels?

    При действиях посетителя Shopify публикует события в своём слое данных. Web pixel подписывается на нужные события, получает название и payload через Web Pixels API и передаёт данные дальше. Это работает на витрине, в чекауте и после покупки.

    Приложения устанавливают app pixels как web pixel app extensions. Они работают в строгой песочнице на базе web worker. Продавец может добавить custom pixels. Их песочница менее строгая: iframe разрешает скрипты и формы для совместимости со старыми сниппетами.

  2. На практике

    На какие стандартные события может подписаться пиксель?

    Shopify определяет фиксированный набор стандартных событий. Они покрывают путь покупателя по магазину от page_viewed и product_viewed через cart_viewed, product_added_to_cart и search_submitted, а затем шаги чекаута.

    События чекаута включают checkout_started, checkout_contact_info_submitted, checkout_shipping_info_submitted, payment_info_submitted и checkout_completed. После покупки Shopify передаёт данные заказа пикселям, подписанным на событие. Поддерживаемым источником покупки служит Customer Events.

  3. На практике

    К чему web pixel не имеет доступа?

    Web pixel не может читать и менять DOM страницы и не достаёт до верхнего фрейма. App pixels работают в web worker, где гарантирован только документированный набор глобальных объектов; document и window недоступны.

    Custom pixels работают в iframe без доступа к верхнему фрейму. Например, при чтении URL страницы они получают адрес песочницы. Ни один тип пикселя не может прочитать заказ из разметки чекаута. Данные нужно брать из payload события.

  4. Не путать с

    Не путать с
    Это неЭто
    dataLayer из Google Tag Managerсобственный слой событий Shopify

    Customer Events использует собственный слой событий Shopify. Это не dataLayer из Google Tag Manager. Web pixel также не тег GTM: добавлением скрипта в тему его не установить.

    Custom pixel тоже не скрипт темы. Он работает по правилам Shopify, включая согласие: web pixels учитывают Customer Privacy API, и в регионах, где согласие обязательно, коллбэки пикселя выполняются только после того, как покупатель дал согласие.

  5. Где проверить

    Как проверить, какие пиксели получают события?

    • Shopify adminSettingsCustomer events

    В Shopify admin перейдите в Settings, затем Customer events. Здесь перечислены пиксели магазина и добавляются custom pixels. В магазине разработки (development store) запишите в журнал событие внутри обработчика подписки. Это покажет получение события и его payload. Shopify не рекомендует такое логирование в продакшене.

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

Daniil Maximkin

Здравствуйте, я Даниил.

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

Что нужно сделать?

Опишите задачу

Отвечу в течение одного рабочего дня. Первый ответ бесплатный. Или напишите напрямую: next@taskfordaniel.com

Обсудить задачу

Расскажите, что нужно разработать, исправить или подключить.

Описать задачу next@taskfordaniel.com