Skapa anpassad pixelkod

Den här sidan skrevs ut den Mar 30, 2023. Besök https://help.shopify.com/sv/manual/promoting-marketing/pixels/custom-pixels/code för den aktuella versionen.

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.

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:

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

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

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 detta 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 följande JavaScript-motsvarighet. 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');

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.

Exempel på anpassad pixel

Nedanstående är ett exempel på koden för en komplett pixel. Pixelkoden varierar beroende på tredjepartstjänstleverantör och de händelser som du vill spåra.

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

analytics.subscribe("search_submitted", async (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", async (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", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

analytics.subscribe("checkout_completed", async (event) => {
  fbq('track', 'Purchase', {
    currency: event.checkout.currencyCode,
    value: event.checkout.totalPrice.amount,
  });
});

Är du redo att börja sälja med Shopify?

Prova gratis