Ustvarjanje kode piksla po meri

Pozor

Piksli po meri so napredna funkcija, ki zahteva znanje JavaScripta. Za skladnost z veljavno zakonodajo, soglasja, varnost kode, odpravljanje težav in posodobitve ste odgovorni sami. Za piksle veljajo Pogoji storitve Shopify.

Shopify ne podpira dodajanja in uporabe pikslov po meri. Če pri dodajanju ali uporabi piksla po meri potrebujete pomoč, lahko najamete partnerja za Shopify.

Ta stran vključuje navodila za ustvarjanje kode piksla po meri za piksel zunanjega izvajalca, da lahko sledite specifičnim dogodkom strank. Ko ustvarite kodo za piksel po meri, ga lahko dodate v svojo trgovino Shopify.

Opomba

Preden ustvarite piksel po meri, preglejte razpoložljive aplikacije za izboljšano stabilnost, varnost in uspešnost. Če ni na voljo nobene aplikacije, ki bi izpolnjevala vaše potrebe, pa lahko ustvarite piksel po meri.

Priprave na ustvarjanje piksla po meri

Preden ustvarite piksel po meri, preglejte naslednje informacije, da se seznanite s konfiguracijo piksla:

• Tveganja, povezana s piksli.
• Omejitve peskovnika za piksle v Shopifyju.
• Uporaba API-ja peskovnika za piksle v Shopifyju.
• Shema za sledenje dogodkom strank.

Ko dodate piksel po meri, določite naslednje informacije:

• Piksel zunanjega izvajalca v JavaScriptu.
• Vedenjski dogodki, ki jim želite slediti.
• Nastavitve soglasja za zasebnost strank.

Ustvarjanje kode za piksel po meri

Razvijte svoje podjetje

To je napredna vadnica, ki je Shopify ne podpira. Če pri dodajanju piksla po meri potrebujete pomoč, lahko najamete partnerja za Shopify.

Ustvarjanje kode za piksel po meri vključuje naslednje korake:

1. Pripravite JavaScript SDK zunanjega izvajalca.
2. Konfigurirajte piksel za sledenje dogodkom strank.
3. Konfigurirajte nastavitve soglasja za zasebnost strank za svoj piksel.

Priprava JavaScript SDK-ja zunanjega izvajalca

Storitev zunanjega izvajalca, s katerim sodelujete, vam posreduje kodo, ki je integrirana s pikslom. Piksel ima običajno 2 komponenti: JavaScript SDK in kodo za sledenje. Morebiten HTML v kodi storitve zunanjega izvajalca je treba odstraniti, saj peskovnik za piksle v Shopifyju podpira le JavaScript.

Spodaj je primer piksla Meta. Piksli se med posameznimi zunanjimi izvajalci nekoliko razlikujejo.

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

Ko iz kode Meta odstranite HTML, ostaneta Metin SDK za piksle in koda za njegovo inicializacijo. Koda za sledenje dogodkom PageView je bila prav tako odstranjena, ker bo dodana v naslednjem 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);

Metin SDK za piksle ne prenaša samodejno podatkov iz piksla po meri v Shopifyju. Za prenos podatkov se morate naročiti na dogodke.

Lahko naletite na piksle, ki se nalagajo z oznako script src=. Koda HTML v pikslih v Shopifyju ni podprta, zato boste morali oznako script src= zamenjati z ekvivalentom v JavaScriptu.

Tukaj je vzorčni piksel storitve Google Analytics, ki se naloži z oznako 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>

Del script src= je mogoče zamenjati z ekvivalentom v JavaScriptu. Vedno se prepričajte, da se vaš atribut src ujema s tistim v različici 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');

Googlov SDK za piksel ne prenaša samodejno podatkov iz Shopifyjevega piksla po meri. Za prenos podatkov se morate naročiti na dogodke.

Sledenje dogodkom strank

Po nalaganju in inicializaciji SDK-ja piksla mu morate posredovati dogodke za sledenje. To storite tako, da se naročite na dogodke in nato podatke o dogodkih posredujete v SDK piksla, da jih obdela storitev zunanjega izvajalca.

