Legge til egendefinerte piksler

Hvis det ikke er noen app for sporing av de bestemte kundehendelsene du ønsker å innhente data for, kan du legge til en egendefinert piksel som kjører i et avslappet sandkassemiljø.

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

  • JavaScript-pilkselen fra tredjepart
  • atferdshendelsene du vil spore

Forberede pikselkode fra tredjeparter

Tredjepartstjenesten du samarbeider med gir deg kode som er integrert med pikselen. En piksel har vanligvis to komponenter, en 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 piksel fra Meta. Merk at piksler varierer noe fra bedrift til bedrift.

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

Du kan komme ut for piksler som lastes inn med script src=. HTML støttes ikke i Shopifys piksler, så du må erstatte dette 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 scr= kan erstattes av følgende tilsvarende 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');

Abonner på standardhendelser

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Legg til en egendefinert piksel

Før du legger til en egendefinert piksel må du fjerne eksisterende piksler for å sikre at kundehendelser ikke telles to ganger. Eksisterende pikselkode må manuelt fjernes der den ligger, for eksempel i theme.liquid, checkout.liquid (kun Plus-forhandlere) og i andre kasseskript.

  1. Gå til Innstillinger > Kundehendelser fra Shopify-administrator.
  2. Gi pikselen et unikt navn. Hvis du angir navnet på en egendefinert piksel som allerede finnes, blir du bedt om å gi pikselen et annet navn.
  3. Klikk Legg til piksel for å åpne redigeringsprogrammet for hendelser.
  4. Lim inn JavaScript-pikselen fra tredjeparten i vinduet Kode.
  5. Legg til hendelsene du vil spore i riktig skjema.
  6. Valgfritt: Klikk Flere handlinger for å redigere pikselnavnet eller se mer informasjon om å leie inn en Shopify-ekspert for å få hjelp med egendefinerte piksler.
  7. Klikk Lagre for å lagre den egendefinerte pikselen. Hvis du er klar til å koble til den egendefinerte pikselen kan du klikke Koble til piksel for å begynne å spore hendelsene.

Koble til en egendefinert piksel

Når en egendefinert piksel er lagt til må du koble pikselen til butikken.

  1. Klikk Egendefinerte piksler fra siden Kundehendelser i Shopify-administrator.
  2. Egendefinerte piksler som ikke er koblet til for øyeblikket vises under overskriften Frakoblede piksler. Klikk Koble til i linjen for den aktuelle egendefinerte pikselen.
  3. Se gjennom Shopifys vilkår for bruk. Hvis pikselen oppfyller tjenestekravene klikker du Koble til.

Eksempler på egendefinerte piksel

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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("search_submitted", event => {
  fbq('track', 'Search', {
    search_string: event.search_value
  });
});

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("payment_info_submitted", event => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", event => {
  fbq('track', 'InitiateCheckout');
});

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

Koble fra egendefinerte piksler

Hvis du vil slutte å spore hendelser du har lagt til en egendefinert piksel for, må du manuelt koble pikselen fra nettbutikken.

Steg:

  1. Klikk Egendefinerte piksler fra siden Kundehendelser i Shopify-administrator.
  2. Egendefinerte piksler som er koblet til for øyeblikket vises øverst i listen over egendefinerte piksler. Klikk Koble fra på linjen for den aktuelle egendefinerte pikselen. Pikselen slettes ikke ved å koble den fra.

Slette egendefinerte piksler

Du kan slette egendefinerte piksler du ikke lenger har behov for.

Steg:

  1. Klikk Egendefinerte piksler fra siden Kundehendelser i Shopify-administrator.
  2. Klikk -knappen på linjen med den aktuelle egendefinerte pikselen.
  3. Klikk Slett. Bekreft slettingen, og den egendefinerte pikselen blir fjernet fra pikselbehandleren.

Du kan ikke angre sletting av en egendefinert piksel, så du må sikre at du sletter den riktige pikselen.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis