Izrada koda za prilagođeni piksel

Oprez

Prilagođeni pikseli napredna su značajka koja zahtijeva poznavanje jezika JavaScript. Usklađenost s primjenjivim zakonima, suglasnosti, sigurnost koda, rješavanje problema i ažuriranja vaša su odgovornost. Pikseli podliježu Uvjetima pružanja usluge platforme Shopify.

Shopify ne podržava dodavanje i upotrebu prilagođenih piksela. Ako vam je potrebna pomoć pri dodavanju ili upotrebi prilagođenog piksela, možete angažirati Shopify partnera.

Ova stranica sadrži upute za izradu koda za prilagođeni piksel treće strane kako biste mogli pratiti određene korisnikove događaje. Nakon što izradite kod za prilagođeni piksel, možete ga dodati u svoju trgovinu na platformi Shopify.

Napomena

Prije nego što izradite prilagođeni piksel, trebali biste pregledati dostupne aplikacije radi veće stabilnosti, sigurnosti i učinkovitosti. Međutim, ako ne postoji aplikacija koja zadovoljava vaše potrebe, možete izraditi prilagođeni piksel.

Priprema za izradu prilagođenog piksela

Prije izrade prilagođenog piksela pregledajte sljedeće informacije kako biste bili sigurni da znate kako ga konfigurirati:

• Rizici povezani s pikselima.
• Ograničenja okruženja za testiranje piksela platforme Shopify.
• Upotreba API-ja okruženja za testiranje piksela platforme Shopify.
• Shema praćenja korisnikovih događaja.

Prilikom dodavanja prilagođenog piksela navodite sljedeće informacije:

• Piksel treće strane u jeziku JavaScript.
• Događaje ponašanja koje želite pratiti.
• Postavke suglasnosti o privatnosti korisnika.

Izrada koda za prilagođeni piksel

Razvijte svoje poslovanje

Ovo je napredna obuka i Shopify je ne podržava. Ako vam je potrebna pomoć pri dodavanju prilagođenog piksela, možete angažirati Shopify partnera.

Izrada koda za prilagođeni piksel obuhvaća sljedeće korake:

1. Priprema SDK-a treće strane u jeziku JavaScript.
2. Konfiguracija piksela za praćenje korisnikovih događaja.
3. Konfiguracija postavki suglasnosti za privatnost korisnika za piksel.

Priprema SDK-a treće strane u jeziku JavaScript

Usluga treće strane s kojom radite pruža vam kod koji je integriran s pikselom. Piksel obično ima dvije komponente: SDK u jeziku JavaScript i kod za praćenje. Sav HTML u kodu usluge treće strane mora se ukloniti jer okruženje za testiranje piksela platforme Shopify podržava isključivo JavaScript.

U nastavku se nalazi primjer Meta Pixela. Pikseli se neznatno razlikuju ovisno o trećoj strani.

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

Nakon uklanjanja HTML-a iz Metinog koda, ostaje vam SDK Meta Pixela i kod za njegovu inicijalizaciju. Kod za praćenje događaja PageView također je uklonjen jer će se dodati u sljedeć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 Pixela ne prenosi podatke automatski s prilagođenog piksela platforme Shopify. Da biste prenosili podatke, morate se pretplatiti na događaje.

Možda ćete naići na piksele koji se učitavaju s pomoću oznake script src=. HTML nije podržan u pikselima platforme Shopify, stoga ćete oznaku script src= morati zamijeniti ekvivalentom u jeziku JavaScript.

U nastavku je prikazan primjer piksela za Google Analytics koji se učitava s pomoću oznake 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>

Dio s oznakom script src= može se zamijeniti ekvivalentom u jeziku JavaScript. Uvijek provjerite podudara li se atribut src s verzijom HTML-a:

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');

Googleov SDK piksela ne prenosi automatski podatke s prilagođenog piksela platforme Shopify. Da biste prenosili podatke, morate se pretplatiti na događaje.

Praćenje korisnikovih događaja

Nakon učitavanja i inicijalizacije SDK-a piksela trebate proslijediti događaje u njega radi praćenja. To se radi tako da se pretplatite na događaje, a zatim proslijedite podatke o događaju u SDK piksela kako bi ih obradila usluga treće strane.