Naročanje na standardne dogodke

Shopify ponuja standarden nabor dogodkov, kar olajša zagotavljanje, da vaš piksel zbira potrebne podatke.

Na dogodke se lahko naročite prek API-ja Shopify Pixels Extension API. Kodo piksla zunanjega izvajalca boste morali vstaviti v dogodek, na katerega se naročate.

To je primer dogodka PageView za piksel Meta. Upoštevajte, da je fbq("track") del Metine kode, vsako podjetje pa bo imelo svojo različico, za katero boste morali poiskati informacije v njihovi dokumentaciji.

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

Nekateri dogodki imajo metapodatke, ki jih lahko posredujete v svoj piksel. Tu je primer posredovanja podrobnosti o izdelku v Metin dogodek 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,
  });
});

Naročanje na dogodke strank po meri

Če želite slediti dodatnim dogodkom strank, na primer ko nekdo klikne gumb, lahko dodate dogodke strank po meri. Na dogodke po meri se lahko naročite na enak način kot na standardne dogodke. Navedite ime dogodka, na katerega se želite naročiti, in podatke posredujte v piksel ponudnika storitev zunanjega izvajalca.

To je primer, kako je lahko objavljen dogodek po meri videti v datotekah liquid vaše teme:

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

To je primer, kako lahko konfigurirate svoj piksel za naročanje na ta dogodek po meri:

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

Za več informacij o dogodkih po meri si oglejte dokumentacijo Shopify Developer Documentation.

Konfiguracija nastavitev soglasja in prodaje podatkov

Opomba

Sami ste odgovorni za skladnost z določili glede zasebnosti, zato se posvetujte s svojim pravnim svetovalcem, da ugotovite, kako lahko zakoni v vaši regiji in regiji, v kateri prodajate, vplivajo na vaše poslovanje. Za prodajo izdelkov prek platforme Shopify morate upoštevati zakone jurisdikcije vašega podjetja in vaših strank, Shopify Terms of Service, Shopify Acceptable Use Policy in vse druge veljavne pravilnike. Preberite več informacij o zasebnosti strank.

Na trgih, kjer se zahteva soglasje, kot sta Evropski gospodarski prostor (EGP) in Združeno kraljestvo, se spletni piksli zaženejo samo, če so obiskovalci spletne strani podelili dovoljenja, zahtevana v konfiguraciji piksla.

Novi piksli po meri privzeto zahtevajo dovoljenja za Trženje in Analitiko. Dovoljenja, ki so zahtevana, lahko prilagodite v razdelku Zasebnost strank > Dovoljenje v podrobnostih vašega piksla po meri.

Podobno se piksli, konfigurirani kot prodaja podatkov, ne bodo zagnali za stranke, ki so zavrnile prodajo ali deljenje podatkov, razen če piksel podpira omejeno uporabo podatkov. Privzeto so novi piksli po meri opredeljeni kot prodaja podatkov. V razdelku Zasebnost strank > Prodaja podatkov v podrobnostih piksla po meri lahko prilagodite, ali se zbrani podatki opredelijo kot prodaja podatkov.

Razvijalci pikslov po meri lahko preberejo več informacij o zbiranju in registriranju soglasij.

Vsak piksel ima lahko drugačno ime za posamezni namen. Preberite dokumentacijo piksla zunanjega izvajalca, da boste razumeli, kako se to ujema s Shopifyjevimi definicijami.

V nadaljevanju je na primer prikazano, kako se namena Trženje in Analitika ujemata z Googlovim načinom za privolitve (Consent Mode):

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

Primer piksla po meri

Spodaj je primer kode za piksel Meta. Koda piksla se razlikuje glede na ponudnika storitve zunanjega izvajalca in dogodkov, ki jim želite slediti. Za seznam razpoložljivih dogodkov si oglejte referenco za dogodke strank.

Primer piksla Meta po meri

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