Google TAG Manager İle Tıklama Takibi

Herkese merhaba, ilk bölümde kullanıcı davranışlarının neden ölçümlemelisiniz ve ölçümlerken Google Analytics’e bu verileri nasıl göndereceğinize dair bilgiler paylaşmıştım. Bu bölümü okumaya başlamadan önce lütfen önce diğer yazıyı okuyun. Çünkü orada fazlaca detay ve teknik bilgi paylaşmıştım. Buradan Kullanıcı Davranışlarını Ölçümleme yazsına ulaşabilirsiniz. Diğer yazıyı okuyarak buraya geldiyseniz hadi devam edelim..

Son olarak yazımıda bir kod paylaşımı yapmıştık. Yaptığımız kodu yazılımcıya ihtiyaç duymadan web sitemize ekleme ve sonrasında da bu kodun çalışır hale gelmesi işlemini yapacağız. Bunu yaparken Google’ın bize sunduğu ücretsiz araçlardan biri olan TAG Manager’ı kullanacağız. Eğer TAG Manager sitenizde ekli değilse o zaman yazılımcınıza ekletmenizi ya da eklemek için TAG MANAGER yönergelerini kullanmanızı tavsiye ederim.

Tag Manager’a ulaşmak için bu linkten erişim sağlayabilirsiniz. Google Tag Manager açıldığında kaşınıza genel bir giriş ekranı gelecek. Biz Tag Manager üzerinden bir etiket ekleyerek bu kod işlemini yapacağız. Bu nedenle sırasıyla aşağıdaki işlemleri yaparak başlıyoruz.

Tag Manager Etiket Ekleme Nasıl Yapılır

• Tag Manager ana ekranda yukarıdaki gibi bir karşılama ile başlayacaksınız.
• Sol taraftaki menüden Etiketler menüsüne tıklıyoruz.
• Etiketler ekranı açıldıktan sonra SAĞ üst tarafta büyüteç işaretinin sağ tarafında YENİ butonunu göreceksiniz.
• Yeni Butonuna tıklıyoruz!
• Yeni butonuna tıkladıktan sonra sağdan kayarak yeni bir ekran gelecek karşınıza.
• Bu ekranda sol üstte Adsız Etiket yazısını – “Urun Detay Sayfası Kullanıcı Takibi” şeklinde değiştiriyorum. Siz isterseniz başka bir isim verebilirsiniz.
• Bir altta bulunan Etiket Yapılandırması bölümünün sağ üst köşesinde bir kalem işareti görüyoruz. Buraya tıklayarak bu alanı düzenlemeye başlıyoruz.

• Etiket yapılandırması menüsünden edit tuşuna bastığınızda “Etiket Türü” seçim ekranı yine bir önceki ekran gibi sağdan açılarak karşınıza gelecek.
• Bu ekranda bir liste şeklinde bir çok etiket türü göreceksiniz. Bu etiket türlerinden aşağıya doğru scroll yaparsanız Özel Türlerin altında “Özel HTML” etiket türünü göreceksiniz. Bu etiket türüne tıklayarak türümüzü seçmiş oluyoruz. HTML etiket türü seçmemizin temel sebebi bir <script> tag’i kullanacak olmamız.

• Özel HTML alanı artık etiket yapılandırması bölümüne eklendi.
• Böylece bomboş bir html alanı karşınıza gelmiş olacak.
• Şimdi bu alanın içine bir önceki yazımızda oluşturduğumuz Java Script kodunu ekleyeceğiz.
• Ekleme işleminden önce ilk yapmamız gereken HTML bir alanda olduğumuz için bu alana kodumuzun bir Script olduğunu anlatmamız gerekecek. Bunu yapmak için <script> Buraya Kodumuz Gelecek </script> etiketlerini bu alana ekliyoruz.
• Script tag lerini ekledikten sonra kodun geleceği alana yaptığımız kodu ekliyoruz ve aşağıdaki gibi bir görüntü ile karşılaşmış olacağız.

Yukarıdaki işlemleri eksiksiz bir şekilde yaptığınızda kodun yazılması ve yayına hazır hale getirilmesi için gerekli işlemleri tamamlamış olacaksınız. Tag Manager böylece bir html alanı içinde çalışacak şekilde bir Script alanını oluşturmuş oldu. Şimdi kodumuzun hangi sayfada çalışacağını ve bu sayfaya tipine gelindiğinde sayfadaki kodun çalışmasını isteyeceğimizi Google Tag Manager‘a söylememiz ve kodumuzu bu şekilde Kaydetmemiz gerekecek. Bunun için aşağıdaki işlemleri yapmaya başlıyoruz.

Özel HTML Etiketi Oluşturma

• Kodunuzu ekledikten sonra Etiket Yapılandırması alanının hemen altındaki Tetikleyici alanına geçiş yapıyoruz.
• Bu alanında hemen sağ üst köşesinde bir düzenleme butonu göreceksiniz. Bu butona tıklıyoruz. Bundan sonrasına dikkat etmenizi rica edeceğim. Çünkü burası biraz menü tipi nedeni ile karışabilir.
• Tetikleme seçebileceğiniz bir menü sağdan karşınıza gelecek. Burada sistem üzerinde standart seçimler göreceksiniz. Bu seçimlerden hiç biri işinize yaramayacak çünkü hiç biri ürün detay sayfanızı içermiyor. Bu nedenle önce bu sayfayı buraya tanımlamamız gerecek. Bu nedenle aşağıdaki ekran görüntüsünde olduğu gibi sağdaki “+” artı işaretine basıyoruz.

Tetikleyici Yapılandırması

