Özel piksel kodu oluşturma

Dikkat

Özel pikseller, JavaScript bilgisi gerektiren gelişmiş bir özelliktir. Yürürlükteki yasalara uyma, onaylar, kod güvenliği, hata giderme ve güncellemeler sizin sorumluluğunuzdadır. Pikseller, Shopify Hizmet Şartları'na tabidir.

Özel piksel ekleme ve kullanma, Shopify tarafından desteklenmez. Özel piksel ekleme veya kullanma konusunda yardıma ihtiyacınız olursa bir Shopify İş Ortağıyla çalışabilirsiniz.

Bu sayfada, belirli müşteri etkinliklerini takip edebilmeniz için üçüncü taraf bir piksele yönelik özel piksel kodu oluşturma talimatları yer alır. Özel pikselinizin kodunu oluşturduktan sonra pikseli Shopify mağazanıza ekleyebilirsiniz.

Not

Özel bir piksel oluşturmadan önce, daha iyi kararlılık, güvenlik ve performans için mevcut uygulamaları incelemeniz gerekir. Ancak ihtiyaçlarınızı karşılayan bir uygulama yoksa özel bir piksel oluşturabilirsiniz.

Özel piksel oluşturmaya hazırlanma

Özel bir piksel oluşturmadan önce, pikselinizi nasıl yapılandıracağınızı anladığınızdan emin olmak için aşağıdaki bilgileri inceleyin:

• Piksellerle ilişkili riskler.
• Shopify'ın piksel korumalı alanının sınırlamaları.
• Shopify pikselleri korumalı alan API'sini kullanma.
• Müşteri etkinliği takip şeması.

Özel bir piksel eklediğinizde aşağıdaki bilgileri belirtirsiniz:

• Üçüncü taraf JavaScript pikseli.
• Takip etmek istediğiniz davranışsal etkinlikler.
• Müşteri gizliliği onay ayarları.

Özel piksel için kod oluşturma

İşletmenizi büyütün

Bu, gelişmiş düzey bir eğitimdir ve Shopify tarafından desteklenmez. Özel piksel ekleme konusunda yardıma ihtiyacınız olursa bir Shopify İş Ortağıyla çalışabilirsiniz.

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

1. Üçüncü taraf Javascript SDK'sını hazırlama.
2. Pikselinizi müşteri etkinliklerini takip edecek şekilde yapılandırma.
3. Pikseliniz için müşteri gizliliğine yönelik onay ayarlarını yapılandırma.

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

Birlikte çalıştığınız üçüncü taraf hizmeti, pikselle entegre olan kodu size sağlar. Bir piksel genellikle 2 bileşenden oluşur: bir Javascript SDK'sı ve takip kodu. Shopify piksel korumalı alanı yalnızca JavaScript'i desteklediğinden, üçüncü taraf hizmetinin kodundaki tüm HTML'lerin kaldırılması gerekir.

Aşağıda bir Meta pikseli örneği verilmiştir. Pikseller, üçüncü taraflara göre küçük farklılıklar gösterebilir.

​​<!-- 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'yi kaldırdıktan sonra geriye Meta'nın piksel SDK'sı ve bunu başlatan kod kalır. PageView etkinlik 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'nın piksel SDK'sı, bir Shopify özel pikselinden otomatik olarak veri aktarmaz. Veri aktarmak için etkinliklere abone olmanız gerekir.

script src= kullanılarak yüklenen piksellerle karşılaşabilirsiniz. Shopify piksellerinde HTML desteklenmediğinden script src= yerine JavaScript karşılığını kullanmanız gerekir.

Aşağıda, script src= kullanılarak yüklenen örnek bir Google Analytics pikseli 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 karşılığı ile değiştirilebilir. src özelliğinizin her zaman HTML sürümüyle eşleştiğinden 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'ın piksel SDK'sı, bir Shopify özel pikselinden verileri otomatik olarak iletmez. Veri iletmek için etkinliklere abone olmanız gerekir.

Müşteri etkinliklerini takip etme

