Loo kohandatud piksli kood

Ettevaatust

Kohandatud pikslid on täiustatud funktsioon, mis nõuab JavaScripti teadmisi. Kohalduvatele seadustele vastavus, nõusolekud, koodi turvalisus, tõrkeotsing ja uuendused on sinu vastutusel. Pikslitele kehtivad Shopify teenusetingimused.

Shopify ei paku kohandatud pikslite lisamise ja kasutamise puhul tuge. Kui vajad kohandatud piksli lisamisel või kasutamisel abi, saad palgata Shopify partneri.

Sellel lehel on juhised kolmanda osapoole piksli jaoks kohandatud piksli koodi loomiseks, et saaksid jälgida kindlaid kliendisündmusi. Pärast kohandatud pikslile koodi loomist saad lisada piksli oma Shopify poodi.

Märkus

Enne kohandatud piksli loomist peaksid stabiilsuse, turvalisuse ja tulemuslikkuse parandamiseks vaatama üle saadaolevad rakendused. Kui aga sinu vajadustele vastavat rakendust pole, saad luua kohandatud piksli.

Kohandatud piksli loomiseks valmistumine

Enne kohandatud piksli loomist vaata üle järgnev teave veendumaks, et mõistad, kuidas oma pikslit seadistada:

• Pikslitega seotud riskid.
• Shopify pikslite liivakasti piirangud.
• Shopify pikslite liivakasti API kasutamine.
• Kliendisündmuste jälgimise skeem.

Kohandatud piksli lisamisel täpsustad järgmist teavet:

• Kolmanda osapoole JavaScripti piksel.
• Käitumuslikud sündmused, mida soovid jälgida.
• Kliendi privaatsusnõusoleku seaded.

Loo kohandatud piksli kood

Kasvata oma äri

See on edasijõudnutele mõeldud õpetus ja Shopify ei paku sellele tuge. Kui vajad kohandatud piksli lisamisel abi, võid palgata Shopify partneri.

Kohandatud piksli koodi loomine hõlmab järgmisi samme:

1. Valmista ette kolmanda osapoole JavaScripti SDK.
2. Seadista oma piksel kliendisündmusi jälgima.
3. Seadista oma pikslile kliendi privaatsuse nõusoleku seaded.

Kolmanda osapoole JavaScripti SDK ettevalmistamine

Kolmanda osapoole teenus, millega töötad, pakub sulle koodi, mis integreeritakse piksliga. Pikslil on tavaliselt kaks komponenti: JavaScripti SDK ja jälgimiskood. Kõik HTML-i osad kolmanda osapoole teenusekoodis tuleb eemaldada, kuna Shopify piksli liivakast toetab ainult JavaScripti.

Siin on Meta piksli näide. Pikslid võivad olenevalt kolmandast osapoolest veidi erineda.

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

Pärast HTML-i eemaldamist Meta koodist jäävad alles Meta piksli SDK ja selle lähtestamise kood. PageView sündmuse jälgimiskood on samuti eemaldatud, kuna see lisatakse järgmises sammus.

​​!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 piksli SDK ei edasta andmeid Shopify kohandatud pikslist automaatselt. Andmete edastamiseks pead sündmusi tellima.

Võid kokku puutuda pikslitega, mida laaditakse, kasutades elementi script src=. Shopify pikslites HTML-i ei toetata, mistõttu pead asendama elemendi script src= JavaScripti ekvivalendiga.

Siin on näidis Google Analyticsi pikslist, mis laaditakse, kasutades elementi 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>

Osa script src= saab asendada JavaScripti ekvivalendiga. Veendu alati, et sinu src-atribuut vastab HTML-i versioonile:

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'i piksli SDK ei edasta andmeid Shopify kohandatud pikslist automaatselt. Andmete edastamiseks pead sündmusi tellima.

Kliendisündmuste jälgimine

Pärast piksli SDK laadimist ja lähtestamist pead sellele jälgimiseks edastama sündmused. Seda tehakse sündmusi tellides ja seejärel sündmuse andmeid piksli SDK-sse edastades, et kolmanda osapoole teenus saaks neid töödelda.