• Bu işlemi yaptığınızda sağdan yine bir menü gelecek ve sizden Adsız Tetikleyici şeklinde bir tetikleyici oluşturma yani bu ekleyeceğimiz kod NE OLURSA sitede çalışacağını söyleyeceğiniz işlemi yaptığınız yeri tanımlamanızı isteyecek.
• Sol Üstteki “Adsız Tetikleyici” ismini “Ürün Detay Sayfası” olarak değiştiriyorum. Böylece daha sonra bu tetikleyiciyi başka yerlerde de Ürün Detay sayfasında kullanmak için listemde görebilirim.
• Ardından ortada bulunan Tetikleyici Yapılandırması bölümünün üzerine geliyorum ve sağ üstte bulunan düzenleme tuşuna basıyorum.

• Sağ taraftan yeni bir menü daha gelmiş olması lazım. Aşağıdaki ekran görüntüsünde bunu görebilirsiniz.
• Bu menümüzün ismi Tetikleyici Türü Seçin olması gerekiyor.
• Bu listeden hemen “Sayfa Görüntüleme” menüsüne tıklıyor ve tetikleyici yapılandırma bölümüne ekliyoruz.

Sayfa Görüntüleme Tanımlama

• Buradan sonra artık işimiz kolaylaştı sayılır.
• Tetikleyici Yapılandırması bölümünün içine Tetikleyici Türü olarak Sayfa Görüntüleme aşağıdaki ekran görüntüsünde olduğu gibi eklendi.
• Şimdi burada Sayfa Görüntüleme üzerine tıklıyoruz ve hangi sayfa görüntülendiğinde buranın Ürün Detay Sayfası olacağının belirlenmesi için işlemleri yapıyoruz.
• Burada spesifik olarak ürün detay sayfanızın URL yapısındaki bir alanı dikkate alacağız. Böyleyece bu URL de belirli bir alan varsa Google Tag Manager burayı Ürün Detay Sayfası olarak anlayacak.
• Bunun için Sayfa Görüntüleme tıkladıktan sonra hemen altında bulunan Tüm Sayfa Görüntülemeler değilde hemen sağında bulunana “Bazı Sayfa Görüntülemeler” butonuna basıyoruz ve altında bir filtreleme alanı çıkıyor.

• filtreleme alanının içindeki birinci kutucuk içine PAGE URL olacak şekilde seçiyoruz.
• İkinci kutucuk içindeki alan “şunu içerir:” şeklinde olacak.
• üçüncü kutucuğa ise bu tetikleyici hangi URL görüldüğünde çalışacaksa buraya benzersiz olacak içeriği yazıyoruz. Benim web sitemde ürün detay sayfalarının tamamında URL içeriği aşağıdaki ekran görüntüsünde gösterdiğim gibi https://www.siteadi.com/araclar/aracınismi şeklinde tanımlanmış durumda. Yani burada URL içinde /araclar/ kısmı benzersiz bir URL ekidir. bu kısım URL tanımı içinde varsa ben buranın ürün detay sayfası olduğunu anlıyorum.
• Filtre alanının içine /araclar/ şekinde ekliyorum ve böylece bu kod sadece URL de /araclar/ gördüğünde çalışacak şekilde tanımlanmış oluyor.
• Sol üst taraftaki KAYDET butonuna basarak bu düzenlemeyi kaydediyoruz.

Not : Burada benzersiz URL yapılandırması yerine farklı seçenekleri kullanabilirsiniz. Bu konuda yardım isterseniz yorumlar bölümüne yazarak benden destek alabilirsiniz.

Tag Manager Etiket Kaydetme ve Yayınlama

Kaydetme işlemini yaptığımıza göre artık Tetikleyici Ekranında yazdığımız kod sayfasına geri dönmüş olmanız ve aşağıdaki gibi bir ekran ile karşılaşmış olmanız gerekiyor. Bu adıma kadar her şeyi düzgün bir şekilde yaptıysanız artık işleminiz tamamlandı ve Etiket içine HTML kod eklemiş Script tanımlamış ve tanımladığınız Script’in hangi sayfada çalışacağını da belirlemiş oldunuz. Aşağıdaki sayfayı artık kaydederek etiketi oluşturma işlemini KAYDEDEBİLİRSİNİZ

Kaydetme işlemini tamamladıktan sonra etiketiniz kayıt edilir ve sistem sizi Etiketler menüsünün ana ekranına gönderir. Bu işlem henüz web sitenize gönderilmedi. Bunun gönderilmesi ve aktif olarak çalışmaya başlaması için sol üst tarafta bulunan GÖNDER tuşuna basmanız gerekiyor. Böylece yaptığınız işlemler Google Tag Manager’dan web sitenizde çalışan kod yapısına aktarılmaya başlamış olacak.

Gönder tuşuna bastıktan sonra sağda açılan menüden YAYINLA butonuna basabilirsiniz. Buradan sonraki menülerde bir şey yazmanıza eklemenize gerek yok. Buradaki çıkan ekranlara hiç bir şey yazmadan devam edin. Bu alanlar yaptığınız değişiklerin ne olduğunu sonradan hatırlamanız için gerekli olan alanlar. En son olarak açıklan Pop-Up ekranda sağ alt köşedeki Devam Et butonuna tıklıyoruz ve sürüm yayınlanmak için hazırlanırken size “Kimse dinlemiyormuşcasına şarkı söyleyin.” şeklinde bir yönlendirme görüyoruz.

Bu yazımda bir önceki yazıda hazırladığımız kodun Google Tag Manager ile nasıl web sitenize ekleneceğini ADIM ADIM size anlatmaya çalıştım. Umarım faydalı bir anlatım olmuştur. Yorumlarınız veya sorularınız olursa yorumlar bölümünden bana iletebilirsiniz.

Üçüncü Bölüm Google Analytics ile Event entegrasyonu kontrolü ve raporlanmasını anlatacağım. Devamı geliyor……