Помощь
Войти

Тестирование пользовательских пикселей

После создания пользовательского пикселя его необходимо протестировать, чтобы убедиться, что он правильно отправляет данные при возникновении событий на вашем сайте.

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

Если ваш пользовательский пиксель интегрирован со сторонней платформой, у которой есть собственный помощник для пикселей, вы можете использовать его в дополнение к Shopify Pixel Helper. Это позволит проверить, обрабатываются и принимаются ли события пикселя сторонней платформой. Например, если вы добавите в свой магазин пользовательский пиксель TikTok, то для его тестирования можно будет использовать и Shopify Pixel Helper, и помощник для пикселей TikTok.

Вы можете использовать Shopify Pixel Helper в той же сессии браузера, что и сторонний помощник для пикселей, чтобы одновременно тестировать события для обеих платформ.

Вот скрипт пользовательского пикселя, который будет запускать все стандартные события в песочнице и записывать данные о них в консоль. Стандартные события будут видны в Shopify Pixel Helper. Кроме того, вы можете подписаться на другие массовые подписки — all_events, all_custom_events и all_dom_events, — чтобы изучить все возможности веб-пикселей. Для получения дополнительной информации посетите страницу web pixels API.

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

На этой странице

Проверка подключения пользовательского пикселя

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

Шаги:

  1. В панели администратора Shopify перейдите в раздел Настройки > События клиентов.

  2. Рядом с пикселем, который вы хотите протестировать, убедитесь, что в столбце Статус для него отображается статус Подключено.

  3. Если пиксель не подключён, нажмите ..., а затем — Подключить.

Тестирование пользовательского пикселя с помощью Shopify Pixel Helper

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

Шаги:

  1. В панели администратора Shopify перейдите в раздел Настройки > События клиентов.

  2. Нажмите на пользовательский пиксель, который хотите протестировать.

  3. Нажмите Тестировать, чтобы открыть пользовательский пиксель на вашем веб-сайте для тестирования.

  4. Необязательно: в зависимости от настроек согласия вашего магазина и настроек конфиденциальности клиентов для пикселя в диалоговом окне Помощник для пикселей может появиться сообщение Ожидается согласие для пикселя. Чтобы продолжить тестирование, выполните одно из следующих действий:

  5. Чтобы посмотреть, какие события загружаются, посетите каждую страницу, на которой вы хотите протестировать пиксель, и проверьте в разделе Полученные события диалогового окна Помощник для пикселей, что подписка на событие и функция обратного вызова были успешными:

    • Перейдите на новую страницу, чтобы протестировать событие page_viewed.
    • Нажмите на товар, чтобы протестировать событие product_viewed.
    • Добавьте товар в корзину, чтобы протестировать событие product_added_to_cart.
    • Перейдите к оформлению заказа, чтобы протестировать событие checkout_started.
    • Введите информацию о доставке при оформлении заказа, чтобы проверить, что событие checkout_shipping_info_submitted заменяет событие checkout_started.
    • Завершите оформление заказа, чтобы проверить, что событие checkout_completed заменяет событие checkout_shipping_info_submitted. Подробнее о размещении тестового заказа.

  6. Чтобы просмотреть полученные данные о событии, нажмите Развернуть, чтобы развернуть диалоговое окно помощника для пикселей.

Просмотр раздела «Полученные события»

Когда вы тестируете загрузку событий (шаг 5), в разделе Полученные события диалогового окна Помощник для пикселей отображается один из следующих статусов:

  • Зелёная точка означает, что подписка на событие и функция обратного вызова были успешными.
  • Красная точка означает, что подписка на событие была успешной, но функция обратного вызова не сработала. Узнайте, как устранять неполадки в работе пользовательского пикселя.
  • Помощник для пикселей отображает неперехваченные ошибки, возникающие на верхнем уровне или в функции обратного вызова. Ошибки верхнего уровня отображаются при загрузке помощника для пикселей. Сообщения об ошибках в функциях обратного вызова отображаются, когда вы нажимаете на событие с красной точкой, чтобы развернуть его.
  • В приведённом ниже примере кода содержится ошибка обратного вызова и ошибка верхнего уровня. В зависимости от того, где находится ошибка верхнего уровня, пиксель может работать частично.
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Чтобы узнать больше об исправлении ошибок JavaScript, ознакомьтесь со статьёй «Поиск и устранение неисправностей в JavaScript».