Pikselin SDK'sını yükleyip başlattıktan sonra, takip için etkinlikleri bu SDK'ya iletmeniz gerekir. Bu işlem, etkinliklere abone olunarak ve ardından etkinlik verilerinin, üçüncü taraf hizmeti tarafından işlenmek üzere pikselin SDK'sına iletilmesiyle yapılır.

Standart etkinliklere abone olma

Shopify, standart bir etkinlik seti sunar. Bu, pikselinizin ihtiyaç duyduğu verileri toplamasını sağlamanızı kolaylaştırır.

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

Bu, Meta'nın pikseli için PageView etkinliğine bir örnektir. fbq("track") kodunun Meta'nın kodunun bir parçası olduğunu ve her şirketin, belgelerine başvurmanızı gerektirecek kendi sürümünün olacağını unutmayın.

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

Bazı etkinliklerin, pikselinize aktarabileceğiniz meta verileri vardır. Aşağıda, bazı ürün ayrıntılarının Meta'nın ViewContent etkinliğine aktarılmasına ilişkin 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

Bir düğmenin tıklanması gibi ek müşteri etkinliklerini takip etmek isterseniz özel müşteri etkinlikleri ekleyebilirsiniz. Özel etkinliklere, standart etkinliklerle aynı şekilde abone olunabilir. Abone olmak istediğiniz etkinliğin adını belirtin ve bilgileri üçüncü taraf hizmet sağlayıcısının pikseline iletin.

Bu, yayınlanmış bir özel etkinliğin, temanızın liquid dosyalarında nasıl görünebileceğine ilişkin bir örnektir:

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

Aşağıda, pikselinizi bu özel etkinliğe abone olacak şekilde nasıl yapılandırabileceğinize ilişkin bir örnek verilmiştir:

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 Belgeleri'ne bakın.

Onay ve veri satışı ayarlarını yapılandırma

Not

Kendi gizlilik uyumluluğunuzdan siz sorumlusunuz. Bölgenizdeki ve satış yaptığınız bölgedeki yasaların işinizi nasıl etkileyebileceğini belirlemek için kendi hukuk danışmanınıza danışmalısınız. Shopify platformunu kullanarak ürün satmak için işletmenizin ve müşterilerinizin yargı alanındaki yasalara, Shopify Hizmet Şartları'na, Shopify Kabul Edilebilir Kullanım Politikası'na ve diğer geçerli politikalara uymanız gerekir. Müşteri gizliliği hakkında daha fazla bilgi edinin.

Onay gerektirecek şekilde yapılandırılmış olan Avrupa Ekonomik Alanı (AEA) ve Birleşik Krallık gibi pazarlarda web pikselleri yalnızca, web sitesi ziyaretçileri piksel yapılandırmasında gerekli olan izinleri verdiğinde çalışır.

Varsayılan olarak yeni özel pikseller, Pazarlama ve Analizler izinlerini gerektirir. Hangi izinlerin gerekli olduğunu, özel piksel ayrıntılarınızın Müşteri gizliliği > İzin bölümünde özelleştirebilirsiniz.

Benzer şekilde, veri satışı olarak yapılandırılan pikseller, piksel sınırlı veri kullanımını desteklemediği sürece, veri satışı veya paylaşımını devre dışı bırakan müşteriler için çalışmaz. Varsayılan olarak yeni özel pikseller veri satışı olarak nitelendirilir. Toplanan verilerin veri satışı olarak nitelendirilip nitelendirilmeyeceğini, özel piksel ayrıntılarınızın Müşteri gizliliği > Veri satışı bölümünde özelleştirebilirsiniz.

Özel piksel geliştiricileri, onay toplama ve kaydetme hakkında daha fazla bilgi edinebilir.

Her pikselin her amaç için farklı bir adı olabilir. Pikselin Shopify'ın tanımlarıyla nasıl eşleştiğini anlamak için üçüncü tarafın piksel belgelerine başvurmalısınız.

Örneğin, aşağıda Pazarlama ve Analizler amaçlarının Google'ın İzin Modu ile nasıl eşleştiği gösterilmektedir:

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

Özel piksel örneği

Aşağıda, bir Meta pikseline ilişkin kod örneği 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 örneği

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