Google Tag Manager özel pikseli oluşturma
Üçüncü taraf piksellerinizi yönetmek için Google Tag Manager'ı (GTM) özel bir piksel olarak kullanabilirsiniz.
GTM özel pikselinizi test etmeye hazır olduğunuzda, takip etmek istediğiniz tüm etkinliklerin sandbox'a hatasız olarak eklendiğinden emin olmak için Shopify Piksel Yardımcısı'nı kullanın.
Sayfada hangi Google etiketlerinin yüklendiğini test etmek için Google Etiket Yardımcısı sayfa uzantısını da kullanabilirsiniz. Ancak Google Etiket Yardımcısı'nın Etiketteki hatayı giderme özelliği özel piksellerle uyumlu değildir ve özel bir pikseldeki Google etiketlerini ya da GTM tarafından yüklenen diğer pikselleri algılamaz.
Bu sayfada
Özel piksel oluşturmaya hazırlanma
Google Tag Manager'ı kullanarak ö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:
- Bir Google Tag Manager hesabı oluşturun veya açın ve GTM Konteyner Kimliğini alın.
- Güvenlik nedeniyle, sandbox'ımızda yüklenen etiket yöneticileri diğer tüm piksellerle aynı kısıtlamalara sahiptir. Piksel sandbox sınırlamaları hakkında daha fazla bilgi edinin.
Google Tag Manager özel pikseli oluşturma
Üçüncü taraf piksellerinizi yönetmek için bir Google Tag Manager özel pikseli oluşturabilirsiniz.
Adımlar:
- Google Tag Manager hesabınızı açın ve özel piksel ayarlamak istediğiniz hesabı seçin.
- Yönetici'ye tıklayın, ardından yükleme kodunu açmak için Google Tag Manager'ı Yükle'ye tıklayın.
- Sayfanın
headbölümüne ait kod bloğunu kopyalayın. - Kod bloğundan HTML etiketlerini kaldırın. Örneğin,
<script></script>. - Kalan kodu yeni bir Shopify Özel Pikseli'ne ekleyin.
- Müşteri etkinliklerine abone olup GTM'nin dataLayer'ına aktarın.
- Kodun nasıl görünmesi gerektiğini incelemek için örnek Google Tag Manager özel pikseline bakın.
- Google Tag Manager'ı Özel Pikselinizden gelen etkinlikleri kabul edecek şekilde yapılandırın.
- İsteğe bağlı:
checkout.liquiddosyanızda mevcutdataLayer.push(event) çağrıları varsa bunları analytics.publish() ile değiştirin.
Müşteri etkinliklerine abone olma ve GTM'nin dataLayer'ına gönderme
Özel piksel kodunuzdaki GTM dataLayer'ını kullanarak müşteri etkinliklerine abone olabilirsiniz.
Varsayılan olarak, abone olabileceğiniz bir dizi standart etkinlik mevcuttur. Ancak standart etkinlikler kapsamında olmayan müşteri etkinliklerini izlemek isterseniz Liquid şablonu dosyalarından kendi özel etkinliklerinizi yayınlayabilirsiniz.
Aşağıda, birisi bir ürünü görüntülediğinde tetiklenen standart "product_viewed" etkinliğine abone olma örneği verilmiştir. Etkinlik tetiklendiğinde, etkinliği dataLayer'a gönderir.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});Bu örnekte ürün başlığı, etkinlik yüküyle birlikte geçirilir. Dilediğiniz etikette etkinlik yükünden ürün başlığını yakalamak için bir Google Tag Manager değişkeni kullanabilirsiniz.
Örnek Google Tag Manager özel pikseli
Aşağıdaki örnek, Google Tag Manager'a nasıl veri gönderileceğini gösteren, bir Google Tag Manager özel pikselinin basitleştirilmiş bir sürümüdür. dataLayer'ınıza daha fazla etkinlik göndermek için daha fazla standart ve özel etkinliğe abone olabilirsiniz.
// 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 Tag Manager'ı Özel Pikselinizden gelen etkinlikleri kabul edecek şekilde yapılandırma
Özel pikselinizi oluşturduktan sonra, Google Tag Manager'ı özel pikselinizden gelen etkinlikleri kabul edecek şekilde yapılandırmanız gerekir. Bunu yapmak için Google Tag Manager'da bir etikete, bir tetikleyiciye ve dataLayer değişkenlerine ihtiyacınız vardır.
Bazı standart müşteri etkinliklerinin ve bunların Google Tag Manager'daki eşdeğerlerinin örnekleri aşağıdaki tabloda listelenmiştir:
| 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 | Ödemeyi başlatma | begin_checkout |
| checkout_completed | Ödemeyi tamamlama | purchase |
| 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 bilgileri sayfasını görüntüleme | view_item |
| collection_viewed | Ürün listesini görüntüleme | view_item_list |
Özel piksel dataLayer etkinliklerinizin işlenmesi için GTM etiket etkinliği parametrelerinin beklenen adlandırma kurallarıyla eşleşmesi gerekir.
Bazı özel piksel dataLayer etkinliği özelliklerinin ve bunların eşdeğeri olan Google Analytics 4 (GA4) etkinliği parametrelerinin örnekleri aşağıdaki gibidir:
Özel piksel dataLayer etkinlikleri | GA4 etkinlik parametreleri |
|---|---|
| event.data?.checkout?.currencyCode | currency |
| 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ğıda, checkout_completed etkinliğini kullanan bir örnek yer almaktadır:
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 Tag Manager tetikleyicisi, etkinlik adı checkout_completed olan bir özel etkinlik türüdür. Tetikleyicideki Etkinlik adı alanı, özel pikselinizdeki event anahtarıyla eşleşmelidir.
orderId ve currency, etkinlikteki verileri yakalamak için Google Tag Manager'da kullandığınız değişkenlerdir. Bunlar, Google Tag Manager'daki bir dataLayer değişkeniyle eşlenebilir. Her etkinlik değişkeni, kendi dataLayer değişkenini gerektirir. Tetikleyiciyi, tüm özel etkinliklerde tetiklenecek şekilde ayarlayın.
Az önce oluşturduğunuz tetikleyiciyi kullanan bir etiket oluşturun. Etkinlik parametreleri altında, yakalamak istediğiniz değişkenleri ekleyin. Yukarıdaki örnekte orderId, currency, price, shippingLine ve totalTax, dataLayer değişkenleri olarak ayarlanır. Etiket her tetiklendiğinde, bu dataLayer değişkenlerini etkinlikle birlikte yakalar.
Veri aktarımının gerçekleşmesi için Google Tag Manager'da en az bir etiket ve tetikleyicinin ayarlanması gerektiğini unutmayın.
Eski dataLayer.push(event) çağrılarını analytics.publish() ile değiştirme
Daha önce Google Tag Manager'ı 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ınızda bulabilirsiniz.
Ayrıca checkout.liquid dosyasındaki dataLayer.push çağrılarını da değiştirmeniz gerekir. Ancak checkout.liquid, Shopify Extensions ile uyumlu olmadığından, verileri web piksellerine göndermek 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 kaydı etkinliğinin basitleştirilmiş bir örneği verilmiştir:
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>Verileri özel pikselinize gönderen Shopify eşdeğeri ise şu şekildedir:
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>Ardından, özel piksel kodunuza aşağıdaki gibi bir kod ekleyebilirsiniz:
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});Eski dataLayer.push(data) kullanımını değiştirme
Google Tag Manager'ın, her etkinlikte durum bilgisi olan bir dataLayer nesnesi göndermenizi sağlayan bir özelliği vardır. Shopify'ın piksel sanal alanı eşdeğer bir özellik içermese de kendi veri nesnenizi oluşturup bunu özel etkinliklere aktararak aynı sonucu elde edebilirsiniz.
Örneğin, özel etkinliklerinizi yayınlamadan önce bir "customData" nesnesi tanımlayın:
<script>
const customData = {email: customer.email}
</script>Ardından, özel verilerinizi eklemek istediğinizde bunu yayınlama yönteminize aktarın:
<script>
Shopify.analytics.publish('email_signup', customData);
</script>Google Analytics 4'ü ayarlamaya yönelik ipuçları
Google Tag Manager'ı özel bir piksel olarak kullanırken Google Analytics 4'ü (GA4) kurmak için aşağıdaki ipuçlarını göz önünde bulundurun.
Daha temiz sayfa URL'leri
GA4 bir sanal alanda çalışırken, sayfa URL'lerinin, çalıştığı sanal alanla ilgili bilgiler içerdiğini fark edebilirsiniz. Sanal alan bilgilerini bu URL'lerden kaldırmak isterseniz GA4'ün otomatik sayfa takibini kapatabilir ve bunun yerine standart page_viewed etkinliğini kullanarak kendi 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 üzerinde 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ü kullanabilir ve Etkinlik Adı'nı page_view olarak ayarlayabilirsiniz. Etiket türünü ve etkinlik adını ayarladıktan sonra page_location için bir parametre eklemeli ve değeri, özel pikselinizden dataLayer'a aktardığınız değerin aynısı olarak ayarlamalısınız.
Gelişmiş ölçüm
GA4, Shopify'ın piksel sanal alanı içinde yüklenirken normalde otomatik olarak algılanan bazı etkinliklerin manuel olarak ayarlanması gerekir. Örneğin, GA4'ün Gelişmiş ölçüm ayarının bir parçası olan giden bağlantı tıklamaları, özel pikseller kullanılırken güvenlik nedeniyle otomatik olarak tetiklenemez. Ancak, GA4'ün gelişmiş ölçüm etkinliklerini özel etkinlikler olarak kendiniz uygulamanız mümkündür.
Aşağıda verilen kod, giden bağlantı tıklamalarını izlemenin basitleştirilmiş bir örneğini içerir:
<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ıyla eşleşmesi için etkinlik adının click olduğundan emin olun ve bağlantı tıklamasını GA4'e gönderen bir GA4 etiketi oluşturun.
Google'ın gelişmiş ölçüm metriklerinden herhangi biri için aynı takibi sağlayabilirsiniz.
Özel pikselinizi test etme ve hata ayıklama
GTM özel pikselinizi test etmeye hazır olduğunuzda, takip etmek istediğiniz tüm etkinliklerin sandbox'a hatasız olarak eklendiğinden emin olmak için Shopify Piksel Yardımcısı'nı kullanın.
Sayfada hangi Google etiketlerinin yüklendiğini test etmek için Google Etiket Yardımcısı sayfa uzantısını da kullanabilirsiniz. Ancak Google Etiket Yardımcısı'nın Etiketteki hatayı giderme özelliği özel piksellerle uyumlu değildir ve özel bir pikseldeki Google etiketlerini ya da GTM tarafından yüklenen diğer pikselleri algılamaz.