Ö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.

Not

Özel bir piksel oluşturmadan önce daha yüksek kararlılık, güvenlik ve performans açısından mevcut uygulamaları incelemeniz gerekir. Bununla birlikte, ihtiyaçlarınızı karşılayan bir uygulama yoksa özel piksel oluşturabilirsiniz.

Ö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:

• piksellerle ilişkili riskler
• Shopify'ın piksel korumalı alanıyla ilgili sınırlamalar
• Shopify piksel korumalı alan API'sini kullanma
• müşteri etkinliği takip şeması

Ö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

Not

Bu, ileri düzey bir eğitimdir ve Shopify tarafından desteklenmez. Mağazanıza özel piksel ekleme konusunda yardıma ihtiyaç duyuyorsanız bir Shopify İş Ortağı ile çalışabilirsiniz.

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

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

script src= kullanılarak yüklenen piksellerle karşılaşabilirsiniz. Shopify'ın piksellerinde HTML desteklenmediğinden script src= öğesini 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ü, JavaScript eşdeğeri ile değiştirilebilir. Her zaman 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');

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

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.

Onayı yapılandırma

Onay gerektirecek şekilde yapılandırılmış olan Avrupa Ekonomik Alanı (AEA) ve Birleşik Krallık gibi pazarlarda web pikselleri yalnızca, web sitenizin ziyaretçileri piksel yapılandırmasında gerekli kılınan izinleri sağladıklarında çalışır. Varsayılan olarak, yeni pikseller için Pazarlama ve Analizler izinleri gereklidir.

Benzer şekilde, veri satışı olarak yapılandırılmış olan pikseller, sınırlı veri kullanımını desteklemedikleri sürece, veri satışını veya paylaşımını devre dışı bırakmış olan müşteriler için çalışmaz.

Özel piksellerin geliştiricileri, onay alma ve onay kaydı hakkında daha fazla bilgi edinebilirler.

Her piksel, her bir amaç için farklı bir ada sahip olabilir. Bunların Shopify'ın tanımlarıyla nasıl eşleştirildiğini anlamak için üçüncü tarafın piksel belgelerine başvurmanız gerekir.

Örneğin Pazarlama ve Analiz amaçları, Google'ın İzin Modu ile şu şekilde eşleştirilir:

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

Özel piksel örneği

Aşağıda, Meta pikseli 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. Kullanılabilir etkinliklerin listesi için müşteri etkinliği referansına bakın.

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