Bir Chrome Uzantısı oluşturdunuz ve şimdi kullanıcıların onunla nasıl etkileşime girdiğini öğrenmek için can mı atıyorsunuz? Belki de hangi özelliklerin kullanıldığını (kullanılmadığını) görmek istiyorsunuz ya da belki de sadece insanların gerçekten kullanıp kullanmadığını bilmekle ilgileniyorsunuz.
Bu makalede, Google Tag Manager’ı Chrome Extension’ın kısıtlı sanal alanında çalışacak şekilde nasıl yapılandıracağınızı göstereceğiz. Bazı ince ayarlar yapmanız gerekecek ve bu işlemler mükemmel bir şekilde yapılabilir.
Google Tag Manager’ın bir Chrome Uzantısında Çalışması Nasıl Sağlanır?
Bu çözüm, uzantınızın bir açılır sayfaya sahip olmasını gerektirir. Başka bir deyişle, uzantının, etkinleştirdiğinizde tarayıcının işlediği gerçek HTML’ye sahip olması gerekir.
- GTM konteynerini dağıtın
Yapmanız gereken ilk şey yeni bir JavaScript dosyası oluşturmaktır. Bunu herhangi bir metin editörü ile yapabilirsiniz. Dosyanın içine aşağıdaki kodu ekleyin:
(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-XXXXX’);
Bunu muhtemelen normal Google Tag Manager kapsayıcı parçacığının JavaScript kısmı olarak tanıyorsunuzdur.
Kapsayıcı kütüphanesini yüklemek için ayrı bir JavaScript dosyası kullanıyoruz, çünkü Chrome Uzantılarında satır içi JavaScript kullanımı kesinlikle önerilmez (aslında neredeyse evrensel olarak).
Bu betikte değiştirmeniz gereken iki şey var.
İlk olarak, gtm.js kütüphanesini HTTPS protokolünü kullanarak açıkça yüklemeniz gerekir. Bu değişikliği j.src=’https://www.googletagmanager…’‘ olan satırda görebilirsiniz. Dolayısıyla, yapmanız gereken ilk şey, snippet’in kullandığı varsayılan göreli protokol yerine https: protokolünü doğru yere açıkça yazdığınızdan emin olmaktır.
Yapmanız gereken ikinci şey ise GTM-XXXXX‘i kullanacağınız konteyner ile eşleşecek şekilde değiştirmektir. Normal GTM işleri. İşiniz bittiğinde dosyayı gtm.js olarak kaydedin ve uzantı klasöründe saklayın.
- Dosyayı açılır HTML’nize yükleyin
Ardından, açılır pencerenizin yüklendiği HTML dosyasını açın. Az önce oluşturduğunuz gtm.js dosyasını referans olarak ekleyin ve <head> içine yerleştirin. Neden mi? Çünkü asenkron kütüphaneleri <head> dışında başka bir yere yüklemek mantıklı değildir, özellikle de Search Console doğrulaması gibi şeyler hakkında endişelenmenize gerek olmadığından.
<head>
…
<script type=“text/javascript” src=“popup.js”></script>
<script type=“text/javascript” src=“gtm.js”></script>
</head>
<body>
<noscript>
<iframe src=“//www.googletagmanager.com/ns.html?id=GTM-W92WQQ” height=“0” width=“0” style=“display:none;visibility:hidden”></iframe>
</noscript>
…
Gerçekten isterseniz, JavaScript kullanmayan kullanıcılar için GTM’yi yükleyen <noscript> bloğunu tutabilirsiniz, ancak yine de insanlar Chrome Uzantınızı kullanırken bazı pikselleri ateşlemek isteyeceğiniz bir kullanım durumu bulmakta zorlanıyoruz. İşaretlemedeki bu değişiklik basitçe gtm.js dosyasındaki JavaScript’i çalıştırır, yani bu HTML tarayıcı tarafından işlendiğinde Google Tag Manager kütüphanesi de uzantıya yüklenir.
- manifest.json dosyasını değiştirin
Ardından, uzantınızın manifest.json dosyasına bir İçerik Güvenliği Politikası eklemeniz gerekir. Temel olarak, uzantıya belirli uç noktalara yapılan isteklerin tamam olduğunu ve bu istekler gerçekleştiğinde uzantının panik yapmasına gerek olmadığını söylüyorsunuz. Bir Chrome Uzantısı her türlü kötü şeyi yapma potansiyeline sahiptir, bu nedenle bu düzeyde bir ek güvenlik kesinlikle gereklidir.
CSP’de Chrome’a https://www.google-analytics.com ve https://www.googletagmanager.com adreslerine yapılan isteklere izin verilmesi gerektiğini söylemeniz gerekir. Diğer uç noktalara herhangi bir Etiket gönderiyorsanız, onların ana bilgisayar adlarını da burada listelemeniz gerekir. Tüm iletişimlerin HTTPS üzerinden gerçekleşmesi gerektiğini unutmayın, aksi takdirde uzantınız tarayıcınıza yüklemeye çalıştığınızda bir hata bildirecektir.
{
“manifest_version”: 2,
“name”: “…”,
“version”: “…”,
“content_security_policy”: “script-src ‘self’ https://www.google-analytics.com https://www.googletagmanager.com; object-src ‘self'”,
“description”: “…”,
…
}
- GTM Etiketlerinizi Değiştirin
Son olarak, Google Tag Manager Etiketlerinizde bazı gerekli değişiklikleri yapmanız gerekecektir.
Konteynerde ateşlenen her Google Analytics Etiketi için aşağıdaki değişikliği yapmanız gerekir.
Ayarlanacak Alanlar’acheckProtocolTask : false ekleyin
Alan Adı: checkProtocolTask
Değer: false
Normalde Google Analytics, GA’ya yapılan talebin HTTP veya HTTPS’den kaynaklanmasını gerektirir. Eğer talepler başka bir yerden geliyorsa, işlem iptal edilir. checkProtocolTask adlı görevi false olarak ayarlayarak, uzantı özel chrome-extension:// protokolünü kullandığından bu kontrolün gerçekleşmesini önleyebiliriz.
Ardından, Sayfa Görünümü Etiketlerinizde (Page View Tags) aşağıdaki değişikliği yapın.
Ayarlanacak Alanlar’a gidin ve yeni bir alan ekleyin:
Alan Adı: sayfa
Değer: /some-custom-page-path/
Uzantı sayfası uygun bir URL’ye sahip olmadığından (en azından tipik anlamda), GA sayfa yolu için Belge Konumu parametresinin şifresini çözemez. Sayfa yolu, tüm Google Analytics isteklerinde gerekli bir boyuttur, bu nedenle bunu ateşleyen her Etikete manuel olarak eklemeniz gerekir.
İzlemenin çalışması için bu iki değişikliğin yerinde olması gerekir. Google Analytics olmayan Etiketleri Chrome Uzantılarında etkinleştirmek için benzer (veya ek) değişiklikler yapmanız gerekebilir.
Ve işte bu kadar!
Özet
Umarız bu rehber size yardımcı olmuştur! Chrome Uzantılarının uyguladığı güvenliğin tüm kapsamını anlamak göz korkutucu olabilir, bu nedenle belki de bu, böylesine korumalı bir ortamda çalışmanın bazı özelliklerini aydınlatır.
Bu adımları izleyerek, Google Analytics’te kullanıcıların uzantınızla nasıl etkileşimde bulunduğuna dair veri toplayabilmeniz gerekir. Ancak HTML’nin yalnızca açılır pencere tıklandığında işlendiğini ve kullanıcı açılır pencereyi her tıkladığında yeni bir sayfa görüntüleme gönderildiğini unutmayın. Yani aslında sayfa görüntülemelerini uzantı açılma oranları için oldukça güvenilir bir vekil olarak kullanabilirsiniz!
İlk yorum yapan siz olun