Тестування спеціальних пікселів

Увага

Спеціальні пікселі — це розширена функція, яка потребує знань 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. Якщо піксель не підключено, виконайте такі дії:

   1. Натисніть > Переглянути відомості.
   2. Необов’язково: перегляньте та оновіть код пікселя, а потім натисніть Зберегти.
   3. Натисніть Підключити.
   4. У діалоговому вікні підтвердження натисніть Підключити.

Тестування спеціального пікселя за допомогою Shopify Pixel Helper

Переконавшись, що спеціальний піксель підключено, ви можете використати Shopify Pixel Helper для перевірки того, чи надсилає ваш піксель дані та чи отримує дані з вашого магазину.

Перед використанням Shopify Pixel Helper зверніть увагу на таке:

• За допомогою Shopify Pixel Helper можна тестувати лише один спеціальний піксель за раз.
• Неможливо вносити зміни до пікселя під час його тестування в Shopify Pixel Helper. Щоб протестувати нові зміни, збережіть піксель, закрийте вкладку Shopify Pixel Helper, а потім відкрийте Shopify Pixel Helper знову.
• Журнали подій очищуються під час переходу на нову сторінку. Наприклад, якщо ви додаєте товар у кошик і Shopify Pixel Helper реєструє подію product_added_to_cart, цей запис буде очищено, коли ви перейдете на нову сторінку товару або сторінку кошика.
• У Shopify Pixel Helper немає кнопки закриття. Щоб зупинити тестування, вам потрібно закрити вкладку, яку відкрив Shopify Pixel Helper.
• Shopify Pixel Helper не сумісний з магазинами на базі headless-комерції або магазинами в приватному режимі.
• Якщо ваш інтернет-магазин перебуває в приватному режимі, радимо вимкнути приватний режим, щоб використовувати 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. Щоб переглянути отримані дані про подію, натисніть , щоб розгорнути діалогове вікно помічника щодо пікселів.

Перегляд розділу отриманих подій

Під час перевірки того, які події завантажуються на кроці 5, у розділі Events received діалогового вікна 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, цей інструмент має синхронізувати згоду з Shopify через Customer Privacy API. Якщо згода не синхронізована з Shopify, ваш піксель може не спрацювати навіть після того, як клієнт надасть згоду. Зверніться до свого стороннього постачальника, щоб підтвердити синхронізацію згоди з Shopify або отримати додаткову підтримку.

Порада

Банери файлів cookie дають змогу запитувати у клієнтів згоду на використання файлів cookie. Ви можете переглянути Shopify App Store, щоб додати банер файлів cookie до свого магазину.

Додаткове усунення несправностей

Якщо все ще незрозуміло, чи підписано ваш користувацький піксель на дію користувача належним чином, спробуйте виконати такі дії для усунення несправностей:

• Очистьте файли cookie у браузері.
• Якщо ви тестуєте стандартну подію, перегляньте документацію для розробників з описами стандартних подій Shopify, щоб переконатися, що ви виконуєте всі необхідні кроки для виклику події.

Якщо ви помітили різницю в кількості відстежуваних подій після міграції зі старіших налаштувань пікселя, перегляньте розділ Усунення несправностей після міграції.

Тестування за допомогою стороннього помічника щодо пікселів

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

• Перевірка завантаження стороннього SDK пікселя
• Перевірка того, чи ініціалізовано сторонній SDK пікселя і чи отримує він події

Перевірка завантаження стороннього SDK пікселя

Кроки для перевірки вкладки мережі залежать від веббраузера, який ви використовуєте. Наприклад, щоб дізнатися, як перевірити вкладку мережі в Google Chrome, перегляньте документацію Chrome для розробників Перевірка активності мережі.

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

Кроки:

1. У панелі адміністрування Shopify перейдіть у розділ Налаштування > Дії користувачів.

2. Натисніть спеціальний піксель, який потрібно протестувати.

3. У розділі Код додайте SDK пікселя, який надав сторонній постачальник, у кінець коду пікселя.

4. Натисніть Зберегти.

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

6. Необов'язково: якщо сторонній SDK пікселя не завантажується, перевірте наявність помилок виконання JavaScript у середовищі ізоляції (sandbox). Наприклад, у Chrome ви можете вибрати певний iFrame, щоб переглянути для нього журнали консолі, а потім звузити результати до певного пікселя, який ви тестуєте. Щоб дізнатися більше про перевірку помилок виконання JavaScript у Chrome, перегляньте документацію Chrome Налагодження JavaScript.

Якщо під час тестування сторонній SDK пікселя не завантажується, зверніться за підтримкою до свого стороннього постачальника пікселя.

Інші тестування стороннього SDK пікселя

Щоб перевірити, чи ініціалізовано сторонній SDK пікселя та чи збирає він події, зверніться до документації свого стороннього постачальника пікселя.

Щоб перевірити, чи збирає SDK пікселя події, вам може знадобитися перевірити вкладку мережі у своєму браузері. Кроки для перевірки вкладки мережі залежать від веббраузера, який ви використовуєте. Наприклад, щоб дізнатися, як перевірити вкладку мережі в браузері Google Chrome, перегляньте документацію Chrome для розробників Перевірка активності мережі.