Skapa anpassad pixelkod

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 så bör du granska tillgängliga appar för förbättrad stabilitet, säkerhet och prestanda. Om det inte finns någon app som uppfyller dina behov kan du skapa en anpassad pixel.

Förbereder för att skapa en anpassad pixel

Granska följande information innan du lägger till en anpassad pixel för att se till att du förstår hur du skapar en anpassad pixel:

• risker i samband med pixlar
• begränsningar i Shopifys testpixlar
• med hjälp av test-API för Shopify-pixlar
• schema för spårning av kundhändelse

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

• den tredje partens JavaScript-pixel
• de beteendehändelser du vill spåra

Skapa koden för en anpassad pixel

Få din verksamhet att växa

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

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

1. Förbered JavaScript-SDK från tredje part.
2. Konfigurera din pixel för att spåra kundhändelser.

Förbereder javascript-SDK från tredje part

Den tredjepartstjänst som du arbetar med ger dig den kod som är integrerad med pixeln. En pixel har vanligtvis två komponenter, JavaScript-SDK och spårningskoden. All HTML-kod i tredjepartstjänster måste tas bort, eftersom sandlådan för Shopify-pixeln endast stöder JavaScript.

Här är ett exempel på en Meta-pixel. Pixlar skiljer sig åt lite från en tredje part 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-koden från Meta-koden har du kvar Metas pixel-kod SDK och koden för att initialisera den. Händelsespårningskoden PageView 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);

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

Du kan stöta på pixlar som laddas med hjälp av 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å Google Analytics-pixeln:

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

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

Spåra kundhändelser

När du har laddar och initialiserar pixelns SDK måste du föra vidare händelser till den 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 API för Shopify Pixels-tillägg. Du måste placera tredje parts pixelkod i den händelse som du prenumererar på.

Detta är ett exempel på händelsen PageView för Metas pixel. Observera att fbq("track") är en del av Meta-koden och att varje företag kommer att ha sin egen version som du måste referera till deras dokumentation för att få information om.

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

Vissa händelser har metadata som du kan överföra till din pixel. Här är ett exempel på att skicka några 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, t.ex. när någon klickar på en knapp, kan du lägga till anpassade kundhändelser. Anpassade händelser kan prenumereras på, på samma sätt som standardhändelser. Ange namnet på den händelse som du vill prenumerera på och skicka informationen vidare till tredjepartsleverantörens pixel.

Detta är ett exempel på hur en publicerad anpassad händelse kan visas i ditt temas liquid-filer:

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

Detta ä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});
});

Om du vill ha mer information om anpassade händelser, se Shopifys utvecklardokumentation.

Konfigurera samtycke

På marknader som är konfigurerade för att kräva samtycke, exempelvis Europeiska ekonomiska samarbetsområdet (EES) och Storbritannien, körs webbpixlar endast när webbplatsens besökare har angett de behörigheter som krävs i pixelkonfigurationen. Som standard kräver nya pixlar behörigheter för marknadsföring och analyser.

Likaså kommer pixlar som konfigurerats som försäljning av personuppgifter inte att köras för kunder som har valt bort försäljning eller delning av personuppgifter, såvida pixeln inte stöder begränsad dataanvändning.

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

Varje pixel kan ha ett annat namn för varje syfte. Du bör konsultera pixeldokumentationen för tredjepart för att förstå hur den kartlägger Shopifys definitioner.

Här kan du till exempel se hur ändamålen Marknadsföring och Analyser kartläggs 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 Meta-pixel. Pixelkoden varierar beroende på tredjepartstjänstleverantör och de händelser som du vill spåra. Se kundhändelsereferensen för en lista över tillgängliga händelser.

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