Помощь
Войти

Создание кода пользовательского пикселя

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

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

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

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

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

  • Сторонний JavaScript-пиксель.
  • Поведенческие события, которые вы хотите отслеживать.
  • Настройки согласия на конфиденциальность клиентов.

Создание кода для пользовательского пикселя

Создание кода для пользовательского пикселя включает следующие шаги:

  1. Подготовка стороннего JavaScript SDK.
  2. Настройка пикселя для отслеживания событий клиентов.
  3. Настройка согласия на конфиденциальность клиентов для вашего пикселя.

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

Сторонний сервис, с которым вы работаете, предоставляет вам код, интегрируемый с пикселем. Пиксель обычно состоит из 2 компонентов: JavaScript SDK и кода для отслеживания. Любой HTML в коде стороннего сервиса необходимо удалить, так как песочница пикселей Shopify поддерживает только JavaScript.

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

​​<!-- 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=. HTML не поддерживается в пикселях Shopify, поэтому вам потребуется заменить script src= на эквивалент на JavaScript.

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

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

Это пример события PageView для пикселя Meta. Обратите внимание, что fbq("track") является частью кода Meta, и у каждой компании будет своя собственная версия, информацию о которой следует искать в их документации.

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

Некоторые события имеют метаданные, которые можно передать в пиксель. Вот пример передачи некоторых данных о товаре в событие Meta ViewContent:

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.

На рынках, где требуется согласие, таких как Европейская экономическая зона (EEA) и Великобритания, веб-пиксели запускаются только в том случае, если посетители веб-сайта предоставили разрешения, требуемые в конфигурации пикселя.

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

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

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

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

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

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

Пример пользовательского пикселя

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

Пример пользовательского мета-пикселя

!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,
  });
});