მორგებული პიქსელის კოდის შექმნა

გაფრთხილება

მორგებული პიქსელები გაფართოებული ფუნქციაა, რომელიც მოითხოვს JavaScript-ის ცოდნას. მოქმედ კანონებთან შესაბამისობა, თანხმობები, კოდის უსაფრთხოება, ხარვეზების აღმოფხვრა და განახლებები შენი პასუხისმგებლობაა. პიქსელები ექვემდებარება Shopify-ს მომსახურების პირობებს.

მორგებული პიქსელების დამატება და გამოყენება Shopify-ს მიერ მხარდაჭერილი არ არის. თუ მორგებული პიქსელის დამატებაში ან გამოყენებაში დახმარება გჭირდება, შეგიძლია დაიქირავო Shopify-ის პარტნიორი.

ეს გვერდი შეიცავს ინსტრუქციებს მესამე მხარის პიქსელისთვის მორგებული პიქსელის კოდის შესაქმნელად, რათა შეძლო კონკრეტული მომხმარებლის მოვლენების თვალყურის დევნება. მორგებული პიქსელისთვის კოდის შექმნის შემდეგ, შეგიძლია პიქსელი დაამატო შენს Shopify-ს მაღაზიაში.

შენიშვნა

მორგებული პიქსელის შექმნამდე, გაუმჯობესებული სტაბილურობის, უსაფრთხოებისა და ეფექტურობისთვის, უნდა გადახედო ხელმისაწვდომ აპებს. თუმცა, თუ არ არსებობს შენს საჭიროებებზე მორგებული აპი, მაშინ შეგიძლია შექმნა მორგებული პიქსელი.

მზადება მორგებული პიქსელის შესაქმნელად

მორგებული პიქსელის შექმნამდე, გადახედე შემდეგ ინფორმაციას, რათა დარწმუნდე, რომ გესმის შენი პიქსელის კონფიგურაციის პრინციპი:

• პიქსელებთან დაკავშირებული რისკები.
• Shopify-ის პიქსელების sandbox-ის შეზღუდვები.
• Shopify-ის პიქსელების sandbox-ის API-ის გამოყენება.
• მომხმარებლის მოვლენების თრექინგის სქემა.

მორგებული პიქსელის დამატებისას უთითებ შემდეგ ინფორმაციას:

• მესამე მხარის JavaScript პიქსელი.
• ქცევითი მოვლენები, რომელთა თრექინგიც გსურს.
• მომხმარებლის კონფიდენციალურობის თანხმობის პარამეტრები.

მორგებული პიქსელის კოდის შექმნა

განავითარე შენი ბიზნესი

ეს არის გაფართოებული სახელმძღვანელო და მას Shopify-ის მხარდაჭერა არ აქვს. თუ მორგებული პიქსელის დამატებაში დახმარება გჭირდება, შეგიძლია დაიქირავო Shopify-ის პარტნიორი.

მორგებული პიქსელის კოდის შექმნა მოიცავს შემდეგ ნაბიჯებს:

1. მოამზადე მესამე მხარის JavaScript SDK.
2. დააკონფიგურირე შენი პიქსელი მომხმარებლის მოვლენებზე თვალის სადევნებლად.
3. დააკონფიგურირე შენი პიქსელისთვის მომხმარებლის კონფიდენციალურობის თანხმობის პარამეტრები.

მესამე მხარის JavaScript SDK-ის მომზადება

მესამე მხარის სერვისი, რომელთანაც მუშაობ, გაწვდის კოდს, რომელიც ინტეგრირებულია პიქსელთან. პიქსელს ჩვეულებრივ აქვს 2 კომპონენტი: JavaScript SDK და თრექინგის კოდი. მესამე მხარის სერვისის კოდში არსებული ნებისმიერი HTML უნდა წაიშალოს, რადგან Shopify-ის პიქსელების sandbox მხოლოდ 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 -->

Meta-ს კოდიდან HTML-ის წაშლის შემდეგ, დაგრჩება Meta-ს პიქსელის SDK და მისი ინიციალიზაციის კოდი. 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);

Meta-ს პიქსელის SDK ავტომატურად არ გადასცემს მონაცემებს 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');

Google-ის პიქსელის SDK ავტომატურად არ გადასცემს მონაცემებს Shopify-ის მორგებული პიქსელიდან. მონაცემების გადასაცემად, საჭიროა მოვლენების გამოწერა.

მომხმარებლის მოვლენებზე თვალის დევნება