Pretplata na standardne događaje

Shopify nudi standardni skup događaja s pomoću kojeg možete lako osigurati da vaš piksel prikuplja potrebne podatke.

Na događaje se možete pretplatiti putem API-ja Shopify Pixels Extension API. Morat ćete umetnuti kod piksela treće strane uz događaj na koji se pretplaćujete.

Ovo je primjer događaja PageView za Meta Pixel. Napominjemo da je fbq("track") dio Metinog koda i da svako poduzeće ima vlastitu verziju za koju ćete morati proučiti njegovu dokumentaciju.

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

Neki događaji imaju metapodatke koje možete proslijediti u piksel. Evo primjera prosljeđivanja pojedinosti o proizvodu u Metin događaj 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,
  });
});

Pretplata na prilagođene korisnikove događaje

Ako želite pratiti dodatne korisnikove događaje, primjerice kad netko klikne gumb, možete dodati prilagođene korisnikove događaje. Na prilagođene se događaje možete pretplatiti na isti način kao na standardne. Deklarirajte naziv događaja na koji se želite pretplatiti i proslijedite informacije pikselu pružatelja usluge treće strane.

U nastavku se nalazi primjer kako bi se objavljeni prilagođeni događaj mogao prikazati u datotekama Liquid vaše teme:

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

U nastavku je prikazan primjer kako možete konfigurirati 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});
});

Više informacija o prilagođenim događajima potražite u odjeljku Shopify Developer Documentation.

Konfiguriranje postavki za privolu i prodaju podataka

Napomena

Sami ste odgovorni za vlastitu usklađenost u vezi s privatnosti i trebali biste se posavjetovati sa svojim pravnim savjetnikom kako biste utvrdili kako zakoni u vašoj regiji i regiji u kojoj prodajete mogu utjecati na vaše poslovanje. Za prodaju proizvoda na platformi Shopify, morate biti usklađeni sa zakonima nadležnosti svojeg poslovanja i svojih korisnika, dokumentima Shopify Terms of Service i Shopify Acceptable Use Policy te s ostalim primjenjivim pravilima. Saznajte više o privatnosti korisnika.

Na tržištima koja su konfigurirana tako da zahtijevaju privolu, kao što su Europski gospodarski prostor (EGP) i Ujedinjeno Kraljevstvo, web-pikseli pokreću se samo kada su posjetitelji mrežnog mjesta dali dopuštenja potrebna u konfiguraciji piksela.

Prema zadanim postavkama, novi prilagođeni pikseli zahtijevaju dopuštenja za Marketing i Analitiku. Možete prilagoditi koja su dopuštenja potrebna u odjeljku Privatnost korisnika > Dopuštenje u pojedinostima o prilagođenom pikselu.

Slično tome, pikseli konfigurirani za prodaju podataka neće se pokretati za korisnike koji su isključili mogućnost prodaje ili dijeljenja podataka, osim ako piksel podržava ograničenu upotrebu podataka. Prema zadanim postavkama, novi se prilagođeni pikseli klasificiraju kao prodaja podataka. U odjeljku Privatnost korisnika > Prodaja podataka u pojedinostima o prilagođenom pikselu možete prilagoditi hoće li se prikupljeni podaci klasificirati kao prodaja podataka.

Razvojni programeri za prilagođene piksele mogu saznati više o prikupljanju i registraciji privole.

Svaki piksel može imati različit naziv za svaku svrhu. Trebali biste provjeriti dokumentaciju za piksele treće strane kako biste razumjeli kako se mapira na Shopifyjeve definicije.

Na primjer, u nastavku je prikazano kako se svrhe kao što su Marketing i Analitika mapiraju na značajku Google's Consent Mode:

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

Primjer prilagođenog piksela

U nastavku je primjer koda za Meta Pixel. Kod za piksel razlikuje se ovisno o pružatelju usluga treće strane i događajima koje želite pratiti. Potražite referencu za korisnikove događaje za popis dostupnih događaja.

Primjer prilagođenog Meta Pixela

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