Opret tilpasset pixelkode

Advarsel

Tilpassede pixels er en avanceret funktion, der kræver kendskab til JavaScript. Overholdelse af gældende lovgivning, samtykker, kodesikkerhed, fejlfinding og opdateringer er dit ansvar. Pixels er underlagt Shopifys servicevilkår.

Tilføjelse og brug af tilpassede pixels understøttes ikke af Shopify. Hvis du har brug for hjælp til at tilføje eller bruge en tilpasset pixel, kan du hyre en Shopify-partner.

Denne side indeholder en vejledning til at oprette tilpasset pixelkode for en tredjepartspixel, så du kan spore specifikke kundehændelser. Når du har oprettet koden for din tilpassede pixel, kan du tilføje pixlen til din Shopify-butik.

Bemærk

Inden du opretter en tilpasset pixel, bør du gennemgå tilgængelige apps for at opnå forbedret stabilitet, sikkerhed og ydeevne. Hvis der imidlertid ikke findes en app, der opfylder dine behov, kan du oprette en tilpasset pixel.

Forberedelse til oprettelse af en tilpasset pixel

Inden du opretter en tilpasset pixel, skal du gennemgå følgende oplysninger for at sikre dig, at du forstår, hvordan du konfigurerer din pixel:

• Risici forbundet med pixels.
• Begrænsninger i Shopifys pixel-sandbox.
• Brug af Shopifys pixel-sandbox-API.
• Skema for sporing af kundehændelser.

Når du tilføjer en tilpasset pixel, angiver du følgende oplysninger:

• Tredjeparts-JavaScript-pixlen.
• De adfærdsbaserede hændelser, du vil spore.
• Indstillingerne for samtykke til beskyttelse af kundens persondata.

Opret koden for en tilpasset pixel

Få din virksomhed til at vokse

Dette er en avanceret vejledning, og den understøttes ikke af Shopify. Hvis du har brug for hjælp til at tilføje en tilpasset pixel, kan du hyre en Shopify-partner.

Oprettelse af koden for en tilpasset pixel omfatter følgende trin:

1. Forbered tredjeparts-Javascript-SDK'en.
2. Konfigurer din pixel til at spore kundehændelser.
3. Konfigurer indstillinger for samtykke til beskyttelse af kundens persondata for din pixel.

Forberedelse af tredjeparts-Javascript-SDK'en

Den tredjepartstjeneste, du arbejder med, giver dig den kode, der er integreret med pixlen. En pixel har normalt 2 komponenter: en Javascript-SDK og trackingkoden. Al HTML i tredjepartstjenestens kode skal fjernes, da Shopifys pixel-sandbox kun understøtter JavaScript.

Her er et eksempel på en Meta-pixel. Pixels vil variere en smule fra den ene tredjepart til den anden.

​​<!-- 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, har du Metas pixel-SDK og koden til at initialisere den tilbage. Trackingkoden for hændelsen PageView er også blevet fjernet, da den tilføjes i næste trin.

​​!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 pixel-SDK overfører ikke automatisk data fra en tilpasset Shopify-pixel. For at overføre data skal du abonnere på hændelser.

Du kan støde på pixels, der indlæses ved hjælp af script src=. HTML understøttes ikke i Shopifys pixels, så du skal erstatte script src= med den tilsvarende JavaScript-kode.

Her er et eksempel på en Google Analytics-pixel, der indlæses ved hjælp af 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 af den tilsvarende JavaScript-kode. Sørg altid for, at dit src-attribut matcher HTML-versionen:

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 pixel-SDK overfører ikke automatisk data fra en tilpasset Shopify-pixel. Hvis du vil overføre data, skal du abonnere på hændelser.

Spor kundehændelser

Når du har indlæst og initialiseret pixlens SDK, skal du overføre hændelser til det med henblik på sporing. Dette gøres ved at abonnere på hændelser og derefter overføre hændelsesdataene til pixlens SDK, så de kan behandles af tredjepartstjenesten.