პიქსელის SDK-ის ჩატვირთვისა და ინიციალიზაციის შემდეგ, თრექინგისთვის მასში მოვლენები უნდა გადასცე. ეს კეთდება მოვლენების გამოწერით, შემდეგ კი მოვლენის მონაცემების პიქსელის SDK-ში გადაცემით, რათა იგი მესამე მხარის სერვისმა დაამუშაოს.

სტანდარტული მოვლენების გამოწერა

Shopify გთავაზობს მოვლენების სტანდარტულ ნაკრებს, რაც აადვილებს იმის უზრუნველყოფას, რომ შენი პიქსელი აგროვებდეს საჭირო მონაცემებს.

მოვლენების გამოწერა შეგიძლია Shopify Pixels Extension API-ის გამოყენებით. დაგჭირდება მესამე მხარის პიქსელის კოდის განთავსება იმ მოვლენასთან ერთად, რომელსაც იწერ.

ეს არის Meta-ს პიქსელის PageView მოვლენის მაგალითი. გაითვალისწინე, რომ 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-ის დეველოპერის დოკუმენტაცია.

თანხმობისა და მონაცემთა გაყიდვის პარამეტრების კონფიგურაცია

შენიშვნა

თქვენ პასუხისმგებელი ხართ კონფიდენციალურობის საკუთარ შესაბამისობაზე და უნდა გაიაროთ კონსულტაცია თქვენს იურიდიულ მრჩეველთან, რათა გაარკვიოთ, თუ როგორ შეიძლება იმოქმედოს თქვენს რეგიონში და იმ რეგიონში მოქმედმა კანონებმა თქვენს ბიზნესზე, სადაც ყიდით. Shopify პლატფორმის გამოყენებით პროდუქტების გასაყიდად, უნდა დაემორჩილოთ თქვენი ბიზნესისა და მომხმარებლების იურისდიქციის კანონებს, Shopify-ის მომსახურების პირობებს, Shopify-ის მისაღები გამოყენების პოლიტიკას და ნებისმიერ სხვა შესაბამის პოლიტიკას. შეიტყვეთ მეტი მომხმარებლის კონფიდენციალურობის შესახებ.

ბაზრებში, რომლებიც კონფიგურირებულია თანხმობის მოთხოვნისთვის, როგორიცაა ევროპის ეკონომიკური სივრცე (EEA) და გაერთიანებული სამეფო, ვებ-პიქსელები ეშვება მხოლოდ მაშინ, როდესაც ვებსაიტის ვიზიტორები გასცემენ პიქსელის კონფიგურაციაში მოთხოვნილ ნებართვებს.

ნაგულისხმევად, ახალი მორგებული პიქსელები მოითხოვს მარკეტინგის და ანალიტიკის ნებართვებს. შეგიძლია მოარგო მოთხოვნილი ნებართვები შენი მორგებული პიქსელის დეტალების განყოფილებაში: მომხმარებლის კონფიდენციალურობა > ნებართვა.

მსგავსად ამისა, მონაცემთა გაყიდვად კონფიგურირებული პიქსელები არ გაეშვება იმ მომხმარებლებისთვის, რომლებმაც უარი თქვეს მონაცემთა გაყიდვაზე ან გაზიარებაზე, გარდა იმ შემთხვევისა, როდესაც პიქსელს აქვს მონაცემთა შეზღუდული გამოყენების მხარდაჭერა. ნაგულისხმევად, ახალი მორგებული პიქსელები კლასიფიცირდება როგორც მონაცემთა გაყიდვა. შეგიძლია მოარგო, შეგროვებული მონაცემები დაკვალიფიცირდეს თუ არა როგორც მონაცემთა გაყიდვა შენი მორგებული პიქსელის დეტალების განყოფილებაში: მომხმარებლის კონფიდენციალურობა > მონაცემთა გაყიდვა.

მორგებული პიქსელების დეველოპერებს შეუძლიათ მეტის შეტყობა თანხმობის შეგროვებისა და რეგისტრაციის შესახებ.

თითოეულ პიქსელს შეიძლება ჰქონდეს განსხვავებული სახელი თითოეული მიზნისთვის. უნდა გაეცნო მესამე მხარის პიქსელის დოკუმენტაციას, რათა გაიგო, თუ როგორ უკავშირდება ის Shopify-ის განმარტებებს.

მაგალითად, ქვემოთ მოცემულია, თუ როგორ უკავშირდება მარკეტინგის და ანალიტიკის მიზნები Google-ის Consent Mode-ს:

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