Súgó
Bejelentkezés

Egyedi pixelkód létrehozása

Ez az oldal útmutatást tartalmaz egyedi pixelkód létrehozásához egy harmadik féltől származó pixelhez, hogy nyomon követhessen bizonyos vásárlói eseményeket. Miután létrehozta az egyedi pixel kódját, hozzáadhatja a pixelt a Shopify-üzletéhez.

Ezen az oldalon

Felkészülés egyedi pixel létrehozására

Mielőtt egyedi pixelt hozna létre, tekintse át a következő információkat, hogy megbizonyosodjon arról, hogy érti, hogyan kell konfigurálni a pixelt:

Egyedi pixel hozzáadásakor a következő információkat kell megadnia:

  • A harmadik féltől származó JavaScript pixel.
  • A viselkedési események, amelyeket követni szeretne.
  • A vásárlói adatvédelmi hozzájárulás beállításai.

Kód létrehozása egyedi pixelhez

Egy egyedi pixel kódjának létrehozása a következő lépésekből áll:

  1. A harmadik féltől származó Javascript SDK előkészítése.
  2. Konfigurálja a pixelt a vásárlói események követésére.
  3. Konfigurálja a pixelhez a vásárlói adatvédelmi hozzájárulás beállításait.

A harmadik féltől származó Javascript SDK előkészítése

A harmadik féltől származó szolgáltatás, amellyel dolgozik, biztosítja Önnek a pixellel integrált kódot. Egy pixel általában két összetevőből áll: egy Javascript SDK-ból és a követési kódból. A harmadik féltől származó szolgáltatás kódjában lévő minden HTML-t el kell távolítani, mivel a Shopify pixel sandbox csak a JavaScriptet támogatja.

Íme egy példa egy Meta-képpontra. A pixelek kissé eltérhetnek a különböző harmadik felek között.

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

Miután eltávolította a HTML-t a Meta kódjából, megmarad a Meta pixel SDK-ja és az inicializáló kódja. A PageView eseménykövetési kód szintén eltávolításra került, mivel az a következő lépésben lesz hozzáadva.

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

A Meta pixel SDK-ja nem továbbít automatikusan adatokat egy Shopify egyedi pixelből. Az adatok továbbításához fel kell iratkoznia az eseményekre.

Előfordulhat, hogy olyan pixelekkel találkozik, amelyek a script src= használatával töltődnek be. A HTML nem támogatott a Shopify pixeleiben, ezért a script src= részt le kell cserélnie a JavaScript megfelelőjére.

Az alábbiakban egy olyan Google Analytics pixel látható, amely a script src= használatával töltődik be:

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

A script src= rész lecserélhető a JavaScript megfelelőjére. Mindig győződjön meg róla, hogy az src attribútum megegyezik a HTML-verzióval:

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');

A Google pixel SDK-ja nem továbbítja automatikusan az adatokat a Shopify egyéni pixeléből. Az adatok továbbításához fel kell iratkoznia az eseményekre.

Vásárlói események követése

A pixel SDK-jának betöltése és inicializálása után át kell adnia az eseményeket a követéshez. Ez az eseményekre való feliratkozással, majd az eseményadatoknak a pixel SDK-jába való átadásával történik, hogy a harmadik fél szolgáltatása feldolgozza azokat.

Feliratkozás a standard eseményekre

A Shopify egy standard eseménykészletet kínál, amely megkönnyíti annak biztosítását, hogy a pixel összegyűjtse a szükséges adatokat.

A Shopify Pixels Extension API segítségével iratkozhat fel eseményekre. A harmadik féltől származó pixelkódot ahhoz az eseményhez kell elhelyeznie, amelyre feliratkozik.

Ez egy példa a Meta pixelének PageView eseményére. Vegye figyelembe, hogy az fbq("track") a Meta kódjának része, és minden cégnek saját verziója van, amelyhez a dokumentációjukban kell utánanéznie.

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

Egyes események metaadatokkal rendelkeznek, amelyeket átadhat a pixelének. Az alábbiakban egy példa látható arra, hogyan lehet termékadatokat átadni a Meta ViewContent eseményébe:

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

Feliratkozás egyéni vásárlói eseményekre

Ha további vásárlói eseményeket szeretne követni, például amikor valaki rákattint egy gombra, akkor hozzáadhat egyéni vásárlói eseményeket. Az egyéni eseményekre ugyanúgy fel lehet iratkozni, mint a standard eseményekre. Adja meg annak az eseménynek a nevét, amelyre fel szeretne iratkozni, és adja át az információt a harmadik fél szolgáltatójának pixelének.

Az alábbiakban egy példa látható arra, hogyan jelenhet meg egy közzétett egyéni esemény a téma liquid fájljaiban:

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

Az alábbiakban egy példa látható arra, hogyan konfigurálhatja a pixelét, hogy feliratkozzon erre az egyéni eseményre:

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

Az egyéni eseményekről további információt a Shopify fejlesztői dokumentációjában talál.

Azokon a piacokon, amelyek hozzájárulást igényelnek, mint például az Európai Gazdasági Térség (EGT) és az Egyesült Királyság, a webpixelek csak akkor futnak, ha a weboldal látogatói megadták a pixelkonfigurációban megkövetelt jogosultságokat.

Alapértelmezés szerint az új egyéni pixelekhez marketing- és analitikai jogosultságok szükségesek. Az egyéni pixel adatainak Vásárlói adatvédelem > Jogosultság szakaszában testreszabhatja, hogy mely jogosultságok szükségesek.

Hasonlóképpen, az adatértékesítésként konfigurált pixelek nem futnak azon vásárlók esetében, akik leiratkoztak az adatértékesítésről vagy -megosztásról, kivéve, ha a pixel támogatja a korlátozott adathasználatot. Alapértelmezés szerint az új egyéni pixelek adatértékesítésnek minősülnek. Az egyéni pixel adatainak Vásárlói adatvédelem > Adatértékesítés szakaszában testreszabhatja, hogy az összegyűjtött adatok adatértékesítésnek minősülnek-e.

Az egyéni pixelek fejlesztői többet tudhatnak meg a hozzájárulás gyűjtéséről és regisztrálásáról.

Minden pixelnek más neve lehet az egyes célokra. Tekintse meg a harmadik fél pixel-dokumentációját, hogy megértse, hogyan felel meg a Shopify definícióinak.

Az alábbiakban például az látható, hogy a marketing- és az analitikai célok hogyan felelnek meg a Google Hozzájárulási módjának:

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

Példa egyéni pixelre

Az alábbiakban egy Meta-pixel kódjára látható példa. A pixelkód a harmadik fél szolgáltatójától és a követni kívánt eseményektől függően változik. Az elérhető események listáját a vásárlói események referenciájában találja.

Példa egyéni Meta-pixelre

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