Abonner på standardhændelser

Shopify tilbyder et standardsæt af hændelser, som gør det nemt at sikre, at din pixel indsamler de data, den skal bruge.

Du kan abonnere på hændelser ved hjælp af Shopify Pixels Extension API. Du skal placere tredjepartspixelkoden sammen med den hændelse, du abonnerer på.

Dette er et eksempel på PageView-hændelsen for Metas pixel. Bemærk, at fbq("track") er en del af Metas kode, og at hvert firma har sin egen version, som du skal finde i deres dokumentation.

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

Nogle hændelser har metadata, som du kan overføre til din pixel. Her er et eksempel på, hvordan du kan overføre produktoplysninger til Metas ViewContent-hændelse:

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å tilpassede kundehændelser

Hvis du vil spore yderligere kundehændelser, f.eks. når nogen klikker på en knap, kan du tilføje tilpassede kundehændelser. Du kan abonnere på tilpassede hændelser på samme måde som standardhændelser. Angiv navnet på den hændelse, du vil abonnere på, og videregiv oplysningerne til tredjepartsudbyderens pixel.

Dette er et eksempel på, hvordan en publiceret tilpasset hændelse kan se ud i dit temas liquid-filer:

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

Dette er et eksempel på, hvordan du kan konfigurere din pixel til at abonnere på den tilpassede hændelse:

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

Du kan få mere at vide om tilpassede hændelser i Shopify Developer Documentation.

Konfiguration af indstillinger for samtykke og datasalg

Bemærk

Du er selv ansvarlig for at overholde gældende lovgivning om beskyttelse af personlige oplysninger, og du bør rådføre dig med din egen juridiske rådgiver for at afgøre, hvordan lovgivningen i dit område, og i det område, du sælger til, kan påvirke din virksomhed. For at sælge produkter ved hjælp af Shopify-platformen skal du overholde lovgivningen i din virksomheds og dine kunders jurisdiktion, Shopifys servicevilkår, Shopifys politik for acceptabel brug og alle andre gældende politikker. Få mere at vide om beskyttelse af kunders personlige oplysninger.

På markeder, der er konfigureret til at kræve samtykke, f.eks. Det Europæiske Økonomiske Samarbejdsområde (EØS) og Storbritannien, kører webpixels kun, når besøgende på websitet har givet de tilladelser, der kræves i pixelkonfigurationen.

Som standard kræver nye tilpassede pixels tilladelser til marketing og analyse. Du kan tilpasse, hvilke tilladelser der kræves, i afsnittet Beskyttelse af kundens personlige oplysninger > Tilladelse under oplysningerne for din tilpassede pixel.

Tilsvarende kører pixels, der er konfigureret som datasalg, ikke for kunder, der har fravalgt datasalg eller -deling, medmindre pixlen understøtter begrænset dataanvendelse. Som standard kvalificeres nye tilpassede pixels som datasalg. Du kan tilpasse, om indsamlede data kvalificeres som datasalg, i afsnittet Beskyttelse af kundens personlige oplysninger > Datasalg under oplysningerne for din tilpassede pixel.

Udviklere af tilpassede pixels kan få mere at vide om indsamling og registrering af samtykke.

Hver pixel kan have et forskelligt navn til hvert formål. Du bør læse tredjepartens pixeldokumentation for at forstå, hvordan den svarer til Shopifys definitioner.

Følgende er f.eks., hvordan formålene marketing og analyse svarer til Googles samtykketilstand:

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

Eksempel på en tilpasset pixel

Nedenfor er et eksempel på koden for en Meta-pixel. Pixelkoden varierer afhængigt af tredjepartsudbyderen og de hændelser, du vil spore. Se referencen for kundehændelser for at få en liste over tilgængelige hændelser.

Eksempel på tilpasset Meta-pixel

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