Opprette egendefinert pikselkode

Denne siden inneholder instruksjoner til hvordan du oppretter egendefinert pikselkode for en tredjepartspiksel, slik at du kan spore bestemte kundehendelser. Når du har opprettet koden for den egendefinerte pikselen kan du legge til pikselen i Shopify-butikken.

Merk

Før du oppretter en egendefinert piksel, bør du gå gjennom tilgjengelige apper for økt stabilitet, sikkerhet og ytelse. Hvis det ikke finnes en app som fyller dine behov, kan du også opprette en egendefinert piksel.

Forberedelser til å opprette en egendefinert piksel

Før du oppretter en egendefinert piksel må du gå gjennom følgende informasjon for å sikre at du forstår hvordan pikselen konfigureres:

• risikoer knyttet til piksler
• begrensninger i Shopifys sandkasse for piksler
• bruke Shopifys API for pikselsandkasser
• skjema for sporing av kundehendelser

Når du legger til en egendefinert piksel angir du følgende informasjon:

• JavaScript-pilkselen fra tredjepart
• atferdshendelsene du vil spore

Opprett koden for en egendefinert piksel

Merk

Dette er en avansert veiledning, som ikke støttes av Shopify. Hvis du trenger hjelp med å legge til en egendefinert piksel, kan du leie inn en Shopify-partner.

Opprettelse av kode for en egendefinert piksel involverer følgende trinn:

1. Forbered tredjeparts Javascript-SDK.
2. Konfigurer pikselen til å spore kundehendelser.

Forberede tredjeparts Javascript SDK

Tredjepartstjenesten du samarbeider med gir deg kode som er integrert med pikselen. En piksel har vanligvis to komponenter, en Javascript SDK og sporingskoden. Alle HTML-koder i koden fra tredjepartstjenesten må fjernes, da Shopifys pikselsandkasse bare støtter JavaScript.

Her er et eksempel på en Meta-piksel. Piksler varierer noe blant ulike tredjeparter.

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

Når du har fjernet HTML-koden fra Metas kode står du igjen med Metas piksel-SDK og koden som initialiserer den. Hendelsessporingskoden PageView er også fjernet, fordi den legges til i neste trinn.

​​!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's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Du kan treffe på piksler som lastes inn med script src=. HTML støttes ikke i Shopify-piksler, så du må erstatte script src= med tilsvarende i JavaScript.

Her er et eksempel på en Google Analytics-piksel:

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

Delen script src= kan erstattes av tilsvarende i JavaScript-kode. Kontroller alltid at src-attributtet samsvarer med HTML-versjonen:

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's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Spor kundehendelser

Når du har lastet inn og initialisert pikselens SDK må du sende hendelser til den for sporing. Dette gjøres ved å abonnere på hendelser, og deretter sende hendelsesdata til pikselens SDK for behandling hos tredjepartstjenesten.

Abonner på standardhendelser

Shopify tilbyr et standardsett med hendelser, som gjør det enkelt å sikre at pikselen innhenter de dataene du ønsker.

Du kan abonnere på hendelser med Shopifys API for pikselutvidelser. Du må legge inn pikselkoden fra tredjeparten med hendelsen du abonnerer på.

Dette er et eksempel på PageView-hendelsen for Metas piksel. Merk at fbq("track") er en del av Metas kode, og at hver enkelt bedrift har sin egen versjon, som du får mer informasjon om fra deres dokumentasjon.

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

Noen hendelser har metadata som kan sendes til pikselen. Her er et eksempel på hvordan du kan sende produktdetaljer til Metas ViewContent-hendelse:

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

Abonner på egendefinerte kundehendelser

Hvis du ønsker å spore ytterligere kundehendelser, som når noen klikker på en knapp, kan du legge til egendefinerte kundehendelser. På samme måte som standardhendelser kan også egendefinerte hendelser abonneres på. Deklarer navnet på hendelsen du vil abonnere på, og send informasjonen til tredjepartsleverandørens piksel.

Dette er et eksempel på hvordan en publisert egendefinert hendelse kan se ut i temaets liquid-filer:

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

Dette er et eksempel på hvordan du kan konfigurere pikselen for å abonnere på denne egendefinerte hendelsen:

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

Hvis du ønsker mer informasjon om egendefinerte hendelser kan du se Shopifys utviklerdokumentasjon.

Konfigurere samtykker

I markeder som er konfigurert for å kreve samtykke, som for eksempel det europeiske økonomiske samarbeidsområde (EØS) og Storbritannia, kjører nettpiksler bare når de besøkende til nettstedet har gitt nødvendige tillatelser i pikselkonfigurasjonen. Som standard krever nye piksler tillatelsene Markedsføring og Analyse.

På samme måte vil ikke piksler som er konfigurert som datasalg kjøre for kunder som har trukket seg fra salg eller deling av data, med mindre pikselen støtter begrenset bruk av data.

Utviklere av egendefinerte piksler kan finne ut mer om innhenting og registrering av samtykke.

Hver piksel kan ha et annet navn for hvert formål. Du bør rådføre deg med dokumentasjonen for tredjepartspikselen for å forstå hvordan den kobles til Shopifys definisjoner.

Følgende er et eksempel på hvordan formålene Markedsføring og Analyse kobles til Googles samtykkemodus:

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

Eksempel på egendefinert piksel

Nedenfor finner du et eksempel på koden for en Meta-piksel. Pikselkoden varierer avhengig av tredjepartsleverandøren og hendelsene du ønsker å spore. Se referansen for kundehendelsen for en liste over tilgjengelige hendelser.

Egendefinert Meta-piksel

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