Creare cod personalizat pentru pixeli

Atenție

Pixelii personalizați sunt o funcționalitate avansată care necesită cunoștințe de JavaScript. Respectarea legilor în vigoare, consimțămintele, securitatea codului, depanarea și actualizările sunt responsabilitatea dumneavoastră. Pixelii fac obiectul Termenilor și condițiilor Shopify.

Adăugarea și utilizarea pixelilor personalizați nu beneficiază de asistență din partea Shopify. Dacă aveți nevoie de ajutor pentru adăugarea sau utilizarea unui pixel personalizat, puteți angaja un Partener Shopify.

Această pagină include instrucțiuni pentru crearea unui cod de pixel personalizat pentru un pixel terț, astfel încât să puteți urmări evenimente specifice ale clienților. După ce creați codul pentru pixelul personalizat, puteți adăuga pixelul în magazinul dumneavoastră Shopify.

Notă

Înainte de a crea un pixel personalizat, trebuie să examinați aplicațiile disponibile pentru o stabilitate, securitate și performanțe îmbunătățite. Cu toate acestea, dacă nu există o aplicație care să corespundă nevoilor dumneavoastră, puteți crea un pixel personalizat.

Pregătirea pentru crearea unui pixel personalizat

Înainte de a crea un pixel personalizat, examinați următoarele informații pentru a vă asigura că înțelegeți cum să configurați pixelul:

• Riscuri asociate pixelilor.
• Limitările sandbox-ului pentru pixeli al Shopify.
• Utilizarea API-ului pentru sandbox-ul de pixeli Shopify.
• Schema de urmărire a evenimentelor client.

Atunci când adăugați un pixel personalizat, specificați următoarele informații:

• Pixelul JavaScript terț.
• Evenimentele comportamentale pe care doriți să le urmăriți.
• Setările de consimțământ pentru confidențialitatea clienților.

Crearea codului pentru un pixel personalizat

Dezvoltați-vă afacerea

Acesta este un tutorial avansat și nu beneficiază de asistență din partea Shopify. Dacă aveți nevoie de ajutor pentru adăugarea unui pixel personalizat, puteți angaja un Partener Shopify.

Crearea codului pentru un pixel personalizat implică următorii pași:

1. Pregătiți SDK-ul Javascript terț.
2. Configurați-vă pixelul pentru a urmări evenimentele client.
3. Configurați setările de consimțământ pentru confidențialitatea clienților pentru pixelul dumneavoastră.

Pregătirea SDK-ului Javascript terț

Serviciul terț cu care lucrați vă furnizează codul care este integrat cu pixelul. Un pixel are, de obicei, 2 componente: un SDK Javascript și codul de urmărire. Orice HTML din codul serviciului terț trebuie eliminat, deoarece sandbox-ul pentru pixeli Shopify acceptă numai JavaScript.

Iată un exemplu de pixel Meta. Pixelii vor diferi ușor de la un terț la altul.

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

După eliminarea codului HTML din codul Meta, rămâneți cu SDK-ul pixelului Meta și codul pentru a-l inițializa. Codul de urmărire a evenimentului PageView a fost, de asemenea, eliminat, deoarece va fi adăugat în pasul următor.

​​!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-ul pixelului Meta nu transmite automat date de la un pixel personalizat Shopify. Pentru a transmite date, trebuie să vă abonați la evenimente.

Este posibil să întâlniți pixeli care sunt încărcați utilizând script src=. HTML nu este acceptat în pixelii Shopify, deci va trebui să înlocuiți script src= cu echivalentul JavaScript.

Iată un exemplu de pixel Google Analytics care se încarcă utilizând 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>

Porțiunea script src= poate fi înlocuită cu echivalentul JavaScript. Asigurați-vă întotdeauna că atributul src se potrivește cu versiunea 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');

SDK-ul pentru pixeli al Google nu transmite automat date de la un pixel personalizat Shopify. Pentru a transmite date, trebuie să vă abonați la evenimente.

Urmărirea evenimentelor clienților

