Skapa anpassad pixelkod

Varning

Anpassade pixlar är en avancerad funktion som kräver kunskap om JavaScript. Efterlevnad av gällande lagar, samtycken, kodsäkerhet, felsökning och uppdateringar är ditt ansvar. Pixlar omfattas av Shopifys användarvillkor.

Att lägga till och använda anpassade pixlar stöds inte av Shopify. Om du behöver hjälp med att lägga till eller använda en anpassad pixel kan du anlita en Shopify-partner.

Den här sidan innehåller instruktioner för att skapa anpassad pixelkod för en tredjepartspixel, så att du kan spåra specifika kundhändelser. När du har skapat koden för din anpassade pixel kan du lägga till pixeln i din Shopify-butik.

Observera

Innan du skapar en anpassad pixel bör du granska tillgängliga appar för förbättrad stabilitet, säkerhet och prestanda. Om det inte finns en app som uppfyller dina behov kan du dock skapa en anpassad pixel.

Förbereda för att skapa en anpassad pixel

Innan du skapar en anpassad pixel, granska följande information för att se till att du förstår hur du konfigurerar din pixel:

• Risker förknippade med pixlar.
• Begränsningar i Shopifys pixelsandlåda.
• Använda Shopifys pixelsandlåde-API.
• Schema för spårning av kundhändelser.

När du lägger till en anpassad pixel anger du följande information:

• Tredjeparts JavaScript-pixeln.
• De beteendehändelser du vill spåra.
• Samtyckesinställningarna för kundintegritet.

Skapa koden för en anpassad pixel

Få din verksamhet att växa

Detta är en avancerad handledning och stöds inte av Shopify. Om du behöver hjälp med att lägga till en anpassad pixel kan du anlita en Shopify-partner.

Att skapa koden för en anpassad pixel innefattar följande steg:

1. Förbereda tredjeparts Javascript-SDK.
2. Konfigurera din pixel för att spåra kundhändelser.
3. Konfigurera samtyckesinställningar för kundintegritet för din pixel.

Förbereda tredjeparts Javascript-SDK

Tredjepartstjänsten som du arbetar med förser dig med koden som integreras med pixeln. En pixel har vanligtvis två komponenter: ett Javascript-SDK och spårningskoden. All HTML i tredjepartstjänstens kod måste tas bort, eftersom Shopifys pixelsandlåda endast stöder JavaScript.

Här är ett exempel på en metapixel. Pixlar skiljer sig något från en tredjepart till en annan.

​​<!-- 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 tagit bort HTML från Metas kod har du kvar Metas pixel-SDK och kod för att initiera det. Spårningskoden för PageView-händelsen har också tagits bort, eftersom den kommer att läggas till i nästa steg.

​​!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 överför inte data automatiskt från en anpassad Shopify-pixel. För att överföra data måste du prenumerera på händelser.

Du kan stöta på pixlar som läses in med script src=. HTML stöds inte i Shopifys pixlar, så du måste ersätta script src= med JavaScript-motsvarigheten.

Här är ett exempel på en Google Analytics-pixel som läses in 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>

Delen script src= kan ersättas med JavaScript-motsvarigheten. Se alltid till att ditt src-attribut matchar 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 överför inte data automatiskt från en anpassad Shopify-pixel. För att överföra data måste du prenumerera på händelser.

Spåra kundhändelser

Efter att ha läst in och initierat pixelns SDK måste du skicka händelser till det för spårning. Detta görs genom att prenumerera på händelser och sedan skicka händelsedata till pixelns SDK för att behandlas av tredjepartstjänsten.

Prenumerera på standardhändelser

Shopify erbjuder en standarduppsättning händelser, vilket gör det enkelt att säkerställa att din pixel samlar in den data den behöver.

Du kan prenumerera på händelser med hjälp av Shopify Pixels Extension API. Du måste placera tredjeparts-pixelkoden tillsammans med den händelse du prenumererar på.

Det här är ett exempel på `PageView`-händelsen för Metas pixel. Observera att `fbq("track")` är en del av Metas kod och att varje företag kommer att ha sin egen version, som du måste hitta i deras dokumentation.

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

Vissa händelser har metadata som du kan skicka till din pixel. Här är ett exempel på hur du skickar vissa produktuppgifter till 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,
  });
});

Prenumerera på anpassade kundhändelser

Om du vill spåra ytterligare kundhändelser, till exempel när någon klickar på en knapp, kan du lägga till anpassade kundhändelser. Det går att prenumerera på anpassade händelser på samma sätt som standardhändelser. Ange namnet på den händelse du vill prenumerera på och skicka informationen vidare till tredjepartstjänstleverantörens pixel.

Det här är ett exempel på hur en publicerad anpassad händelse kan se ut i ditt temas Liquid-filer:

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

Det här är ett exempel på hur du kan konfigurera din pixel för att prenumerera på den anpassade händelsen:

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

Mer information om anpassade händelser finns i Shopify Developer Documentation.

Konfigurera inställningar för medgivande och dataförsäljning

Observera

Du ansvarar för din egen efterlevnad av integritetsregler och du bör rådgöra med din egen juridiska rådgivare för att avgöra hur lagarna i din region, och den region där du säljer, kan påverka ditt företag. För att sälja produkter med hjälp av Shopify-plattformen måste du följa lagarna i din och dina kunders jurisdiktion, Shopifys användarvillkor, Shopifys policy för godtagbar användning och andra tillämpliga policyer. Mer information om kundintegritet.

På marknader som är konfigurerade för att kräva medgivande, såsom Europeiska ekonomiska samarbetsområdet (EES) och Storbritannien, körs webbpixlar endast när webbplatsbesökare har gett de behörigheter som krävs i pixelkonfigurationen.

Som standard kräver nya anpassade pixlar behörigheterna marknadsföring och analys. Du kan anpassa vilka behörigheter som krävs i avsnittet Kundintegritet > Behörighet i dina anpassade pixeluppgifter.

På samma sätt kommer pixlar som har konfigurerats som dataförsäljning inte att köras för kunder som har valt bort dataförsäljning eller delning, såvida inte pixeln stöder begränsad dataanvändning. Som standard klassas nya anpassade pixlar som dataförsäljning. Du kan anpassa om insamlad data klassas som dataförsäljning i avsnittet Kundintegritet > Dataförsäljning i dina anpassade pixeluppgifter.

Utvecklare av anpassade pixlar kan lära sig mer om att samla in och registrera medgivande.

Varje pixel kan ha olika namn för varje syfte. Du bör läsa tredjeparts-pixeldokumentationen för att förstå hur den mappar mot Shopifys definitioner.

Följande visar till exempel hur syftena marknadsföring och analys mappar till Googles samtyckesläge:

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

Exempel på anpassad pixel

Nedan följer ett exempel på koden för en metapixel. Pixelkoden varierar beroende på tredjepartstjänstleverantören och de händelser som du vill spåra. Se kundhändelsereferensen för en lista över tillgängliga händelser.

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