Opret tilpasset pixelkode

Denne side indeholder instruktioner til, hvordan du opretter tilpasset pixelkode for en tredjepartspixel, så du kan spore specifikke kundehændelser. Når du har oprettet koden for din tilpassede pixel, kan du føje pixelen til din Shopify-butik.

Bemærk

Før du opretter en tilpasset pixel, bør du gennemgå tilgængelige apps, da dette giver større stabilitet, sikkerhed og ydeevne. Hvis der ikke findes en app, som opfylder dine behov, kan du oprette en tilpasset pixel.

Sådan forbereder du dig på at oprette en tilpasset pixel

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

• risici, der er forbundet med pixels
• begrænsninger for Shopifys pixelsandkasse
• brug af Shopifys Pixel Sandbox API
• sporingsskema for kundehændelser

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

• tredjeparts-JavaScript-pixelen
• de adfærdshændelser, du vil spore

Opret koden til en tilpasset pixel

Bemærk

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

Oprettelse af kode til en tilpasset pixel omfatter følgende trin:

1. Klargør JavaScript SDK'en fra tredjepart.
2. Konfigurer din pixel til at spore kundehændelser.

Sådan forbereder du JavaScript SDK'en fra tredjepart

Den tredjepartstjeneste, du bruger, leverer den kode, der er integreret med pixelen, til dig. En pixel har normalt to komponenter: En JavaScript SDK og trackingkoden. Al HTML i tredjepartstjenestekoden skal fjernes, da Shopify-pixel-sandkassen kun understøtter JavaScript.

Her er et eksempel på en Meta-pixel. Pixels kan variere en smule fra én tredjepart til en 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 metaens kode, har du metaens pixel-SDK og kode tilbage til at initialisere den. Hændelsestrackingkoden PageView er også blevet fjernet, fordi den bliver tilføjet 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);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Du støder muligvis 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 tilsvarende JavaScript.

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

<!-- 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 tilsvarende JavaScript. Sørg altid for, at din 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Spor kundehændelser

Når du har indlæst og initialiseret pixelens SDK, skal du overføre hændelser til den for at spore den. Dette gøres ved at abonnere på hændelser og derefter overføre hændelsesdataene til pixelens SDK, så de kan blive behandlet af tredjepartstjenesten.

Abonner på standardhændelser

Shopify tilbyder et standardsæt af hændelser, hvilket 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 pixelkoden fra tredjepart sammen med den hændelse, du abonnerer på.

Dette er et eksempel på hændelsen PageView Metas pixel. Bemærk, at fbq("track") er en del af Metas kode, og at hvert firma vil have sin egen version, som du skal læse deres dokumentation til.

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

Nogle hændelser indeholder metadata, som du kan overføre til din pixel. Her er et eksempel på, hvordan du kan overføre nogle 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, som 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 pixelen fra tredjepartstjenesteudbyderen.

Dette er et eksempel på, hvordan en udgivet 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 for at abonnere på denne tilpassede hændelse:

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

Få mere at vide om tilpassede hændelser under Shopifys dokumentation til udviklere.

Konfigurering af samtykke

Webpixels kører kun, når besøgende har givet samtykke til markedsførings- og analyseformål på markeder, hvor du har konfigureret, at samtykke er påkrævet. Hver pixel kan have forskellige navne for hvert formål. Du bør læse pixeldokumentationen, for at forstå hvordan den er knyttet til Shopifys definitioner.

Følgende angiver f.eks., hvordan markedsførings- og analyseformål er knyttet til Googles samtykketilstand:

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

Eksempel på tilpasset pixel

Herunder er et eksempel på koden til en Meta-pixel. Pixelkoden varierer afhængigt af udbyderen af tredjepartstjenesten og de hændelser, du vil spore. Du kan finde en liste over tilgængelige hændelser under referencen til kundehændelsen.

Tilpasset metapixel

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