Telli standardsed sündmused

Shopify pakub standardset sündmuste komplekti, mis muudab lihtsaks veendumise, et sinu piksel kogub vajalikke andmeid.

Saad sündmusi tellida, kasutades liidest Shopify Pixels Extension API. Pead lisama kolmanda osapoole piksli koodi koos sündmusega, mida tellid.

See on PageView sündmuse näide Meta pikslile. Pane tähele, et fbq("track") on osa Meta koodist ja igal ettevõttel on oma versioon, mille jaoks pead uurima nende dokumentatsiooni.

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

Mõnel sündmusel on metaandmed, mille saad oma pikslisse edastada. Siin on näide mõne toote üksikasja edastamisest Meta ViewContent sündmusesse:

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

Telli kohandatud kliendisündmused

Kui soovid jälgida täiendavaid kliendisündmusi, näiteks kui keegi klõpsab nuppu, saad lisada kohandatud kliendisündmusi. Kohandatud sündmusi saab tellida samamoodi nagu standardseid sündmusi. Deklareeri selle sündmuse nimi, mida soovid tellida, ja edasta teave kolmanda osapoole teenusepakkuja pikslile.

Siin on näide selle kohta, kuidas avaldatud kohandatud sündmus võib sinu teema Liquid-failides välja näha:

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

Siin on näide selle kohta, kuidas seadistada oma piksel seda kohandatud sündmust tellima:

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

Lisateavet kohandatud sündmuste kohta leiad osast Shopify arendaja dokumentatsioon.

Nõusoleku ja andmemüügi seadete seadistamine

Märkus

Oled ise vastutav privaatsusnõuete täitmise eest ning peaksid konsulteerima oma õigusnõustajaga, et teha kindlaks, kuidas sinu asukoha piirkonna ja selle piirkonna seadused, kus sa tooteid müüd, võivad sinu äritegevust mõjutada. Toodete müümiseks Shopify platvormi kaudu pead järgima nii oma ettevõtte kui ka klientide asukoha jurisdiktsiooni seadusi, Shopify teenusetingimusi, Shopify lubatud kasutuse eeskirja ning muid kohalduvaid eeskirju. Lisateave kliendi privaatsuse kohta.

Turgudel, mis on seadistatud nõudma nõusolekut, nagu Euroopa Majanduspiirkond (EEA) ja Ühendkuningriik, käivitatakse veebipikslid ainult siis, kui veebisaidi külastajad on andnud piksli seadistuses nõutud õigused.

Vaikimisi nõuavad uued kohandatud pikslid õigusi Turundus ja Analüütika. Saad kohandada, millised õigused on nõutavad, oma kohandatud piksli üksikasjade jaotises Kliendi privaatsus > Õigus.

Samamoodi ei käivitata andmemüügina seadistatud piksleid nende klientide puhul, kes on andmete müügist või jagamisest loobunud, välja arvatud juhul, kui piksel toetab piiratud andmekasutust. Vaikimisi loetakse uued kohandatud pikslid andmemüügiks. Saad kohandada, kas kogutud andmeid käsitatakse andmemüügina, oma kohandatud piksli üksikasjade jaotises Kliendi privaatsus > Andmemüük.

Kohandatud pikslite arendajad saavad lugeda lisateavet nõusoleku kogumise ja registreerimise kohta.

Igal pikslil võib iga eesmärgi jaoks olla erinev nimi. Peaksid tutvuma kolmanda osapoole piksli dokumentatsiooniga, et mõista, kuidas see vastendub Shopify definitsioonidega.

Näiteks vastenduvad eesmärgid Turundus ja Analüütika Google'i nõusolekurežiimiga (Consent Mode) järgmiselt:

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

Kohandatud piksli näide

Allpool on näide Meta piksli koodist. Piksli kood varieerub olenevalt kolmandast osapoolest teenusepakkujast ja sündmustest, mida soovid jälgida. Saadaolevate sündmuste loendi leiad kliendisündmuste viitest.

Kohandatud Meta piksli näide

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