Opprett egendefinert pikselkode

Forsiktig

Egendefinerte piksler er en avansert funksjon som krever kunnskap om JavaScript. Overholdelse av gjeldende lover, samtykker, kodesikkerhet, feilsøking og oppdateringer er ditt ansvar. Piksler er underlagt Shopifys tjenestevilkår.

Shopify gir ikke støtte for å legge til og bruke egendefinerte piksler. Hvis du trenger hjelp med å legge til eller bruke en egendefinert piksel, kan du leie inn en Shopify-partner.

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

Merk

Før du oppretter en egendefinert piksel, bør du se gjennom tilgjengelige apper for å få bedre stabilitet, sikkerhet og ytelse. Hvis du ikke finner en app som dekker behovene dine, kan du imidlertid opprette en egendefinert piksel.

Forberede opprettelse av en egendefinert piksel

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

• Risikoer knyttet til piksler.
• Begrensninger i Shopifys sandkassemiljø for piksler.
• Bruke API-et for Shopifys sandkassemiljø for piksler.
• Skjema for sporing av kundeaktiviteter.

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

• JavaScript-pikselen fra tredjeparten.
• Atferdshendelsene du vil spore.
• Samtykkeinnstillingene for kundenes personvern.

Opprette koden for en egendefinert piksel

Få virksomheten til å vokse

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

For å opprette koden for en egendefinert piksel, må du utføre følgende trinn:

1. Forberede JavaScript-SDK-en fra tredjeparten.
2. Konfigurer pikselen for å spore kundeaktiviteter.
3. Konfigurer samtykkeinnstillinger for kundenes personvern for pikselen.

Forberede JavaScript-SDK-en fra tredjeparten

Tredjepartstjenesten du jobber med gir deg koden som er integrert med pikselen. En piksel har vanligvis to komponenter: en JavaScript-SDK og sporingskoden. All HTML i koden fra tredjepartstjenesten må fjernes, ettersom Shopifys sandkassemiljø for piksler bare støtter JavaScript.

Her er et eksempel på en Meta-piksel. Piksler vil variere noe fra en tredjepart til en annen.

​​<!-- 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 fra Metas kode, sitter du igjen med Metas piksel-SDK og kode for å initialisere den. Sporingskoden for PageView-hendelsen 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);

Metas piksel-SDK overfører ikke data automatisk fra en egendefinert Shopify-piksel. For å overføre data, må du abonnere på hendelser.

Du kan komme over piksler som lastes inn ved hjelp av script src=. HTML støttes ikke i Shopifys piksler, så du må erstatte script src= med den tilsvarende JavaScript-koden.

Her er et eksempel på en Google Analytics-piksel som lastes inn med 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>

script src=-delen kan erstattes med den tilsvarende JavaScript-koden. Sørg alltid for 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');

Googles piksel-SDK overfører ikke automatisk data fra en egendefinert Shopify-piksel. For å overføre data må du abonnere på hendelser.

Spor kundeaktiviteter

Etter at du har lastet og initialisert pikselens SDK, må du sende hendelser til den for sporing. Dette gjøres ved å abonnere på hendelser, og deretter sende hendelsesdataene til pikselens SDK for behandling av tredjepartstjenesten.

Abonner på standardhendelser

Shopify tilbyr et standardsett med hendelser, som gjør det enkelt å sikre at pikselen samler inn de nødvendige dataene.

Du kan abonnere på hendelser ved hjelp av Shopify Pixels Extension API. Du må plassere tredjepartens pikselkode sammen med hendelsen du abonnerer på.

Dette er et eksempel på PageView-hendelsen for Meta-pikselen. Merk at fbq("track") er en del av Metas kode, og at hver bedrift har sin egen versjon som du må slå opp i dokumentasjonen deres for å finne.

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

Noen hendelser har metadata som du kan sende til pikselen din. Her er et eksempel på hvordan du kan sende noen 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 kundeaktiviteter

Hvis du vil spore flere kundeaktiviteter, for eksempel når noen klikker på en knapp, kan du legge til egendefinerte kundeaktiviteter. Egendefinerte hendelser kan abonneres på på samme måte som standardhendelser. Angi navnet på hendelsen du vil abonnere på, og send informasjonen videre til pikselen til tredjeparts-tjenesteleverandøren.

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 til å abonnere på den egendefinerte hendelsen:

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

Hvis du vil ha mer informasjon om egendefinerte hendelser, kan du se Shopify Developer-dokumentasjonen.

Konfigurere innstillinger for samtykke og datasalg

Merk

Du er ansvarlig for din egen personvernetterlevelse, og du bør rådføre deg med en juridisk rådgiver for å avgjøre hvordan lovene i din region, og regionen du selger i, kan påvirke bedriften din. For å selge produkter med Shopify-plattformen, må du overholde lovene i jurisdiksjonen til bedriften og kundene dine, Shopifys tjenestevilkår, Shopifys retningslinjer for akseptabel bruk og eventuelle andre gjeldende retningslinjer. Finn ut mer om personvern for kunder.

I markeder som er konfigurert til å kreve samtykke, som for eksempel Det europeiske økonomiske samarbeidsområde (EØS) og Storbritannia, kjøres sporingspiksler bare når besøkende på nettstedet har gitt de nødvendige tillatelsene i pikselkonfigurasjonen.

Som standard krever nye egendefinerte piksler tillatelsene Markedsføring og Analyser. Du kan tilpasse hvilke tillatelser som kreves i seksjonen Personvern for kunder > Tillatelse i detaljene for den egendefinerte pikselen.

På samme måte vil ikke piksler som er konfigurert som datasalg, kjøres for kunder som har reservert seg mot salg eller deling av data, med mindre pikselen støtter begrenset databruk. Som standard kvalifiserer nye egendefinerte piksler som datasalg. Du kan tilpasse om innsamlede data kvalifiserer som datasalg i seksjonen Personvern for kunder > Datasalg i detaljene for den egendefinerte pikselen.

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

Hver piksel kan ha et annet navn for hvert formål. Du bør se i tredjepartens pikseldokumentasjon for å forstå hvordan det samsvarer med Shopifys definisjoner.

For eksempel samsvarer formålene Markedsføring og Analyser med Googles samtykkemodus på følgende måte:

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

Eksempel på egendefinert piksel

Nedenfor ser du et eksempel på koden for en Meta-piksel. Pikselkoden varierer avhengig av tredjeparts-tjenesteleverandøren og hendelsene du vil spore. Se referansen for kundehendelser for en liste over tilgjengelige hendelser.

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