Kreiranje koda prilagođenog piksela

Oprez

Prilagođeni pikseli su napredna funkcija koja zahteva poznavanje programskog jezika JavaScript. Usklađenost sa važećim zakonima, pristanci, bezbednost koda, rešavanje problema i ažuriranja su vaša odgovornost. Pikseli podležu Shopify uslovima korišćenja usluge.

Dodavanje i korišćenje prilagođenih piksela nije podržano od strane platforme Shopify. Ako vam je potrebna pomoć sa dodavanjem ili korišćenjem prilagođenog piksela, možete da angažujete Shopify partnera.

Ova stranica uključuje uputstva za kreiranje koda prilagođenog piksela za piksel treće strane da biste mogli da pratite određene događaje kupaca. Nakon što kreirate kôd za prilagođeni piksel, možete da dodate piksel u svoju Shopify prodavnicu.

Napomena

Pre nego što kreirate prilagođeni piksel, trebalo bi da pregledate dostupne aplikacije zbog poboljšane stabilnosti, bezbednosti i učinka. Međutim, ako ne postoji aplikacija koja ispunjava vaše potrebe, možete da kreirate prilagođeni piksel.

Priprema za kreiranje prilagođenog piksela

Pre nego što kreirate prilagođeni piksel, pregledajte sledeće informacije da biste bili sigurni da razumete kako da konfigurišete piksel:

• Rizici u vezi sa pikselima.
• Ograničenja za sandbox piksela na platformi Shopify.
• Korišćenje API-ja za sandbox piksela platforme Shopify.
• Šema za praćenje događaja kupaca.

Kada dodate prilagođeni piksel, navodite sledeće informacije:

• JavaScript piksel treće strane.
• Događaje u ponašanju koje želite da pratite.
• Podešavanja pristanka na privatnost kupaca.

Kreirajte kôd za prilagođeni piksel

Razvijte svoje poslovanje

Ovo je napredno uputstvo i Shopify ne pruža podršku za njega. Ako vam je potrebna pomoć pri dodavanju prilagođenog piksela, možete da angažujete Shopify partnera.

Kreiranje koda za prilagođeni piksel obuhvata sledeće korake:

1. Pripremite JavaScript SDK treće strane.
2. Konfigurišite piksel da prati događaje kupaca.
3. Konfigurišite podešavanja pristanka na privatnost kupaca za piksel.

Priprema JavaScript SDK rešenja treće strane

Usluga treće strane sa kojom radite pruža vam kôd koji je integrisan sa pikselom. Piksel obično ima 2 komponente: JavaScript SDK i kôd za praćenje. Svaki HTML u kodu usluge treće strane mora da se ukloni jer sandbox piksela na platformi Shopify podržava isključivo JavaScript.

Ovo je primer za Meta piksel. Pikseli će se malo razlikovati u zavisnosti od treće strane.

​​<!-- 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 -->

Kada uklonite HTML iz koda kompanije Meta, ostaće vam SDK Meta piksela i kôd za njegovu inicijalizaciju. Kôd za praćenje događaja PageView je takođe uklonjen, jer će biti dodat u sledećem koraku.

​​!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 piksela ne prenosi automatski podatke sa prilagođenog piksela na platformi Shopify. Za prenos podataka morate da se pretplatite na događaje.

Možda ćete naići na piksele koji se učitavaju pomoću atributa script src=. HTML nije podržan u pikselima na platformi Shopify, pa ćete morati da zamenite script src= JavaScript ekvivalentom.

Ovo je primer Google Analytics piksela koji se učitava pomoću atributa 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>

Deo script src= se može zameniti JavaScript ekvivalentom. Uvek proverite da li se vaš atribut src podudara sa HTML verzijom:

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 za Google piksel ne prenosi automatski podatke sa prilagođenog piksela na platformi Shopify. Za prenos podataka morate da se pretplatite na događaje.

Praćenje događaja kupaca

Nakon učitavanja i inicijalizacije SDK-a piksela, u njega morate da prosledite događaje za praćenje. To se obavlja pretplatom na događaje, a zatim prosleđivanjem podataka o događajima u SDK piksela da bi ih obradila usluga treće strane.

