Google Etiket Yöneticisi özel pikseli oluşturma

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

Adımlar:

  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. HTML etiketlerini kod blokundan kaldırın. Örneğin, <script></script>.
  5. Kodun geri kalanını yeni bir Shopify Özel Pikseli'ne girin.
  6. Müşteri etkinlerine abone olun ve GTM'nin dataLayer'ına iletin.
  7. Kodun nasıl görüntülenmesi gerektiğini gözden geçirmek için Google Etiket Yöneticisi özel pikseli örneğine bakın.
  8. Google Etiket Yöneticisi'ni, Özel Pikselinizden etkinlikleri kabul edecek şekilde yapılandırın.
  9. İsteğe bağlı: checkout.liquid dosyanızda mevcut dataLayer.push(etkinlik) çağrıları varsa bunu analytics.publish() ile değiştirin.

Müşteri etkinliklerine abone olma ve GTM'nin veri katmanına iletme

Özel piksel kodunuzdaki GTM dataLayer'ı kullanarak müşteri etkinliklerine abone olabilirsiniz.

Varsayılan olarak, abone olabileceğiniz bir dizi standart müşteri etkinliği vardır. Bununla birlikte, sunulan standart etkinlikler arasında yer almayan müşteri etkinliklerini takip etmek istiyorsanız liquid şablonu dosyalarından kendi özel etkinliklerinizi 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, bu etkinliği 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ığı, etkinlik veri yüküne aktarılmaktadır. Seçtiğiniz etiketteki etkinlik veri yükünden ürün başlığını almak için bir Google Etiket Yöneticisi değişkeni kullanabilirsiniz.

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

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

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Google Etiket Yöneticisi'ni Özel Pikselinizden etkinlikleri kabul edecek şekilde yapılandırma

Özel pikselinizi oluşturduktan sonra, Google Etiket Yöneticisi'ni özel pikselinizden etkinlikleri kabul edecek şekilde yapılandırmanız gerekir. Bunu yapabilmek için Google Etiket Yöneticisi'nde bir etikete, bir tetikleyiciye ve dataLayer değişkenlerine sahip olmanız gerekir.

Aşağıdaki tabloda, belirli standart müşteri etkinliklerine ve bunların Google Etiket Yöneticisi'ndeki eş değerleri verilmiştir:

Standart Shopify müşteri etkinliklerinin ve bu etkinliklerin GTM'deki eş değer etkinliklerinin listesi
Shopify Etkinliği Tetikleyici GTM Etkinliği
payment_info_submitted Ödeme bilgilerini gönderme add_payment_info
checkout_address_info_submitted Kargo bilgilerini gönderme add_shipping_info
product_added_to_cart Alışveriş sepetine ürün ekleme add_to_cart
checkout_started Ödeme işlemini başlatma begin_checkout
checkout_completed Ödemeyi tamamlama satın alım
product_removed_from_cart Sepetten ürün kaldırma remove_from_cart
cart_viewed Alışveriş sepetini görüntüleme view_cart
product_viewed Ürün ayrıntıları sayfasını görüntüleme view_item
collection_viewed Öğelerin listesini görüntüleme view_item_list

Özel piksel dataLayer etkinliklerinizin işlenebilmesi için GTM etiket etkinliği parametrelerinin, beklenen adlandırma kurallarıyla eşleşmesi gerekir.

Belirli özel piksel dataLayer etkinliği özellikleri ve bunların Google Analytics 4'teki (GA4) eş değer etkinlik parametreleri aşağıda verilmiştir:

GA4 adlandırma kuralını kullanan belirli özel piksel dataLayer etkinliklerinin listesi
Özel piksel dataLayer etkinlikleri GA4 etkinlik parametreleri
event.data?.checkout?.currencyCode para birimi
event.data?.checkout?.totalPrice?.amount value
event.data?.checkout?.order?.id transaction_id
event.data?.checkout?.discountAllocations coupon
event.data?.checkout?.shippingLine?.price?.amount shipping
event.data?.checkout?.totalTax tax
event.data?.checkout?.lineItems items

Aşağıdaki checkout_completed etkinliğinin kullanıldığı bir örnek:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Google Etiket Yöneticisi tetikleyicisi, checkout_completed etkinlik adına sahip özel bir etkinlik türüdür. Tetikleyicide yer alan Etkinlik adı alanı, özel pikselinizdeki etkinlik anahtarıyla eşleşmelidir.

orderId ve currency, Google Etiket Yöneticisi'nde etkinlikteki verileri almak için kullanacağınız değişkenlerdir. Bunlar, Google Etiket Yöneticisi'nde bir dataLayer değişkeniyle eşleştirilebilir. Her bir etkinlik değişkeninin, kendi dataLayer değişkeni olmalıdır. Tetikleyiciyi, tüm özel etkinliklerde tetiklenecek şekilde ayarlayın.

Oluşturduğunuz tetikleyiciyi kullanan bir etiket oluşturun. Etkinlik parametrelerinin altına, almak istediğiniz değişkenleri ekleyin. Yukarıdaki örnekte orderId, currency, price, shippingLine ve totalTax, dataLayer değişkenleri olarak ayarlanır. Etiket her etkinleştiğinde, etkinlikle birlikte bu dataLayer değişkenlerini alır.

Veri aktarımının gerçekleşebilmesi için Google Etiket Yöneticisi'nde en az bir etiket ve tetikleyicinin ayarlanmış olması gerektiğini unutmayın.

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

Google Etiket Yöneticisi'ni daha önce ayarladıysanız dataLayer.push çağrılarınızı Shopify.analytics.publish() çağrılarıyla değiştirmeniz gerekir. dataLayer.push çağrılarınızı, tema düzenleyicinizin Düzen bölümündeki theme.liquid dosyalarında bulabilirsiniz.

Ayrıca, checkout.liquid'de bulunan dataLayer.push çağrılarını da değiştirmeniz gerekir. Ancak checkout.liquid, ödeme genişletilebilirliği ile uyumlu olmadığından verileri web piksellerine iletmek için bir kullanıcı arabirimi uzantısı kullanmanız gerekir.

Aşağıda, theme.liquid dosyalarında dataLayer kullanılarak takip edilen özel bir e-posta kayıt etkinliğine dair basitleştirilmiş bir örnek yer almaktadır.

<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 dataLayer 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 Analytics 4'ü ayarlamayla ilgili ipuçları

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'da 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 dataLayer'a ilettiğiniz değerle aynı olacak şekilde ayarlamanız gerekir.

Gelişmiş ölçüm

GA4'ü Shopify'ın piksel korumalı alanına yüklediğinizde normalde otomatik olarak oluşturulan 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. Öte yandan, GA4'ün gelişmiş ölçüm etkinliklerini kendi başınıza, ö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. Google Tag Assistant Legacy Chrome uzantısını tarayıcınıza ekleyin.
  3. Önce uzantı simgesine, ardından Etkinleştir'e tıklayın.
  4. Sitenize gidin ve test etmek istediğiniz etkinlikleri tetikleyin.
  5. Uzantıda, Google Etiket Yöneticisi etiketine tıklayın. Data Layer (Veri Katmanı) bölümünde, tetiklenen etkinliğin veri yükünün görüntülenmesi gerekir.
  6. Uzantıda, Google Etiket Yöneticisi tarafından yüklenen diğer tüm etiketler de listelenir. Bu etiketlere tıklayarak, etiketlere gönderilen verileri gözden geçirebilirsiniz.

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

Ücretsiz olarak dene