Sortu pixel pertsonalizatu baten kodea

Kontuz

Pixel pertsonalizatuena funtzio aurreratu bat da eta JavaScript-i buruzko ezagutza izatea eskatzen du. Zure erantzukizuna da aplikagarri diren legeak eta baimenak betetzea, bai eta kodearen segurtasuna bermatzea eta hura eguneratu eta dituen arazoak konpontzea ere. Pixelak Shopify-ren zerbitzu-baldintzei lotuta daude.

Shopifyk ez du eskaintzen pixel pertsonalizatuak gehitzearekin eta erabiltzearekin lotutako laguntzarik. Pixel pertsonalizatu bat gehitzen edo erabiltzen laguntza behar baduzu, Shopify-ko bazkide bat kontrata dezakezu.

Orri honek hirugarrenen pixel baterako pixel pertsonalizatu baten kodea sortzeko argibideak ditu, bezeroen gertaera zehatzen jarraipena egin ahal izan dezazun. Pixel pertsonalizatuaren kodea sortu ondoren, pixela gehitu dezakezu zure Shopify-ko dendan.

Oharra

Pixel pertsonalizatu bat sortu aurretik, eskuragarri dauden aplikazioak aztertu beharko zenituzke, egonkortasun, segurtasun eta errendimendu hobea lortzeko. Hala ere, zure beharretara egokitzen den aplikaziorik ez badago, pixel pertsonalizatu bat sor dezakezu.

Pixel pertsonalizatu bat sortzeko prestatzen

Pixel pertsonalizatu bat sortu aurretik, berrikusi informazio hau zure pixela nola konfiguratu ulertzen duzula ziurtatzeko:

• Pixelei lotutako arriskuak.
• Shopify-ren pixel-sandboxaren mugak.
• Shopify-ren pixel-sandboxaren API-a erabiltzea.
• Bezeroen gertaeren jarraipena egiteko eskema.

Pixel pertsonalizatu bat gehitzean, informazio hau zehazten duzu:

• Hirugarrenen JavaScript pixela.
• Jarraipena egin nahi diezun jokabide-gertaerak.
• Bezeroen pribatutasunerako baimen-ezarpenak.

Sortu pixel pertsonalizatu baterako kodea

Haz ezazu negozioa

Tutorial aurreratua da hau, eta Shopifyk ez du horretarako laguntza-zerbitzurik eskaintzen. Pixel pertsonalizatu bat gehitzeko laguntza behar baduzu, Shopify-ko bazkide bat kontratatu dezakezu.

Pixel pertsonalizatu baterako kodea sortzeko urrats hauek egin behar dira:

1. Prestatu hirugarrenen Javascript SDK-a.
2. Konfiguratu zure pixela bezeroen gertaeren jarraipena egiteko.
3. Konfiguratu zure pixelerako bezeroen pribatutasunerako baimen-ezarpenak.

Hirugarrenen Javascript SDK-a prestatzen

Erabiltzen ari zaren hirugarrenen zerbitzuak pixelarekin integratuta dagoen kodea ematen dizu. Normalean, pixel batek bi osagai ditu: Javascript SDK bat eta jarraipen-kodea. Hirugarrenen zerbitzuaren kodean dagoen edozein HTML kendu behar da, Shopifyren pixel-sandboxak JavaScript soilik onartzen baitu.

Hemen duzu Meta pixelaren adibide bat. Pixelak apur bat desberdinak izango dira hirugarren batetik bestera.

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

Metaren kodetik HTMLa kendu ondoren, Metaren pixelaren SDK-a eta hura abiarazteko kodea geratuko zaizkizu. PageView gertaeraren jarraipen-kodea ere kendu da, hurrengo urratsean gehituko delako.

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

Metaren pixelaren SDK-ak ez ditu Shopify-ko pixel pertsonalizatu baten datuak automatikoki transmititzen. Datuak transmititzeko, gertaeretara harpidetu behar duzu.

Baliteke script src= erabiliz kargatzen diren pixelak aurkitzea. Shopifyren pixeletan ez da HTML onartzen; beraz, script src= kendu eta horren JavaScript baliokidea jarri beharko duzu.

Hona hemen script src= erabiliz kargatzen den Google Analytics-en pixel baten adibidea:

<!-- 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= zatiaren ordez, JavaScript baliokidea erabil daiteke. Ziurtatu beti src atributua HTML bertsioarekin bat datorrela:

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-ren pixelaren SDK-ak ez ditu automatikoki transmititzen Shopify-ko pixel pertsonalizatu baten datuak. Datuak transmititzeko, gertaeretara harpidetu behar duzu.

Egin bezeroen gertaeren jarraipena

Pixelaren SDK-a kargatu eta abiarazi ondoren, gertaerak bidali behar dizkiozu jarraipena egiteko. Horretarako, gertaeretara harpidetu behar duzu, eta, ondoren, gertaeraren datuak pixelaren SDK-ra bidali behar dituzu hirugarrenen zerbitzuak prozesa ditzan.