După încărcarea și inițializarea SDK-ului pixelului, trebuie să îi transmiteți evenimente pentru urmărire. Acest lucru se face abonându-vă la evenimente, iar apoi transmițând datele evenimentului către SDK-ul pixelului pentru a fi procesate de serviciul extern.

Abonare la evenimente standard

Shopify oferă un set standard de evenimente, ceea ce facilitează asigurarea faptului că pixelul dvs. colectează datele de care are nevoie.

Vă puteți abona la evenimente utilizând Shopify Pixels Extension API. Va trebui să plasați codul pixelului extern împreună cu evenimentul la care vă abonați.

Acesta este un exemplu de eveniment PageView pentru pixelul Meta. Rețineți că fbq("track") face parte din codul Meta și că fiecare societate va avea propria versiune, pentru care va trebui să consultați documentația aferentă.

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

Unele evenimente au metadate pe care le puteți transmite pixelului dvs. Iată un exemplu de transmitere a unor detalii despre produs către evenimentul ViewContent al Meta:

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

Abonare la evenimente personalizate ale clienților

Dacă doriți să urmăriți evenimente suplimentare ale clienților, cum ar fi atunci când cineva dă clic pe un buton, puteți adăuga evenimente personalizate ale clienților. Vă puteți abona la evenimentele personalizate în același mod ca la cele standard. Declarați numele evenimentului la care doriți să vă abonați și transmiteți informațiile către pixelul furnizorului de servicii extern.

Acesta este un exemplu al modului în care un eveniment personalizat publicat ar putea apărea în fișierele liquid ale temei dvs.:

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

Acesta este un exemplu al modului în care ați putea să vă configurați pixelul pentru a vă abona la acel eveniment personalizat:

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

Pentru mai multe informații despre evenimentele personalizate, consultați Documentația pentru dezvoltatori Shopify.

Configurarea consimțământului și a setărilor privind vânzarea de date

Notă

Sunteți responsabil pentru propria conformitate în materie de confidențialitate și trebuie să consultați propriul consilier juridic pentru a determina modul în care legile din regiunea dvs. și din regiunea în care vindeți v-ar putea afecta afacerea. Pentru a vinde produse folosind platforma Shopify, trebuie să respectați legile din jurisdicția afacerii dvs. și a clienților dvs., Condițiile de furnizare a serviciilor Shopify, Politica de utilizare acceptabilă Shopify și orice alte politici aplicabile. Aflați mai multe despre confidențialitatea clienților.

Pe piețele configurate să solicite consimțământul, cum ar fi Spațiul Economic European (SEE) și Regatul Unit, pixelii web rulează numai atunci când vizitatorii site-ului web au oferit permisiunile necesare în configurația pixelului.

În mod implicit, noii pixeli personalizați necesită permisiunile Marketing și Analiză. Puteți personaliza ce permisiuni sunt necesare în secțiunea Confidențialitatea clientului > Permisiune din detaliile pixelului dvs. personalizat.

În mod similar, pixelii configurați ca vânzare de date nu vor rula pentru clienții care au renunțat la vânzarea sau partajarea datelor, cu excepția cazului în care pixelul acceptă utilizarea limitată a datelor. În mod implicit, noii pixeli personalizați se califică drept vânzare de date. Puteți personaliza dacă datele colectate se califică drept vânzare de date în secțiunea Confidențialitatea clientului > Vânzare de date din detaliile pixelului dvs. personalizat.

Dezvoltatorii de pixeli personalizați pot afla mai multe despre colectarea și înregistrarea consimțământului.

Fiecare pixel poate avea un nume diferit pentru fiecare scop. Trebuie să consultați documentația pixelului entității externe pentru a înțelege cum se mapează la definițiile Shopify.

De exemplu, iată cum se mapează scopurile Marketing și Analiză la Modul de consimțământ Google:

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

Exemplu de pixel personalizat

Mai jos este un exemplu de cod pentru un pixel Meta. Codul pixelului variază în funcție de furnizorul de servicii extern și de evenimentele pe care doriți să le urmăriți. Consultați referința evenimentelor clienților pentru o listă de evenimente disponibile.

Exemplu de pixel Meta personalizat

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