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

Осторожно

Пользовательские пиксели — это расширенная функция, требующая знания JavaScript. Вы несете ответственность за соблюдение применимых законов, получение согласий, безопасность кода, поиск неисправностей и обновления. На пиксели распространяются Условия предоставления услуг Shopify.

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

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

Вы можете использовать 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, чтобы изучить все возможности веб-пикселей. Для получения дополнительной информации ознакомьтесь с API веб-пикселей.

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

Убедитесь, что пользовательский пиксель подключен

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

Шаги:

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

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

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

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

Примечание

Инструмент Shopify Pixel Helper несовместим с магазинами headless-коммерции или магазинами, защищенными паролем.

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

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

Шаги:

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

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

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

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

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

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

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

6. Чтобы просмотреть полученные данные события, нажмите , чтобы расширить диалоговое окно Pixel Helper.

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

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

• Зеленая точка означает, что подписка на событие прошла успешно и функция обратного вызова сработала правильно.
• Красная точка означает, что подписка на событие прошла успешно, но функция обратного вызова не сработала. Узнайте больше о поиске неисправностей в пользовательском пикселе.
• Pixel Helper отображает неперехваченные ошибки, которые возникают на верхнем уровне или в функции обратного вызова. Ошибки верхнего уровня отображаются при загрузке инструмента Pixel Helper. Сообщения об ошибках обратного вызова отображаются, если нажать, чтобы расширить событие с красной точкой.
• Следующий пример кода содержит ошибку обратного вызова и ошибку верхнего уровня. В зависимости от расположения ошибки верхнего уровня пиксель может работать частично.

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-баннеры позволяют запрашивать у клиентов согласие на использование файлов cookie. Вы можете перейти в Shopify App Store, чтобы добавить cookie-баннер в свой магазин.

Дополнительный поиск неисправностей

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

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

Тестирование с помощью сторонних инструментов Pixel Helper

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

• Проверьте, загружен ли сторонний 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 для разработчиков Анализ сетевой активности.