Създаване на персонализиран код за пиксел

Внимание

Персонализираните пиксели са разширена функция, която изисква познания по JavaScript. Спазването на приложимите закони, съгласията, сигурността на кода, отстраняването на неизправности и актуализациите са Ваша отговорност. Пикселите са предмет на Условията за ползване на Shopify.

Добавянето и използването на персонализирани пиксели не се поддържа от Shopify. Ако се нуждаете от помощ при добавянето или използването на персонализиран пиксел, можете да наемете Shopify партньор.

Тази страница включва инструкции за създаване на персонализиран код за пиксел на трета страна, така че да можете да проследявате конкретни клиентски събития. След като създадете кода за своя персонализиран пиксел, можете да добавите пиксела към Вашия магазин в Shopify.

На тази страница

Подготовка за създаване на персонализиран пиксел

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

Когато добавяте персонализиран пиксел, Вие посочвате следната информация:

JavaScript пикселът на третата страна.
Събитията, свързани с поведението, които искате да проследявате.
Настройките за съгласие за поверителност на клиентите.

Създаване на код за персонализиран пиксел

Създаването на код за персонализиран пиксел включва следните стъпки:

Подготовка на JavaScript SDK на третата страна.
Конфигуриране на Вашия пиксел за проследяване на клиентски събития.
Конфигуриране на настройки за съгласие за поверителност на клиентите за Вашия пиксел.

Подготовка на 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 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,
  });
});