Pritaikyto pikselio kodo kūrimas

Atsargiai

Pritaikyti pikseliai yra išplėstinė funkcija, kuriai reikia „JavaScript“ žinių. Jūs esate atsakingi už atitiktį galiojantiems įstatymams, sutikimus, kodo saugumą, trikčių šalinimą ir naujinimus. Pikseliams taikomos „Shopify“ paslaugų teikimo sąlygos.

„Shopify“ nepalaiko pritaikytų pikselių pridėjimo ir naudojimo. Jei Jums reikia pagalbos pridedant arba naudojant pritaikytą pikselį, galite pasamdyti „Shopify“ partnerį.

Šiame puslapyje pateikiamos instrukcijos, kaip sukurti pritaikyto pikselio kodą trečiosios šalies pikseliui, kad galėtumėte sekti konkrečius klientų įvykius. Sukūrę pritaikyto pikselio kodą, galite pridėti pikselį į savo „Shopify“ parduotuvę.

Pastaba

Prieš kurdami pritaikytą pikselį, turėtumėte peržiūrėti galimas programėles, kad užtikrintumėte didesnį stabilumą, saugumą ir našumą. Tačiau jei nėra Jūsų poreikius atitinkančios programėlės, galite sukurti pritaikytą pikselį.

Pasiruošimas kurti pritaikytą pikselį

Prieš kurdami pritaikytą pikselį, peržiūrėkite šią informaciją, kad įsitikintumėte, jog suprantate, kaip konfigūruoti savo pikselį:

• Su pikseliais susijusios rizikos.
• „Shopify“ pikselių smėlio dėžės apribojimai.
• „Shopify“ pikselių smėlio dėžės API naudojimas.
• Klientų įvykių sekimo schema.

Kai pridedate pritaikytą pikselį, Jūs nurodote šią informaciją:

• Trečiosios šalies „JavaScript“ pikselį.
• Elgsenos įvykius, kuriuos norite sekti.
• Klientų privatumo sutikimo nustatymus.

Pritaikyto pikselio kodo kūrimas

Plėskite savo verslą

Tai yra išplėstinė mokomoji medžiaga, kurios „Shopify“ nepalaiko. Jei Jums reikia pagalbos pridedant pritaikytą pikselį, galite pasamdyti „Shopify“ partnerį.

Pritaikyto pikselio kodo kūrimą sudaro šie veiksmai:

1. Paruoškite trečiosios šalies „JavaScript“ SDK.
2. Konfigūruokite savo pikselį, kad galėtumėte sekti klientų įvykius.
3. Konfigūruokite klientų privatumo sutikimo nustatymus savo pikseliui.

Trečiosios šalies „JavaScript“ SDK paruošimas

Trečiosios šalies paslauga, su kuria dirbate, pateikia Jums kodą, kuris yra integruotas su pikseliu. Pikselį paprastai sudaro du komponentai: „JavaScript“ SDK ir sekimo kodas. Bet koks HTML trečiosios šalies paslaugos kode turi būti pašalintas, nes „Shopify“ pikselių smėlio dėžė palaiko tik „JavaScript“.

Štai „Meta“ pikselio pavyzdys. Skirtingų trečiųjų šalių pikseliai šiek tiek skirsis.

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

Pašalinus HTML iš „Meta“ kodo, lieka „Meta“ pikselio SDK ir jo inicijavimo kodas. PageView įvykio sekimo kodas taip pat buvo pašalintas, nes jis bus pridėtas kitame žingsnyje.

​​!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“ pikselio SDK automatiškai neperduoda duomenų iš „Shopify“ pritaikyto pikselio. Norėdami perduoti duomenis, turite prenumeruoti įvykius.

Jums gali tekti susidurti su pikseliais, kurie įkeliami naudojant script src=. „Shopify“ pikseliai nepalaiko HTML, todėl turėsite pakeisti script src= atitinkamu „JavaScript“ kodu.

Štai „Google Analytics“ pikselio, įkeliamo naudojant script src=, pavyzdys:

<!-- 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= dalį galima pakeisti atitinkamu „JavaScript“ kodu. Visada įsitikinkite, kad jūsų `src` atributas atitinka HTML versiją:

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“ pikselių SDK automatiškai neperduoda duomenų iš „Shopify“ pasirinktinio pikselio. Norėdami perduoti duomenis, turite prenumeruoti įvykius.

Sekti klientų įvykius

Įkėlę ir inicijavę pikselio SDK, turite jam perduoti įvykius, kad galėtumėte juos sekti. Tai atliekama prenumeruojant įvykius ir perduodant įvykių duomenis į pikselio SDK, kad juos apdorotų trečiosios šalies paslauga.

