Izveido pielāgota pikseļa kodu

Brīdinājums

Pielāgoti pikseļi ir papildu funkcija, kurai nepieciešamas JavaScript zināšanas. Atbilstība piemērojamiem tiesību aktiem, piekrišanas, koda drošība, problēmu novēršana un atjauninājumi ir tava atbildība. Uz pikseļiem attiecas Shopify pakalpojumu sniegšanas noteikumi.

Shopify neatbalsta pielāgotu pikseļu pievienošanu un izmantošanu. Ja tev nepieciešama palīdzība, lai pievienotu vai izmantotu pielāgotu pikseli, vari nolīgt Shopify partneri.

Šajā lapā ir sniegti norādījumi, kā izveidot pielāgotu pikseļa kodu trešās puses pikselim, lai tu varētu izsekot konkrētus klientu notikumus. Pēc tam, kad esi izveidojis sava pielāgotā pikseļa kodu, vari pievienot pikseli savam Shopify veikalam.

Piezīme

Pirms veido pielāgotu pikseli, tev vajadzētu pārskatīt pieejamās lietotnes, lai uzlabotu stabilitāti, drošību un veiktspēju. Tomēr, ja nav lietotnes, kas atbilstu tavām vajadzībām, vari izveidot pielāgotu pikseli.

Sagatavošanās pielāgota pikseļa izveidei

Pirms pielāgota pikseļa izveides pārskati tālāk norādīto informāciju, lai pārliecinātos, ka saproti, kā konfigurēt savu pikseli:

• Ar pikseļiem saistītie riski.
• Shopify pikseļu smilškastes ierobežojumi.
• Shopify pikseļu smilškastes API izmantošana.
• Klientu notikumu izsekošanas shēma.

Pievienojot pielāgotu pikseli, tu norādi šādu informāciju:

• Trešās puses JavaScript pikselis.
• Uzvedības notikumi, kurus vēlies izsekot.
• Klientu privātuma piekrišanas iestatījumi.

Pielāgota pikseļa koda izveide

Paplašini savu uzņēmējdarbību

Šī ir padziļināta pamācība, ko Shopify neatbalsta. Ja tev nepieciešama palīdzība, lai pievienotu pielāgotu pikseli, vari nolīgt Shopify partneri.

Pielāgota pikseļa koda izveide ietver tālāk norādītās darbības:

1. Sagatavo trešās puses JavaScript SDK.
2. Konfigurē savu pikseli, lai izsekotu klientu notikumus.
3. Konfigurē sava pikseļa piekrišanas iestatījumus klientu privātumam.

Trešās puses JavaScript SDK sagatavošana

Trešās puses pakalpojumu sniedzējs, ar kuru strādā, nodrošina tevi ar kodu, kas ir integrēts pikselī. Pikselim parasti ir 2 komponenti: JavaScript SDK un izsekošanas kods. Jebkurš HTML trešās puses pakalpojuma kodā ir jānoņem, jo Shopify pikseļu smilškaste atbalsta tikai JavaScript.

Šeit ir Meta pikseļa piemērs. Pikseļi katrai trešajai pusei nedaudz atšķiras.

​​<!-- 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ēc HTML noņemšanas no Meta koda tev paliek Meta pikseļa SDK un kods tā inicializēšanai. Arī PageView notikuma izsekošanas kods ir noņemts, jo tas tiks pievienots nākamajā darbībā.

​​!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 pikseļa SDK automātiski nepārraida datus no Shopify pielāgotā pikseļa. Lai pārraidītu datus, tev jāabonē notikumi.

Tu vari saskarties ar pikseļiem, kas tiek ielādēti, izmantojot script src=. HTML netiek atbalstīts Shopify pikseļos, tāpēc tev būs jāaizstāj script src= ar JavaScript ekvivalentu.

Šeit ir Google Analytics pikseļa paraugs, kas tiek ielādēts, izmantojot 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>

Daļu script src= var aizstāt ar JavaScript ekvivalentu. Vienmēr pārliecinies, vai tavs src atribūts atbilst HTML versijai:

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 pikseļa SDK automātiski nepārraida datus no Shopify pielāgotā pikseļa. Lai pārraidītu datus, tev jāabonē notikumi.

Klientu notikumu izsekošana

Pēc pikseļa SDK ielādes un inicializēšanas tev tajā ir jānodod notikumi izsekošanai. Tas tiek darīts, abonējot notikumus un pēc tam nododot notikuma datus pikseļa SDK, lai trešās puses pakalpojums tos varētu apstrādāt.

