Lägga till anpassade pixlar

Om det inte finns någon app för att spåra specifika kundhändelser som du vill samla in data för kan du lägga till en anpassad pixel som körs i en lax-sandlådemiljö.

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

Förbereder tredje parts pixelkod

Den tredjepartstjänst som du arbetar med ger dig den kod som är integrerad med pixeln. En pixel har vanligtvis två komponenter, 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. Observera att pixlar kommer variera något mellan olika företag.

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

Prenumerera på standardhä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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Lägg till en anpassad pixel

Ta bort alla befintliga pixlar innan du lägger till en anpassad pixel, för att säkerställa att kundhändelser inte räknas två gånger.Befintlig pixelkod ska tas bort manuellt från alla platser den finns på, t.ex. theme.liquid,checkout.liquid (Endast Plus-handlare) och i andra kassaskript.

  1. Från din Shopify-administratör går du till Inställningar > Kundhändelser.
  2. Ge din pixel ett unikt namn. Om du anger namnet på en anpassad pixel som redan finns kommer du att bli uppmanad att ge din pixel ett annat namn.
  3. Klicka på Lägg till pixel för att öppna evenemangsredigeraren.
  4. Klistra in tredje parts JavaScript-pixel i kodfönstret.
  5. Lägg till de händelser du vill spåra i lämpligt schema.
  6. Valfritt: Klicka på Fler åtgärder för att redigera ditt pixel-namn eller visa information om hur du anlitar en Shopify-expert för hjälp med dina anpassade pixlar.
  7. Klicka på Spara för att spara din anpassade pixel. Om du är redo att ansluta din anpassade pixel nu kan du klicka på Anslut pixel för att börja spåra dina händelser.

Anslut en anpassad pixel

När en anpassad pixel har lagts till måste du ansluta pixeln till din butik.

  1. Klicka på Anpassade pixlar på sidan Kundhändelser i din Shopify-administratör.
  2. Anpassade pixlar som för närvarande inte är anslutna visas under rubriken Bortkopplade pixlar. Klicka på Anslut på lämplig anpassad pixel-rad.
  3. Granska Shopifys användarvillkor. Klicka på Anslut om din pixel uppfyller tjänstekraven.

Exempel på anpassade pixlar

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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

analytics.subscribe("payment_info_submitted", event => {
  fbq('track', 'AddPaymentInfo');
});

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

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

Koppla bort anpassade pixlar

Om du inte längre vill spåra händelser för vilka du har lagt till en anpassad pixel, måste du manuellt koppla bort pixeln från din webbshop.

Steg:

  1. Klicka på Anpassade pixlar på sidan Kundhändelser i din Shopify-administratör.
  2. Anpassade pixlar som för närvarande är anslutna visas högst upp i listan med anpassade pixlar. Klicka på Koppla bort på lämplig anpassad pixel-rad. Om du kopplar bort pixeln raderas inte pixeln.

Raderar anpassade pixlar

Du kan radera anpassade pixlar som du inte längre behöver.

Steg:

  1. Klicka på Anpassade pixlar på sidan Kundhändelser i din Shopify-administratör.
  2. Klicka på knappen ... på lämplig anpassad pixel-rad.
  3. Klicka på Radera. Bekräfta borttagningen och den anpassade pixeln kommer att tas bort från pixel-hanteraren.

Borttagning av en anpassad pixel kan inte ångras, så se till att du raderar rätt pixel.

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

Prova gratis