Ö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:
- 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
Özel bir piksel için kod oluşturmak aşağıdaki adımları içerir:
- Üçüncü taraf Javascript SDK'sını hazırlayın.
- 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,
});
});