Standarta notikumu abonēšana

Shopify piedāvā standarta notikumu kopu, kas ļauj viegli pārliecināties, vai tavs pikselis apkopo nepieciešamos datus.

Tu vari abonēt notikumus, izmantojot Shopify Pixels Extension API. Trešās puses pikseļa kods būs jāievieto kopā ar abonējamo notikumu.

Šis ir PageView notikuma piemērs Meta pikselim. Ņem vērā, ka fbq("track") ir daļa no Meta koda, un katram uzņēmumam būs sava versija, kuras noskaidrošanai tev būs jāiepazīstas ar tā dokumentāciju.

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

Dažiem notikumiem ir metadati, kurus vari nodot savā pikselī. Šeit ir piemērs, kā nodot informāciju par produktu Meta notikumam 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,
  });
});

Pielāgotu klientu notikumu abonēšana

Ja vēlies izsekot papildu klientu notikumus, piemēram, kad kāds noklikšķina uz pogas, vari pievienot pielāgotus klientu notikumus. Pielāgotus notikumus var abonēt tāpat kā standarta notikumus. Deklarē abonējamā notikuma nosaukumu un nodod šo informāciju trešās puses pakalpojumu sniedzēja pikselim.

Tālāk sniegts piemērs, kā publicēts pielāgots notikums varētu izskatīties tavas tēmas Liquid failos:

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

Tālāk sniegts piemērs, kā vari konfigurēt savu pikseli, lai abonētu šo pielāgoto notikumu:

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

Lai iegūtu papildinformāciju par pielāgotiem notikumiem, skati Shopify izstrādātāju dokumentāciju.

Piekrišanas un datu pārdošanas iestatījumu konfigurēšana

Piezīme

Tu nes atbildību par atbilstību privātuma prasībām, un tev jākonsultējas ar savu juridisko konsultantu, lai noteiktu, kā tava reģiona un tā reģiona likumi, kurā pārdod preces, var ietekmēt tavu uzņēmējdarbību. Lai pārdotu produktus, izmantojot Shopify platformu, tev jāievēro sava uzņēmuma un klientu jurisdikcijas likumi, Shopify pakalpojumu sniegšanas noteikumi, Shopify pieņemamas lietošanas politika un jebkuras citas piemērojamās politikas. Uzzināt vairāk par klientu privātumu.

Tirgos, kas ir konfigurēti pieprasīt piekrišanu, piemēram, Eiropas Ekonomikas zonā (EEZ) un Apvienotajā Karalistē, tīmekļa pikseļi darbojas tikai tad, ja tīmekļa vietnes apmeklētāji ir snieguši pikseļa konfigurācijā nepieciešamās atļaujas.

Pēc noklusējuma jauniem pielāgotiem pikseļiem ir nepieciešamas Mārketings un Analītika atļaujas. Tu vari pielāgot nepieciešamās atļaujas sava pielāgotā pikseļa informācijas sadaļā Klientu privātums > Atļauja.

Līdzīgi arī pikseļi, kas konfigurēti kā datu pārdošana, nedarbosies klientiem, kuri ir atteikušies no datu pārdošanas vai kopīgošanas, ja vien pikselis neatbalsta ierobežotu datu izmantošanu. Pēc noklusējuma jauni pielāgoti pikseļi tiek kvalificēti kā datu pārdošana. Tu vari pielāgot to, vai apkopotie dati tiek kvalificēti kā datu pārdošana, sava pielāgotā pikseļa informācijas sadaļā Klientu privātums > Datu pārdošana.

Pielāgotu pikseļu izstrādātāji var uzzināt vairāk par piekrišanas apkopošanu un reģistrēšanu.

Katram mērķim pikselim var būt atšķirīgs nosaukums. Tev jākonsultējas ar trešās puses pikseļa dokumentāciju, lai saprastu, kā tas atbilst Shopify definīcijām.

Piemēram, tālāk ir parādīts, kā mērķi Mārketings un Analītika atbilst Google piekrišanas režīmam:

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

Pielāgota pikseļa piemērs

Tālāk ir sniegts Meta pikseļa koda piemērs. Pikseļa kods atšķiras atkarībā no trešās puses pakalpojumu sniedzēja un notikumiem, kurus vēlies izsekot. Skati klientu notikumu atsauci, lai redzētu pieejamo notikumu sarakstu.

Pielāgota Meta pikseļa piemērs

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