Поиск неисправностей в пользовательском пикселе

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

Проверьте настройки конфиденциальности клиентов

Если пиксель не загружается или не срабатывает во время тестирования, возможно, его загрузке мешают настройки конфиденциальности клиентов.

В панели администратора Shopify перейдите в раздел «Настройки» > «Конфиденциальность клиентов», чтобы проверить настройки конфиденциальности клиентов в панели администратора Shopify, которые могут применяться к вашей сессии. В зависимости от настроек конфиденциальности клиентов выполните следующие действия:

  • Если в вашем регионе действуют настройки конфиденциальности, требующие согласия, убедитесь, что вы предоставили согласие через cookie-баннер.
  • Если у вас нет настроек конфиденциальности, которые блокируют загрузку пикселя, очистите файлы cookie в браузере, чтобы сбросить cookie-баннер и предоставить согласие.

Если вы используете сторонний инструмент для управления согласием, обратитесь за поддержкой к стороннему поставщику.

Дополнительные способы устранения неисправностей

Если по-прежнему неясно, правильно ли ваш пользовательский пиксель подписан на событие клиента, попробуйте следующие способы устранения неисправностей:

  • Очистите файлы cookie в браузере.
  • Если вы тестируете стандартное событие, ознакомьтесь с документацией для разработчиков Shopify об описаниях стандартных событий, чтобы убедиться, что вы выполняете все необходимые действия для запуска этого события.

Тестирование с помощью вспомогательных инструментов для сторонних пикселей

SDK (набор для разработки программного обеспечения) для пикселей содержит инструменты для сбора информации о поведении клиентов. Вы можете использовать вспомогательный инструмент от поставщика стороннего пикселя, чтобы проверить следующие аспекты работы вашего пикселя и убедиться, что SDK пикселя работает должным образом:

Проверка загрузки SDK стороннего пикселя

Действия для проверки вкладки сети зависят от используемого вами веб-браузера. Например, чтобы узнать, как проверить вкладку сети в Google Chrome, ознакомьтесь с документацией Chrome для разработчиков «Анализ сетевой активности».

Чтобы проверить, загружается ли SDK стороннего пикселя, сначала нужно получить у стороннего поставщика код с URL-адресом SDK и добавить его в код пикселя. За поддержкой обратитесь к поставщику стороннего пикселя.

Шаги:

  1. В панели администратора Shopify перейдите в раздел Настройки > События клиентов.

  2. Нажмите на пользовательский пиксель, который хотите протестировать.

  3. В разделе «Код» добавьте SDK пикселя, предоставленный вашим сторонним поставщиком, в конец кода вашего пикселя.

  4. Нажмите «Сохранить».

  5. Посетите ваш интернет-магазин, а затем проверьте вкладку сети, чтобы убедиться, что URL-адрес SDK стороннего поставщика загружается.

  6. Необязательно: если SDK стороннего пикселя не загружается, проверьте наличие ошибок выполнения JavaScript в песочнице. Например, в Chrome можно выбрать конкретный iFrame для просмотра его журналов консоли, а затем отфильтровать журналы по конкретному пикселю, который вы тестируете. Чтобы узнать больше о проверке ошибок выполнения JavaScript в Chrome, ознакомьтесь с документацией Chrome «Отладка JavaScript».

Если SDK стороннего пикселя не загружается во время тестирования, обратитесь за поддержкой к поставщику стороннего пикселя.

Другие тесты SDK стороннего пикселя

Чтобы проверить, инициализируется ли SDK стороннего пикселя и собирает ли он события, ознакомьтесь с документацией вашего стороннего поставщика пикселей.

Чтобы проверить, собирает ли SDK пикселя события, вам может потребоваться проверить вкладку сети в браузере. Действия для проверки вкладки сети зависят от используемого вами веб-браузера. Например, чтобы узнать, как проверить вкладку сети в браузере Google Chrome, ознакомьтесь с документацией Chrome для разработчиков «Анализ сетевой активности».