Harpidetu gertaera estandarretara

Shopifyk gertaera estandarren multzo bat eskaintzen du; horrek asko errazten du zure pixela behar dituen datuak biltzen ari dela ziurtatzea.

Gertaeretara harpidetzeko, Shopify Pixels Extension API-a erabil dezakezu. Hirugarrenen pixel-kodea harpidetzen ari zaren gertaeran kokatu beharko duzu.

Hau Metaren pixelerako PageView gertaeraren adibide bat da. Kontuan izan fbq("track") Metaren kodearen zati bat dela, eta enpresa bakoitzak bere bertsio propioa izango duela; haien dokumentazioa kontsultatu beharko duzu.

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

Gertaera batzuek pixelera bidal ditzakezun metadatuak dituzte. Hona hemen zenbait produktu-xehetasun Metaren ViewContent gertaerara bidaltzeko adibide bat:

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

Harpidetu bezeroen gertaera pertsonalizatuetara

Bezeroen gertaera gehigarrien jarraipena egin nahi baduzu (esaterako, norbaitek botoi batean klik egiten duenean), bezeroen gertaera pertsonalizatuak gehi ditzakezu. Gertaera pertsonalizatuetara gertaera estandarretara bezala harpidetu zaitezke. Deklaratu harpidetu nahi duzun gertaeraren izena eta bidali informazioa hirugarrenen zerbitzu-hornitzailearen pixelera.

Hona hemen argitaratutako gertaera pertsonalizatu bat zure gaiaren liquid fitxategietan nola ager daitekeen erakusten duen adibide bat:

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

Hona hemen zure pixela gertaera pertsonalizatu horretara harpidetzeko nola konfigura dezakezun erakusten duen adibide bat:

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

Gertaera pertsonalizatuei buruzko informazio gehiago lortzeko, kontsultatu Shopify-ren garatzaileentzako dokumentazioa.

Baimenari eta datuen salmentari buruzko ezarpenak konfiguratzea

Oharra

Zure ardura da pribatutasun-betekizunak betetzea; horrez gain, zure aholkulari legalari galdetu beharko zenioke zure eskualdeko zein saltzen duzun eskualdeko legeek zure negozioan nola eragin dezaketen zehazteko. Shopify plataforma erabiliz produktuak saltzeko, zure negozioaren eta bezeroen jurisdikzioko legeak, Shopify-ren zerbitzu-baldintzak, Shopify-ren erabilera onargarriaren gidalerroak eta aplikatu beharreko bestelako gidalerro guztiak bete behar dituzu. Lortu informazio gehiago honi buruz: bezeroen pribatutasuna.

Baimena eskatzeko konfiguratutako merkatuetan (hala nola Europako Esparru Ekonomikoan eta Erresuma Batuan), web-pixelak webguneko bisitariek pixelaren konfigurazioan eskatutako baimenak eman dituztenean soilik exekutatzen dira.

Modu lehenetsian, pixel pertsonalizatu berriek Marketina eta Estatistikak ataletako baimenak eskatzen dituzte. Beharrezkoak diren baimenak pertsonaliza ditzakezu zure pixel pertsonalizatuaren xehetasunetako Bezeroen pribatutasuna > Baimena atalean.

Era berean, datu-salmenta gisa konfiguratutako pixelak ez dira exekutatuko datuen salmentari edo datuak partekatzeari uko egin dioten bezeroentzat, pixelak datuen erabilera mugatua onartzen ez badu behintzat. Modu lehenetsian, pixel pertsonalizatu berriak datu-salmenta gisa sailkatzen dira. Bildutako datuak datu-salmenta gisa sailkatzen diren ala ez pertsonaliza dezakezu, zure pixel pertsonalizatuaren xehetasunetako Bezeroen pribatutasuna > Datuen salmenta atalean.

Pixel pertsonalizatuen garatzaileek baimena biltzeari eta erregistratzeari buruzko informazio gehiago lor dezakete.

Pixel bakoitzak izen ezberdina izan dezake helburu bakoitzerako. Hirugarrenen pixel-dokumentazioa kontsultatu beharko zenuke Shopify-ren definizioekin nola uztartzen den ulertzeko.

Adibidez, hona hemen Marketina eta Estatistikak ataletako helburuak Google-ren baimen-moduarekin nola uztartzen diren:

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

Pixel pertsonalizatuaren adibidea

Behean Meta pixel baterako kodearen adibide bat duzu. Pixelaren kodea hirugarrenen zerbitzu-hornitzailearen eta jarraipena egin nahi diezun gertaeren arabera aldatzen da. Kontsultatu bezeroen gertaeren erreferentzia eskuragarri dauden gertaeren zerrenda ikusteko.

Meta pixel pertsonalizatuaren adibidea

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