Google Etiket Yöneticisi özel pikseli oluşturma

Bu sayfanın yazdırılma zamanı: Mar 27, 2023. Geçerli sürüm için https://help.shopify.com/tr/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial adresini ziyaret edin.

Bu makalede, üçüncü taraf piksellerinizi yönetmek için Google Etiket Yöneticisi'ni (GTM) özel bir piksel olarak nasıl kullanacağınızla ilgili talimatlar verilmiştir.

Özel piksel oluşturmaya hazırlanma

Google Etiket Yöneticisi'ni kullanarak özel piksel oluşturmadan önce, pikselin nasıl yapılandırılacağını anladığınızdan emin olmak için aşağıdaki bilgileri inceleyin:

Google Etiket Yöneticisi özel pikseli oluşturma

Basamak

  1. Google Etiket Yöneticisi hesabınızı açın ve özel bir piksel ayarlamak istediğiniz hesabı seçin.
  2. Yönetici'ye ve ardından yükleme kodunu açmak için Google Etiket Yöneticisi'ni yükle'ye tıklayın.
  3. Bir sayfanın başlık bölümüne ait kod blokunu kopyalayın.
  4. Bu kod blokundan HTML etiketlerini kaldırın.
  5. Kalan kodu yeni bir Shopify Özel Pikseli'ne girin.
  6. dataLayer nesnenizi window.dataLayer = window.dataLayer || []; ile başlatın.

Özel piksel kodunuz GTM kapsayıcı kimliğinizle eşleşmeli ve şu şekilde olmalıdır: GTM-XXXXXXX.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

Özel etkinlerine abone olma ve GTM'nin dataLayer öğesine iletme

dataLayer.push() çağrılarını Liquid şablon dosyalarınıza eklemek yerine, özel piksel kodunuzdaki tüm GTM dataLayer işlerini siz yaparsınız.

Varsayılan olarak, abone olabileceğiniz standart özel etkinlikler kümesi vardır ancak Liquid şablon dosyalarından kendi özel etkinliklerinizi de yayınlayabilirsiniz.

Aşağıda, bir kullanıcının ürününüzü görüntülediğini belirten standart "product_viewed" etkinliğine abone olma örneği verilmiştir. Etkinlik tetiklendiğinde dataLayer'a iletilir.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

Bu örnekte, ürün başlığıyla ilgili veriler iletilmiştir. Bu veriler, Google Etiket Yönetici kullanılarak diğer etiketlere yönlendirilebilir.

Eski dataLayer.push(event) çağrılarını analytics.publish() ile değiştirme

Daha önce Google Etiket Yöneticisi'ni ayarladıysanız dataLayer.push çağrılarınızı, Shopify.analytics.publish() çağrılarıyla değiştirmeniz gerekir.

Aşağıda, dataLayer kullanılarak izlenen özel e-postayla kaydolma etkinliğinin basitleştirilmiş bir örneği verilmiştir.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Verileri özel pikselinize ileten Shopify eşdeğeri şu şekilde görünür.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Ardından, özel piksel kodunuza aşağıdakilere benzer kod eklersiniz.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Eski dataLayer.push(data) öğesini değiştirme

Google Etiket Yöneticisi'nin, her etkinlikte durum bilgisi içeren veri katmanı nesnesini iletmenizi sağlayan bir özelliği vardır. Shopify'ın piksel korumalı alanında eşdeğer bir özellik bulunmasa da kendi veri nesnenizi oluşturup bunları özel etkinliklere ileterek aynı sonucu elde edebilirsiniz.

Örneğin, özel etkinliklerinizin herhangi biri yayınlanmadan önce bir "customData" nesnesi tanımlayın.

<script>
  const customData = {email: customer.email}
</script>

Ardından, özel verilerinizi dahil etmek istediğinizde bu verileri yayınlama yönteminize iletin.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Google Etiket Yöneticisi özel pikseli örneği

Aşağıdaki örnekte, verilerin GTM'ye nasıl gönderileceğini gösteren Google Etiket Yöneticisi özel pikselinin basitleştirilmiş bir sürümü verilmiştir. dataLayer öğenize daha fazla etkinlik iletmek için abone olduğunuz standart ve özel etkinliklerin sayısını artırabilirsiniz.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Google Analytics 4'ü ayarlama ile ilgili ipuçları ve püf noktalar

Google Etiket Yöneticisi'ni bir özel piksel olarak kullanırken Google Analytics 4'ü (GA4) ayarlama ile ilgili aşağıdaki hususları inceleyin.

Daha sade sayfa URL'leri

GA4 bir korumalı alanda çalışırken, sayfa URL'lerinin çalışılan korumalı alanla ilgili bilgiler içerdiğini görebilirsiniz. Korumalı alan bilgilerini bu URL'lerden kaldırmak istiyorsanız GA4'ün otomatik sayfa takibini devre dışı bırakabilir ve bunun yerine standart page_viewed etkinliğini kullanarak kendi sayfa takibinizi uygulayabilirsiniz.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Kendi etkinliğinizi dataLayer öğesinde yayınladıktan sonra page_viewed etkinliğinde tetiklenen bir GA4 page_view etiketi oluşturabilirsiniz. Genellikle, Google Analytics: GA4 Etkinliği etiket türünü kullanıp Etkinlik Adını page_view olarak ayarlayabilirsiniz. Etiket türünü ve etiket adını ayarladıktan sonra page_location için bir parametre eklemeniz ve değeri, özel pikselinizden veri katmanınıza ilettiğiniz değerle aynı olacak şekilde ayarlamanız gerekir.

Gelişmiş ölçüm

GA4'ü Shopify'ın piksel korumalı alanında yüklediğinizde normalde otomatik olarak çıkarılan bazı etkinliklerin manuel olarak ayarlanması gerekir. Örneğin, GA4'ün Gelişmiş ölçüm ayarının bir parçası olan gelen bağlantı tıklamaları, özel pikseller kullanıldığında güvenlik nedeniyle otomatik olarak tetiklenemez. Ancak GA4'ün gelişmiş ölçüm etkinliklerini, kendiniz özel etkinlikler olarak uygulayabilirsiniz.

Aşağıdaki kodda, giden bağlantı tıklamalarını takip etmenin basitleştirilmiş bir örneği verilmiştir.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Son olarak GTM'de, GA4'ün gelişmiş etkinlik adlandırması ile eşleşmesi için etkinlik adını tıklama yaparak bağlantı tıklamalarını GA4'e gönderen bir GA4 etiketi oluşturun.

Google'ın gelişmiş ölçüm metriklerinden herhangi biriyle aynı takibi elde edebilirsiniz.

Test etme ve hata ayıklama

  1. Shopify mağazanızı Bir Chrome tarayıcıda açın.
  2. Tarayıcınızda ağ sekmesini açın ve collect?... olarak adlandırılan talebi bulun. Bu talep, Google Etiket Yöneticinizden GA4'e veri gönderiliyorsa GA4 ölçüm kimliğinizi içerir.
  3. Google Analytics hesabınızda Yönetici'ye ve ardından DebugView'a tıklayın.
  4. Chrome tarayıcınızda GA Debug Google Uzantısının eklenmiş olduğundan emin olun:
    • GA Debug'u açın.
    • Ayrı bir sekmede Shopify mağazanızı açın.
    • Hata ayıklama görünümünde GA4'e geri dönüp page_viewed etkinliklerini inceleyin.

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

Ücretsiz olarak dene