Prenumeruoti standartinius įvykius

„Shopify“ siūlo standartinių įvykių rinkinį, kuris padeda lengvai užtikrinti, kad jūsų pikselis rinktų reikiamus duomenis.

Galite prenumeruoti įvykius naudodami „Shopify“ pikselių plėtinio API. Trečiosios šalies pikselio kodą reikės įdėti kartu su įvykiu, kurį prenumeruojate.

Tai „Meta“ pikselio PageView įvykio pavyzdys. Atminkite, kad fbq("track") yra „Meta“ kodo dalis ir kiekviena įmonė turės savo versiją, dėl kurios turėsite peržiūrėti jos dokumentaciją.

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

Kai kurie įvykiai turi metaduomenų, kuriuos galite perduoti į savo pikselį. Štai pavyzdys, kaip perduoti išsamią informaciją apie produktą į „Meta“ ViewContent įvykį:

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

Prenumeruoti pasirinktinius klientų įvykius

Jei norite sekti papildomus klientų įvykius, pavyzdžiui, kai kas nors spustelėja mygtuką, galite pridėti pasirinktinių klientų įvykių. Pasirinktinius įvykius galima prenumeruoti taip pat kaip ir standartinius. Nurodykite įvykio, kurį norite prenumeruoti, pavadinimą ir perduokite informaciją trečiosios šalies paslaugų teikėjo pikseliui.

Štai pavyzdys, kaip paskelbtas pasirinktinis įvykis gali atrodyti jūsų temos „liquid“ failuose:

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

Štai pavyzdys, kaip galėtumėte konfigūruoti savo pikselį, kad jis prenumeruotų tą pasirinktinį įvykį:

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

Daugiau informacijos apie pasirinktinius įvykius rasite „Shopify“ kūrėjų dokumentacijoje.

Sutikimo ir duomenų pardavimo nuostatų konfigūravimas

Pastaba

Jūs esate atsakingi už privatumo reikalavimų laikymąsi ir turėtumėte pasikonsultuoti su savo teisininku, kad nustatytumėte, kaip jūsų ir jūsų pardavimo regiono įstatymai gali paveikti jūsų verslą. Norėdami parduoti produktus naudojant „Shopify“ platformą, turite laikytis savo verslo ir klientų jurisdikcijos įstatymų, „Shopify“ paslaugų teikimo sąlygų, „Shopify“ priimtino naudojimo politikos ir bet kokių kitų taikomų politikų. Sužinokite daugiau apie klientų privatumą.

Rinkose, sukonfigūruotose reikalauti sutikimo, pavyzdžiui, Europos ekonominėje erdvėje (EEE) ir Jungtinėje Karalystėje, interneto pikseliai veikia tik tada, kai svetainės lankytojai yra suteikę pikselio konfigūracijoje reikalaujamus leidimus.

Pagal numatytuosius nustatymus naujiems pasirinktiniams pikseliams reikalingi rinkodaros ir analitikos leidimai. Galite tinkinti, kurie leidimai reikalingi, savo pasirinktinio pikselio išsamios informacijos skiltyje Klientų privatumas > Leidimas.

Panašiai pikseliai, sukonfigūruoti kaip duomenų pardavimas, neveiks klientams, kurie atsisakė duomenų pardavimo ar bendrinimo, nebent pikselis palaiko ribotą duomenų naudojimą. Pagal numatytuosius nustatymus nauji pasirinktiniai pikseliai laikomi duomenų pardavimu. Galite tinkinti, ar surinkti duomenys laikomi duomenų pardavimu, savo pasirinktinio pikselio išsamios informacijos skiltyje Klientų privatumas > Duomenų pardavimas.

Pasirinktinių pikselių kūrėjai gali sužinoti daugiau apie sutikimo rinkimą ir registravimą.

Kiekvienas pikselis gali turėti skirtingą pavadinimą kiekvienam tikslui. Turėtumėte peržiūrėti trečiosios šalies pikselio dokumentaciją, kad suprastumėte, kaip jis susietas su „Shopify“ apibrėžtimis.

Pavyzdžiui, toliau nurodyta, kaip rinkodaros ir analitikos tikslai susiejami su „Google“ sutikimo režimu:

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

Pasirinktinio pikselio pavyzdys

Toliau pateikiamas „Meta“ pikselio kodo pavyzdys. Pikselio kodas skiriasi priklausomai nuo trečiosios šalies paslaugų teikėjo ir įvykių, kuriuos norite sekti. Galimų įvykių sąrašą rasite klientų įvykių nuorodoje.

Pasirinktinio „Meta“ pikselio pavyzdys

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