Özel piksel kodu oluşturma

Bu sayfada, belirli müşteri etkinliklerini takip etmek üzere üçüncü taraf bir piksel için özel piksel kodu oluşturma talimatları içerir. Özel pikselin kodunu oluşturduktan sonra pikseli Shopify mağazanıza ekleyebilirsiniz.

Özel piksel oluşturmaya hazırlanma

Özel piksel oluşturmadan önce, pikseli nasıl yapılandıracağınızı anladığınızdan emin olmak için aşağıdaki bilgileri gözden geçirin:

Özel piksel eklerken aşağıdaki bilgileri girersiniz:

  • Üçüncü taraf JavaScript pikseli
  • Takip etmek istediğiniz davranışsal etkinlikler

Özel piksel için kodu oluşturma

Özel bir piksel için kod oluşturmak aşağıdaki adımları içerir:

  1. Üçüncü taraf Javascript SDK'sını hazırlayın.
  2. Pikselini müşteri etkinliklerini takip etmek için yapılandırın.

Üçüncü taraf Javascript SDK'sını hazırlama

Kullandığınız üçüncü taraf hizmeti, size piksel ile entegre edilmiş kodu sağlar. Bir pikselin genellikle iki bileşeni vardır: SDK ve takip kodu. Shopify piksel korumalı alanı yalnızca JavaScript'i desteklediği için üçüncü taraf hizmet kodundaki tüm HTML kodları kaldırılmalıdır.

Aşağıda bir Meta piksel örneği verilmiştir. Pikseller bir üçüncü taraftan diğerine biraz farklılık gösterir.

​​<!-- 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 -->

Meta'nın kodundan HTML kodlarını kaldırdıktan sonra elinizde Meta'nın piksel SDK'sı ve bunu başlatacak kod kalır. PageView (Sayfa Görüntüleme) etkinlikleri takip kodu da bir sonraki adımda ekleneceği için kaldırılmıştır.

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

script src= kullanılarak yüklenen piksellerle karşılaşabilirsiniz. Shopify'ın piksellerinde HTML desteklenmediğinden bunu JavaScript eşdeğeri ile değiştirmeniz gerekir.

Aşağıda bir Google Analytics pikseli örneği verilmiştir:

<!-- 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= bölümü, aşağıdaki JavaScript eşdeğeri ile değiştirilebilir. Src özelliğinizin HTML versiyonuyla uyumlu olduğundan emin olun:

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

Müşteri etkinliklerini takip etme

Pikselin SDK'sını yükleyip başlattıktan sonra içine takip edilecek etkinlikleri aktarmanız gerekir. Bunu yapmak için etkinliklere abone olmak ve ardından etkinlik verilerini, üçüncü taraf hizmeti tarafından işlenmek üzere pikselin SDK'sına aktarmak gerekir.

Standart etkinliklere abone olma

Shopify, pikselinizin toplaması gereken verileri topladığından emin olmanızı kolaylaştıran standart bir etkinlik kümesi sunar.

Shopify Pixels Extension API'sini kullanarak etkinliklere abone olabilirsiniz. Abone olduğunuz etkinlikle birlikte üçüncü taraf piksel kodunu da yerleştirmeniz gerekir.

Aşağıda, Meta'nın pikseli için PageView (Sayfa görüntüleme) etkinliğiyle ilgili bir örnek verilmiştir. fbq("track") öğesinin, Meta kodunun bir parçası olduğunu ve her şirketin, o şirketin belgelerine referans vermenizi gerektiren kendi versiyonu olacağını unutmayın.

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

Bazı etkinliklerde, pikselinize aktarabileceğiniz meta veriler bulunur. Aşağıda, bazı ürün ayrıntılarının Meta'nın ViewContent (İçerik Görüntüleme) etkinliğine aktarılmasıyla ilgili bir örnek verilmiştir:

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

Özel müşteri etkinliklerine abone olma

Birinin bir düğmeye tıklaması gibi ek müşteri etkinliklerini takip etmek istemeniz özel müşteri etkinlikleri ekleyebilirsiniz. Özel etkinliklere standart etkinliklerle aynı şekilde abone olunabilir. Abone olmak istediğiniz etkinliğin adını beyan edin ve bilgileri üçüncü taraf hizmet sağlayıcısının pikseline geçin.

Yayınlanan bir özel etkinliğin temanıza liquid dosyalarında nasıl görünebileceğine bir örnektir:

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

Bu örnek, pikselini bu özel etkinliğe abone olacak şekilde nasıl yapılandırabileceğiniz ile ilgili bir örnektir:

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

Özel etkinlikler hakkında daha fazla bilgi için Shopify geliştirici belgelerine bakın.

Özel piksel örneği

Aşağıda eksiksiz bir pikselin koduna bir örnek verilmiştir. Piksel kodu, üçüncü taraf hizmet sağlayıcısına ve takip etmek istediğiniz etkinliklere göre değişiklik gösterir.

Özel Meta pikseli

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

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene