Створення коду спеціального пікселя

Увага

Спеціальні пікселі — це розширена функція, яка потребує знання JavaScript. Ви несете відповідальність за дотримання чинного законодавства, отримання згод, безпеку коду, усунення несправностей і встановлення оновлень. На пікселі поширюються умови надання послуг Shopify.

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

На цій сторінці містяться інструкції зі створення коду спеціального пікселя для стороннього пікселя, щоб ви могли відстежувати певні дії користувачів. Створивши код для спеціального пікселя, ви зможете додати цей піксель у свій магазин Shopify.

Примітка

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

Підготовка до створення спеціального пікселя

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

• Ризики, пов’язані з пікселями.
• Обмеження тестового середовища пікселів Shopify.
• Використання API тестового середовища пікселів Shopify.
• Схема відстеження дій користувачів.

Під час додавання спеціального пікселя потрібно вказати таку інформацію:

• Сторонній піксель JavaScript.
• Поведінкові події, які потрібно відстежувати.
• Налаштування згоди щодо конфіденційності клієнтів.

Створення коду для спеціального пікселя

Розвиток бізнесу

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

Створення коду для спеціального пікселя передбачає такі кроки:

1. Підготуйте сторонній SDK JavaScript.
2. Налаштуйте свій піксель для відстеження дій користувачів.
3. Задайте налаштування згоди щодо конфіденційності клієнтів для свого пікселя.

Підготовка стороннього SDK JavaScript

Сторонній сервіс, з яким ви працюєте, надає код, що інтегрується з пікселем. Піксель зазвичай має 2 компоненти: SDK JavaScript і код відстеження. Будь-який код HTML у коді стороннього сервісу потрібно видалити, оскільки тестове середовище пікселів Shopify підтримує лише JavaScript.

Ось приклад пікселя Meta. Пікселі можуть дещо відрізнятися залежно від стороннього сервісу.

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Після видалення HTML із коду Meta залишається SDK пікселя Meta та код для його ініціалізації. Код відстеження події PageView також було видалено, оскільки його буде додано на наступному етапі.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

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

Вам можуть траплятися пікселі, які завантажуються за допомогою script src=. Оскільки пікселі Shopify не підтримують HTML, вам потрібно буде замінити script src= на еквівалент JavaScript.

Ось приклад пікселя Google Analytics, який завантажується за допомогою script src=:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

Частину script src= можна замінити на еквівалент JavaScript. Завжди перевіряйте, щоб ваш атрибут src відповідав версії HTML:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

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

Відстеження дій користувачів

Після завантаження та ініціалізації SDK пікселя потрібно передати в нього події для відстеження. Для цього необхідно підписатися на події, а потім передати дані про події в SDK пікселя для обробки стороннім сервісом.

Підписка на стандартні події

Shopify пропонує стандартний набір подій, що дає змогу легко переконатися, що ваш піксель збирає необхідні дані.

Ви можете підписатися на події за допомогою Shopify Pixels Extension API. Вам потрібно буде розмістити код стороннього пікселя разом із подією, на яку ви підписуєтеся.

Це приклад події PageView для пікселя Meta. Зверніть увагу, що fbq("track") є частиною коду Meta, і кожна компанія матиме власну версію, щодо якої вам потрібно буде звернутися до її документації.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Деякі події мають метадані, які ви можете передати у свій піксель. Ось приклад передачі певних відомостей про товар у подію ViewContent компанії Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Підписка на спеціальні дії користувачів

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

Ось приклад того, як опублікована спеціальна подія може виглядати у файлах Liquid вашої теми:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Ось приклад того, як можна налаштувати піксель на підписку на цю спеціальну подію:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Для отримання додаткової інформації про спеціальні події перегляньте документацію для розробників Shopify.

Налаштування згоди та продажу даних

Примітка

Ви несете відповідальність за дотримання вимог щодо конфіденційності й маєте проконсультуватися зі своїм юрисконсультом, щоб визначити, як закони у вашому регіоні та регіоні, у якому ви продаєте, можуть вплинути на ваш бізнес. Щоб продавати товари за допомогою платформи Shopify, ви повинні дотримуватися законів юрисдикції вашого бізнесу та ваших клієнтів, Умов надання послуг Shopify, Політики прийнятного використання Shopify та будь-яких інших застосовних політик. Дізнатися більше про конфіденційність клієнтів.

На ринках, де налаштовано обов’язкову згоду, як-от Європейська економічна зона (ЄЕЗ) і Велика Британія, вебпікселі запускаються лише тоді, коли відвідувачі вебсайту надали дозволи, які вимагаються в конфігурації пікселя.

За замовчуванням нові спеціальні пікселі потребують дозволів на Маркетинг та Аналітику. Ви можете налаштувати, які дозволи потрібні, у розділі Конфіденційність клієнтів > Дозвіл у відомостях про ваш спеціальний піксель.

Подібним чином, пікселі, налаштовані як продаж даних, не будуть запускатися для клієнтів, які відмовилися від продажу або поширення даних, якщо тільки піксель не підтримує обмежене використання даних. За замовчуванням нові спеціальні пікселі розглядаються як продаж даних. Ви можете налаштувати, чи кваліфікуються зібрані дані як продаж даних, у розділі Конфіденційність клієнтів > Продаж даних у відомостях про ваш спеціальний піксель.

Розробники спеціальних пікселів можуть дізнатися більше про збирання та реєстрацію згоди.

Кожен піксель може мати різну назву для кожної цілі. Вам слід ознайомитися з документацією пікселя третьої сторони, щоб зрозуміти, як це співвідноситься з визначеннями Shopify.

Наприклад, ось як цілі Маркетинг та Аналітика співвідносяться з режимом згоди Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Приклад спеціального пікселя

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

Приклад спеціального пікселя Meta

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});