Pretplatite se na standardne događaje

Shopify nudi standardan skup događaja, što olakšava kontrolu nad tim da li piksel prikuplja podatke koji su mu potrebni.

Možete da se pretplatite na događaje pomoću API-ja Shopify Pixels Extension API. Biće potrebno da postavite kôd piksela treće strane unutar događaja na koji se pretplaćujete.

Ovo je primer događaja PageView za Meta piksel. Oznaka fbq("track") je deo koda kompanije Meta, a svaka kompanija će imati svoju verziju za koju ćete morati da konsultujete njenu dokumentaciju.

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

Pojedini događaji imaju metapodatke koje možete da prosledite u piksel. Ovo je primer prosleđivanja nekih detalja o proizvodu u događaj ViewContent kompanije 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,
  });
});

Pretplatite se na prilagođene događaje kupaca

Ako želite da pratite dodatne događaje kupaca, kao što je klik na dugme, možete da dodate prilagođene događaje kupaca. Na prilagođene događaje se možete pretplatiti na isti način kao i na standardne događaje. Navedite naziv događaja na koji želite da se pretplatite i prosledite informacije u piksel pružaoca usluga treće strane.

Ovo je primer kako bi objavljeni prilagođeni događaj mogao da izgleda u liquid datotekama teme:

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

Ovo je primer kako biste mogli da konfigurišete piksel da se pretplati na taj prilagođeni događaj:

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

Za više informacija o prilagođenim događajima, pogledajte odeljak Shopify dokumentacija za programere.

Konfigurisanje pristanka i podešavanja za prodaju podataka

Napomena

Vi snosite odgovornost za usklađenost u vezi sa privatnošću i trebalo bi da se posavetujete sa pravnim savetnikom kako biste utvrdili na koji način zakoni u vašem regionu i regionu u kom prodajete mogu uticati na vaše poslovanje. Da biste prodavali proizvode na platformi Shopify, morate se pridržavati zakona vaše i nadležnosti vaših kupaca, Shopify uslova korišćenja usluge, Shopify politike prihvatljivog korišćenja i svih ostalih važećih pravila. Saznajte više o privatnosti kupaca.

Na tržištima koja su konfigurisana tako da zahtevaju pristanak, kao što su Evropski ekonomski prostor (EEA) i Ujedinjeno Kraljevstvo, veb-pikseli se izvršavaju tek nakon što posetioci veb-sajta daju dozvole neophodne u konfiguraciji piksela.

Novi prilagođeni pikseli podrazumevano zahtevaju dozvole za Marketing i Analitiku. Možete da prilagodite koje se dozvole zahtevaju u odeljku Privatnost kupaca > Dozvola u detaljima prilagođenog piksela.

Slično tome, pikseli konfigurisani za prodaju podataka se neće izvršavati za kupce koji su onemogućili prodaju ili deljenje podataka, osim u slučaju da piksel podržava ograničeno korišćenje podataka. Novi prilagođeni pikseli su podrazumevano klasifikovani kao prodaja podataka. Možete da prilagodite da li će se prikupljeni podaci klasifikovati kao prodaja podataka u odeljku Privatnost kupaca > Prodaja podataka u detaljima prilagođenog piksela.

Programeri prilagođenih piksela mogu da saznaju više o prikupljanju i evidentiranju pristanka.

Svaki piksel može imati drugačiji naziv za svaku od svrha. Potrebno je da se konsultujete sa dokumentacijom za piksele treće strane kako biste razumeli kako se povezuje sa definicijama platforme Shopify.

Na primer, evo kako su svrhe Marketing i Analitika povezane sa Google režimom pristanka:

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

Primer prilagođenog piksela

U nastavku se nalazi primer koda za Meta piksel. Kôd piksela se razlikuje u zavisnosti od pružaoca usluga treće strane i događaja koje želite da pratite. Konsultujte referencu za događaje kupaca za spisak dostupnih događaja.

Primer prilagođenog Meta piksela

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