İçeriğe geçmek için "Enter"a basın

GTM V2’de Google Analytics’e Hava Durumu Verilerini Gönderme

OpenWeatherMap’in SSL planını oldukça pahalı bir seviyeye yükseltmesi nedeniyle bu makaleyi Weather Unlocked API ile çalışacak şekilde güncelledik. Weather Unlocked’ın bir API anahtarının kullanılmasını gerektirdiğini ve API anahtarını istemci tarafında geçirmenin riskli olduğunu, API planınızı kötüye kullanıma açtığını unutmayın. Bu hava durumu analizini ciddiye almak isteyenler için, hava durumu verilerinin sayfanın kendisi oluşturulmadan önce sorgulandığı ve verilerin sayfanın dataLayer‘ına yazıldığı %100 sunucu taraflı bir çözüme geçmelerini gerçekten tavsiye ederim.

Ne İşe Yarar

Çözümün arkasındaki fikir, bir hava durumu hizmetini yoklamaktır; böylece Google Analytics’teki tüm oturumlara, oturum sırasında hava koşullarının nasıl olduğuna dair bilgiler eklenecektir. Cevaplamaya çalıştığımız temel soru şudur: “Hava durumu, insanların web sitenizle veya markanızla etkileşiminde bir rol oynuyor mu?”. Bu, golf sahaları ve kayak pistleri gibi hava koşullarına çok bağımlı işletmeler için çok uygun bir soru olabilir.

Teknik yöntem üç bölüme ayrılır:

  • Coğrafi konum – ziyaretçinin gezindiği coğrafi alanın yaklaşık bir tahminini almamız gerekiyor.
  • Hava Durumu API’si – ziyaretçinin bölgesindeki hava koşullarını sorgulamak için bu coğrafi konum verilerini kullanacağız.
  • Veri Katmanı – son olarak, elde ettiğimiz tüm bilgileri Etiketlerimiz için kullanılabilir olması için dataLayer nesnesinde saklayacağız.

Bu en basit süreç değildir ve bunu optimize etmenin birçok yolu vardır (bunları ilgili bölümlerde açıklayacağız). Ayrıca, bu kılavuzu yazmamın ana nedenlerinden biri de yapmak isteyebileceğiniz herhangi bir genel API çağrısı için bir prototip göstermektir. Yani sadece hava durumu değil, hisse fiyatı, trafik detayları, basketbol sonuçları vb. Bunun için bir API varsa, ziyaretçilerinizin oturumlarını yeni Özel Boyutlar ve Metriklerle zenginleştirmek için bu yöntemi kullanabilirsiniz.

Çözümün kendisi, çılgın PowerPoint ile görselleştirdiğimiz aşağıdaki akışı takip ediyor:

akış şeması
GTM V2’de Google Analytics’e Hava Durumu Verilerini Gönderme

Bu oldukça basit bir süreçtir ve yalnızca iki bağlantı noktası vardır: oturum çerezi durumu ve API çağrısının başarısı/başarısızlığı.

Temel Gereksinimler

Çözümü nasıl yaparsanız yapın, bazı temel bileşenlere ihtiyacınız olacaktır. Bunlar

  1. geoPlugin API anahtarı ve Weather Unlocked API kimlik bilgileri
  2. API’yi yoklamak ve bilgileri dataLayer’da saklamak için özel HTML Etiketi
  3. Veriler dataLayer’dayken bir Event Etiketini ateşlemek için tetikleyici DataLayer’daki bilgileri Event Etiketine çekmek için Veri Katmanı Değişkenleri
  4. Oturum durumunu korumak için 1. Taraf Çerez Değişkeni
  5. Etiketten API verilerini almak için Google Analytics’te ayarlanan Oturum Kapsamlı Özel Boyutlar
  6. Verileri Google Analytics’e göndermek için Universal Analytics Event Etiketi

Özel HTML Etiketini daha sonra oluşturacağız, çünkü diğer temel gerekliliklerden biraz daha fazla çalışma ve düşünme gerektiriyor.

Trigger (Tetikleyici)

Tetikleyici basittir. Bu yalnızca ‘weatherDone’ değerine sahip bir ‘olay’ anahtarı dataLayer’a gönderildiğinde tetiklenen bir Özel Olay Tetikleyicisidir. Event – weatherDone gibi açıklayıcı bir ad verin .

trigger(tetikleyici)
Tigger (Tetikleyici)

Tetikleyicinin yukarıdaki ekran görüntüsündeki gibi göründüğünden emin olun.

Veri Katmanı Değişkenleri

Bu çözümde iki Veri Katmanı Değişkeni kullanacağız. Biri hava koşullarının basitleştirilmiş bir tanımını içerir (örn. “Bulutlu”, “Yağmur”, “Fırtına”) ve diğeri de yine basitleştirilmiş sıcaklığı depolamak içindir (örn. “5°C – 15°C”).

Bu nedenle, biri Değişken Adı hava durumu ve diğeri Değişken Adı sıcaklık için olmak üzere iki Veri Katmanı Değişkeni oluşturun .

veri katmanı değişkenleri
Veri Katmanı Değişkenleri 1

Yukarıdaki Değişken DLV-hava durumu olarak adlandırılmıştır .

veri katmanı değişkenleri 2
Veri Katmanı Değişkenleri 2

İkinci Değişkene DLV-sıcaklık gibi bir ad verin . Bu benim kullandığım adlandırma kuralıdır (DLV elbette Veri Katmanı Değişkeni anlamına gelir), ancak bunları istediğiniz gibi adlandırabilirsiniz.

Komut dosyası tarafından yazılan ve sayfa her yüklendiğinde yenilenen özel bir çerez kullanarak oturum durumunu yapay olarak koruyacağız. Durumu bu şekilde sürdürmek istememizin nedeni, hava durumu verilerini oturum başına yalnızca bir kez göndermek istememizdir .

Hava durumu hizmetine yapılan API çağrısı hafif değildir. Mümkün olduğu kadar bu tür çağrılar yapmaktan kaçınmak istiyoruz, çünkü bu şekilde sayfa yükleme süreci bunun gibi eşzamansız API çağrılarının yavaş yüklenmesi nedeniyle engellenmeyecektir. Böylece ziyaretçi siteye ilk girdiğinde, 30 dakikalık bir geçerlilik süresi ile GA’nın oturum mantığını taklit eden bir çerez oluşturulur. Doğal olarak bu, oturum mantığının tamamı değildir (yönlendirme hariç tutma, alanlar arası izleme vb. gibi şeyleri kaçırıyoruz), ancak bizi gereksiz çağrılar yapmaktan kurtaracak kadar yakındır.

Çerez komut dosyası, bu makalenin ilerleyen kısımlarında tanıtılan gerçek API komut dosyasında yer alır, ancak oluşturmanız gereken Değişken şu şekilde görünmelidir:

taraf çerez değişkeni
Taraf Çerez Değişkeni

Oturum Kapsamlı Özel Boyutlar

Ekstra veri olarak göndermek istediğimiz iki ölçümümüz olduğundan, bunları depolamak için iki Özel Boyuta ihtiyacımız olacak. Şimdi merak edebilirsiniz: “Neden sıcaklık için Özel Ölçümler kullanmıyoruz? Sonuçta sayısal?” diye sorabilirsiniz. Bu iyi bir soru ve nedeni de henüz Özel Metrikler üzerinde hesaplama yapamıyor olmanız. Dolayısıyla, göndereceğiniz tüm sıcaklık verileri raporlarınızda kümülatif olarak yer alacaktır. “Helsinki’den gelen ziyaretleri dönüştürmek için tüm sıcaklıkların toplamı neydi?” diye sormak mantıklı değil, ancak “Helsinki’den gelen ziyaretleri dönüştürmek için tüm sıcaklıkların ortalaması neydi?” diye sormak çok mantıklı. İkincisi maalesef henüz Google Analytics’te mevcut değil.

Her neyse, iki oturum kapsamlı Özel Boyut oluşturun ve bunları boyut listelerinizde gezinirken bulabileceğiniz şekilde adlandırın. Ben basitçe “Hava Durumu” ve “Sıcaklık” kullandım.

özel boyutlar
Oturum Kapsamlı Özel Boyutar

Her iki yeni boyut için boyut indeks numarasını not etmek önemlidir. Event Etiketimiz için bu bilgiye ihtiyacımız olacak.

Evrensel Analitik Etkinlik Etiketi

Event Etiketinin iki “özelleştirmesi” vardır. Öncelikle, bu isabeti etkileşimsiz bir olay olarak gönderiyoruz. Bu, oturumun hemen çıkma oranını etkilemeyeceği anlamına gelir. Bunun nedeni, hava durumu verilerinin bir ziyaretçi eyleminden kaynaklanan bir şey olmamasıdır. Sadece oturumla ilgili meta bilgilerdir, bu nedenle etkileşimli değildir.

Bu Olay Etiketini ateşlemek için 2.1. adımda oluşturduğunuz Tetikleyiciyi (trigger) kullanın.

O zaman neden bir Sayfa Görünümü Etiketi kullanmıyorsunuz? Bir başka harika soru. Özel HTML Etiketi içinde yapacağımız API çağrılarının tamamlanması zaman alır, çünkü bunlar eşzamansız olarak yürütülür. Bu, verilerin gerçekten gönderildiği sayfa yükleme sırasındaki anı tam olarak belirleyemeyeceğimiz, ancak API çağrısı ne kadar sürerse o kadar erteleneceğini bileceğimiz anlamına gelir. Çağrının tamamlanması uzun sürerse, Sayfa Görünümü Etiketimizin ateşlenmesini geciktirecektir. Hayır, Sayfa Görünümleri, oturum tabanlı isabet toplamanın çok önemli bir parçasıdır ve bunları kaçırmak bir seçenek değildir.

Etkileşim dışı bir olay kullanmanın hiçbir dezavantajı yoktur.

Her neyse, burada kullandığım Etiket aşağıdaki olay parametrelerine sahiptir:

Event Kategorisi – Hava Durumu

Etkinlik Eylemi – {{DLV – weather}}

Event Etiketi – {{DLV – sıcaklık}}

Etkileşimsizlik – Doğru

olay etiketi
Evrensel Analitik Etkinlik Etiketi 1

Ardından, Diğer Ayarlar’a gidin ve Özel Boyutlar’ı genişletin. Burada, verilerin GA arayüzünden geçmesini açlıkla bekleyen iki boyutu barındırmak için iki yeni Özel Boyut satırı eklemeniz gerekecektir.

Bu noktada, Google Analytics Admin’den boyut dizin numaralarını hatırlamanız veya aramanız gerekecektir. Benim örneğimde, bunlar sadece 1 (Sıcaklık için) ve 2 (Hava Durumu için), ancak gerekirse ayarlamayı unutmayın.

özel boyutlar gtm
Evrensel Analitik Etkinlik Etiketi 2

Yukarıdaki resimde olduğu gibi, ilgili Veri Katmanı Değişkenlerini değer alanlarına ekleyin.

Temel gereksinimler bu kadar.Bir sonraki kısım oldukça karmaşıktır.

Komut Dosyası Oluşturma

Baştan hatırlarsanız, bu teknik çözüm üç bölüme ayrılıyor: coğrafi konum, hava durumu sorgusu ve bilgilerin dataLayer ‘da saklanması.

Başlamak için Tüm Sayfalar Tetikleyicisini kullanan bir Özel HTML Etiketine ihtiyacınız olacak. Buna açıklayıcı bir isim verin. Ben Utility – HTML – Weather Query kullandım, ancak yine de kendi adlandırma kuralınızı kullanmakta özgürsünüz.

Bu kod HTTPS korumalı sitelerle çalışmak üzere yeniden yazılmıştır. Eğer siteniz HTTPS kullanmıyorsa, bunların çoğu gereksiz ve pahalı olacaktır, ancak sitenizin güvenliğini mümkün olan en kısa sürede yükseltmenizi tavsiye ederiz.

İçindeki kod, tüm JavaScript ihtişamıyla şudur:

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<script>

  (function() {

    var fetchWeatherData = function(longitude, latitude) {

      // You need to sign up to Weather Unlocked for an account. Once you do,

      // you will find your APP ID and APP KEY in your account dashboard.

      var wuAppId = ‘paste_your_weather_unlocked_app_id_here’;

      var wuAppKey = ‘paste_your_weather_unlocked_app_key_here’;

      jQuery.getJSON(‘https://api.weatherunlocked.com/api/current/’ + latitude + ‘,’ + longitude + ‘?app_id=’ + wuAppId + ‘&app_key=’ + wuAppKey)

        .done(function(data) { 

          window.dataLayer.push({

            event: ‘weatherDone’,

            weather: data.wx_desc,

            temperature: data.temp_c

          });

        }).fail(function(jq, status, msg) {

          console.log(‘Weather request failed: ‘ + status + ‘ – ‘ + msg);

        });

    };     

    var geoLocateUser = function() {

      // This is your API key for GeoPlugin, which you can purchase at

      // http://www.geoplugin.com/premium#ssl_access_per_year

      var geoPluginAPIKey = ‘paste_your_api_key_here’;

      jQuery.getJSON(‘https://ssl.geoplugin.net/json.gp?k=’ + geoPluginAPIKey + ‘&jsoncallback=?’)

        .done(function(data) {

          fetchWeatherData(data.geoplugin_longitude, data.geoplugin_latitude);

        }).fail(function(jq, status, msg) {

          console.log(‘Geolocation failed: ‘ + status + ‘ – ‘ + msg);

        });

    };

    if (typeof {{Session alive}} === ‘undefined’) {

      geoLocateUser();

    }

// Reset “session” cookie with a 30-minute expiration

    var d = new Date();

    d.setTime(d.getTime()+1800000);

    var expires = “expires=”+d.toGMTString();

    document.cookie = “session=1; “+expires+“; path=/”;

  })();

</script>

Sonraki bölümlerde size burada neler döndüğünü anlatacağız.

JQuery’yi kodun en üstüne yüklediğimizi fark etmeniz önemli. Ayrıca, tüm değişkenleri fonksiyonun kapsamına almak ve böylece global isim alanını kirletmekten kaçınmak için tüm kodun kendisini hemen çağrılan bir fonksiyon ifadesine sardık.

Sitede jQuery’yi zaten yüklüyorsanız, bu Etikette tekrar yüklememeniz gerekir, ancak o zaman Özel HTML Etiketinin yalnızca jQuery tamamen yüklendikten sonra ateşlenmesini sağlamanız gerekir. Eğer jQuery’yi eşzamansız olarak yüklerseniz, jQuery’nin yüklendiğinden emin olabileceğiniz tek an bu olduğundan, Pencere Yüklendi Tetikleyicisi üzerine Özel HTML Etiketini ateşlemekten başka seçeneğiniz kalmaz.

Hata kaydı için, iki API’ye (geoPlugin ve Weather Unlocked) yapılan JSON isteklerinin .fail() geri çağrısını çağırıyoruz. Bir hata durumunda, mesaj basitçe konsola yazılır, ancak hatayı Google Analytics gibi başka bir yerde günlüğe kaydetmek için bir dataLayer.push() da çağırabilirsiniz.

Coğrafi Konum

Coğrafi konum belirlemenin birçok yolu vardır, ancak kullanılabilirlik açısından ben bunun için de bir API çağrısı kullanıyorum. Bu çözüm konusunda ciddiyseniz, kendi web sunucunuza bir coğrafi konum hizmeti yüklemek isteyebilirsiniz, böylece istemcide fazladan API çağrısı yapmanıza gerek kalmaz.

Coğrafi konum tek bir şeye bağlıdır: ziyaretçinin IP adresi. Ziyaretçinin isteklerinin HTTP başlıklarında açığa çıkan herkese açık bir bilgi olduğu için bu verileri elde etmenin birçok yolu vardır. Bu noktada, çözümün doğruluğunun ziyaretçinin ne tür proxy’ler veya VPN’ler kullanıyor olabileceğine bağlı olduğunu tahmin etmiş olabilirsiniz. Bu, üzerinde çalışamayacağımız bir şeydir ve bu nedenle coğrafi konum verilerini, herkese açık web’deki diğer veriler gibi, bir tuz tanesi ile almanız gerekecektir.

Coğrafi konum hizmetinden geri almamız gereken şey ziyaretçinin enlem ve boylamıdır. IP tabanlı coğrafi konum genellikle ziyaretçinin geldiği şehre kadar doğrudur, ancak çoğu durumda tüm bir eyalet veya hatta ülke gibi çok daha geniş bir spektrum olabilir. Yine de, alabildiğimizi alacağız.

Komut dosyasındaki yöntem, hem IP adresini almak hem de ziyaretin enlem ve boylamını almak için hepsi bir arada bir API kullanır. Hizmetin adı geoPlugin ve SSL planı oldukça ucuz.

var geoLocateUser = function() {

  // This is your API key for GeoPlugin, which you can purchase at

  // http://www.geoplugin.com/premium#ssl_access_per_year

  var geoPluginAPIKey = ‘paste_your_api_key_here’;

  jQuery.getJSON(‘https://ssl.geoplugin.net/json.gp?k=’ + geoPluginAPIKey + ‘&jsoncallback=?’)

    .done(function(data) {

      fetchWeatherData(data.geoplugin_longitude, data.geoplugin_latitude);

    }).fail(function(jq, status, msg) {

      console.log(‘Geolocation failed: ‘ + status + ‘ – ‘ + msg);

    });

};

Bu yöntemde, öncelikle API anahtarınızı geoPluginAPIKey değişkenine yazmanız gerekir. Bu API anahtarını geoPlugin’de çok ucuz bir plana abone olarak elde edeceksiniz. Daha sonra, kullanıcı için coğrafi konum verilerini almak için geoPlugin API’sinin JSONP uç noktasını kullanırız. Her şey jQuery’nin son derece kullanışlı getJSON() metoduna sarılmış durumda.

Eşzamansız istek, her şey yolunda giderse çağrılan done() geri çağrısı ile desteklenir. Bu geri çağrıda, enlem ve boylam bilgilerini zincirdeki bir sonraki fonksiyona aktarıyoruz: fetchWeatherData().

Bir hata durumunda, hata bilgisi tarayıcı konsoluna çıktı olarak verilir. 

API Çağrısı Oluşturma

 Şimdi coğrafi konumu belirledik. Yapmamız gereken bir sonraki şey, bu bilgiyi hava durumu verilerini yoklamak için kullanmak.

Ben bunun için Weather Unlocked hizmetini kullanıyorum. Oldukça cömert bir ücretsiz planı var ve hem SSL hem de SSL olmayan istekleri destekliyor.

apı çağrısı oluşturma
API Çağrısı Oluşturma

 fetchWeatherData() yönteminin kendisi şu şekildedir:

var fetchWeatherData = function(longitude, latitude) {

  // You need to sign up to Weather Unlocked for a free account. Once you do,

  // you will find your APP ID and APP KEY in your account dashboard.

  var wuAppId = ‘paste_your_weather_unlocked_app_id_here’;

  var wuAppKey = ‘paste_your_weather_unlocked_app_key_here’;

  jQuery.getJSON(‘https://api.weatherunlocked.com/api/current/’ + latitude + ‘,’ + longitude + ‘?app_id=’ + wuAppId + ‘&app_key=’ + wuAppKey)

    .done(function(data) { 

      window.dataLayer.push({

        event: ‘weatherDone’,

        weather: data.wx_desc,

        temperature: data.temp_c

      });

    }).fail(function(jq, status, msg) {

      console.log(‘Weather request failed: ‘ + status + ‘ – ‘ + msg);

    });

};

Coğrafi konum belirleme yöntemine oldukça benzer. Weather Unlocked API’sini sorgulamak için enlem ve boylam bilgilerini kullanırız. Bunun için APP ID’nize ve APP KEY’inize ihtiyacınız olacak!

Başarılı bir istek üzerine, yanıt mevcut hava durumunun açıklaması (data.wx_desc) ve mevcut sıcaklık (data.temp_c) için ayrıştırılır. Bunlar ilgili anahtarları altında dataLayer nesnesine eklenir.

Tüm Ajax çağrılarının jQuery kullanılarak yapıldığını unutmayın. Şimdi, jQuery gibi harici, şişirilmiş bir çerçeveye bağımlı olmanın faydaları ve tuzakları tartışılabilir, ancak jQuery Ajax isteklerini güzel bir şekilde ele alır. Burada başarmaya çalıştığımız şey için mükemmel, bu yüzden çerçeveyi kullanmayı umursamıyorum.

Ve hepsi bu kadar! Çözüm oldukça basit, zincirleme asenkron isteklere dayanıyor. Biri başarısız olursa, diğerleri yürütülmez, bu nedenle başarı oranınızın ne olduğunu bilmek istiyorsanız bazı hata işleme yöntemleri eklemek isteyebilirsiniz. Ancak oturum kapsamındaki Özel Boyutları kullandığımız için, tüm oturumlar arasında kaç oturumda hava durumu verisi olduğuna bakarak zaten bir başarı oranı elde edebilirsiniz.

Sadece bir şey kaldı.

Çerez İle Durumu Koruma

Yapbozun son parçası, etiketi oturum başına yalnızca bir kez ateşlemektir. Bunu, yalnızca özel bir 1. taraf çerezi ayarlanmamışsa tüm süreci başlatarak yapıyoruz. {{Session alive}} Çerez ayarlanmamışsa değişken tanımlanmamış olarak döner, böylece ilk adımı (coğrafi konum) yürütmeden önce bunu kontrol edebiliriz.

if (typeof {{Session alive}} === ‘undefined’) {

    …the geolocation call…

  }    

  // Reset “session” cookie with a 30-minute expiration

  var d = new Date();

  d.setTime(d.getTime()+1800000);

  var expires = “expires=”+d.toGMTString();

  document.cookie = “session=1; “+expires+“; path=/”;

Komut dosyasının sonunda, çerezin ayarlanıp ayarlanmadığına bakılmaksızın, çerezi yeni bir 30 dakikalık süre sonu ile oluştururuz / güncelleriz.

Ve işte bu kadar. Kolay, değil mi?

Önizleme modunda dikkatlice test etmeyi unutmayın. JavaScript konsolunda herhangi bir hata olup olmadığını kontrol edin, çerez mantığının çalıştığını test edin ve verilerin aktığını doğrulamak için Google Analytics’teki Gerçek Zamanlı raporları izleyin.

Özet

İşte Google Tag Manager V2 için hava durumu betiği. Weather Unlocked API’yi sorgulamak isteyebileceğiniz başka bir API uç noktası ile değiştirmekten çekinmeyin. API’yi incelemeniz, parametreleri değiştirmeniz ve verileri farklı şekilde ayrıştırmanız gerekecektir, ancak mantık aynıdır.

\n\n\n\nSonraki bölümlerde size burada neler döndüğünü anlatacağız.\n\nJQuery'yi kodun en üstüne yüklediğimizi fark etmeniz önemli. Ayrıca, tüm değişkenleri fonksiyonun kapsamına almak ve böylece global isim alanını kirletmekten kaçınmak için tüm kodun kendisini hemen çağrılan bir fonksiyon ifadesine sardık.\n\nSitede jQuery'yi zaten yüklüyorsanız, bu Etikette tekrar yüklememeniz gerekir, ancak o zaman Özel HTML Etiketinin yalnızca jQuery tamamen yüklendikten sonra ateşlenmesini sağlamanız gerekir. Eğer jQuery'yi eşzamansız olarak yüklerseniz, jQuery'nin yüklendiğinden emin olabileceğiniz tek an bu olduğundan, Pencere Yüklendi Tetikleyicisi üzerine Özel HTML Etiketini ateşlemekten başka seçeneğiniz kalmaz.\n\nHata kaydı için, iki API'ye (geoPlugin ve Weather Unlocked) yapılan JSON isteklerinin .fail() geri çağrısını çağırıyoruz. Bir hata durumunda, mesaj basitçe konsola yazılır, ancak hatayı Google Analytics gibi başka bir yerde günlüğe kaydetmek için bir dataLayer.push() da çağırabilirsiniz.\n"}},{"@type":"Question","name":"Komut Dosyası Oluşturma'da Coğrafi Konum Nasıl Belirlenir?","acceptedAnswer":{"@type":"Answer","text":"Coğrafi konum belirlemenin birçok yolu vardır, ancak kullanılabilirlik açısından ben bunun için de bir API çağrısı kullanıyorum. Bu çözüm konusunda ciddiyseniz, kendi web sunucunuza bir coğrafi konum hizmeti yüklemek isteyebilirsiniz, böylece istemcide fazladan API çağrısı yapmanıza gerek kalmaz.\n\nCoğrafi konum tek bir şeye bağlıdır: ziyaretçinin IP adresi. Ziyaretçinin isteklerinin HTTP başlıklarında açığa çıkan herkese açık bir bilgi olduğu için bu verileri elde etmenin birçok yolu vardır. Bu noktada, çözümün doğruluğunun ziyaretçinin ne tür proxy'ler veya VPN'ler kullanıyor olabileceğine bağlı olduğunu tahmin etmiş olabilirsiniz. Bu, üzerinde çalışamayacağımız bir şeydir ve bu nedenle coğrafi konum verilerini, herkese açık web'deki diğer veriler gibi, bir tuz tanesi ile almanız gerekecektir.\n\nCoğrafi konum hizmetinden geri almamız gereken şey ziyaretçinin enlem ve boylamıdır. IP tabanlı coğrafi konum genellikle ziyaretçinin geldiği şehre kadar doğrudur, ancak çoğu durumda tüm bir eyalet veya hatta ülke gibi çok daha geniş bir spektrum olabilir. Yine de, alabildiğimizi alacağız.\n\nKomut dosyasındaki yöntem, hem IP adresini almak hem de ziyaretin enlem ve boylamını almak için hepsi bir arada bir API kullanır. Hizmetin adı geoPlugin ve SSL planı oldukça ucuz.\n\nvar geoLocateUser = function() {\n\n  // This is your API key for GeoPlugin, which you can purchase at\n\n  // http://www.geoplugin.com/premium#ssl_access_per_year\n\n  var geoPluginAPIKey = 'paste_your_api_key_here';\n  jQuery.getJSON('https://ssl.geoplugin.net/json.gp?k=' + geoPluginAPIKey + '&jsoncallback=?')\n\n    .done(function(data) {\n\n      fetchWeatherData(data.geoplugin_longitude, data.geoplugin_latitude);\n\n    }).fail(function(jq, status, msg) {\n\n      console.log('Geolocation failed: ' + status + ' - ' + msg);\n\n    });\n\n};\n\nBu yöntemde, öncelikle API anahtarınızı geoPluginAPIKey değişkenine yazmanız gerekir. Bu API anahtarını geoPlugin'de çok ucuz bir plana abone olarak elde edeceksiniz. Daha sonra, kullanıcı için coğrafi konum verilerini almak için geoPlugin API'sinin JSONP uç noktasını kullanırız. Her şey jQuery'nin son derece kullanışlı getJSON() metoduna sarılmış durumda.\n\nEşzamansız istek, her şey yolunda giderse çağrılan done() geri çağrısı ile desteklenir. Bu geri çağrıda, enlem ve boylam bilgilerini zincirdeki bir sonraki fonksiyona aktarıyoruz: fetchWeatherData().\n\nBir hata durumunda, hata bilgisi tarayıcı konsoluna çıktı olarak verilir. "}},{"@type":"Question","name":"API Çağrısı Oluşturma Nasıl Gerçekleşir?","acceptedAnswer":{"@type":"Answer","text":" Şimdi coğrafi konumu belirledik. Yapmamız gereken bir sonraki şey, bu bilgiyi hava durumu verilerini yoklamak için kullanmak.\n\nBen bunun için Weather Unlocked hizmetini kullanıyorum. Oldukça cömert bir ücretsiz planı var ve hem SSL hem de SSL olmayan istekleri destekliyor.\nfetchWeatherData() yönteminin kendisi şu şekildedir:\n\nvar fetchWeatherData = function(longitude, latitude) {\n\n  // You need to sign up to Weather Unlocked for a free account. Once you do,\n\n  // you will find your APP ID and APP KEY in your account dashboard.\n\n  var wuAppId = 'paste_your_weather_unlocked_app_id_here';\n\n  var wuAppKey = 'paste_your_weather_unlocked_app_key_here';\n\n  jQuery.getJSON('https://api.weatherunlocked.com/api/current/' + latitude + ',' + longitude + '?app_id=' + wuAppId + '&app_key=' + wuAppKey)\n\n    .done(function(data) { \n\n      window.dataLayer.push({\n\n        event: 'weatherDone',\n\n        weather: data.wx_desc,\n\n        temperature: data.temp_c\n\n      });\n\n    }).fail(function(jq, status, msg) {\n\n      console.log('Weather request failed: ' + status + ' - ' + msg);\n\n    });\n\n};\n\nCoğrafi konum belirleme yöntemine oldukça benzer. Weather Unlocked API'sini sorgulamak için enlem ve boylam bilgilerini kullanırız. Bunun için APP ID'nize ve APP KEY'inize ihtiyacınız olacak!\n\nBaşarılı bir istek üzerine, yanıt mevcut hava durumunun açıklaması (data.wx_desc) ve mevcut sıcaklık (data.temp_c) için ayrıştırılır. Bunlar ilgili anahtarları altında dataLayer nesnesine eklenir.\n\nTüm Ajax çağrılarının jQuery kullanılarak yapıldığını unutmayın. Şimdi, jQuery gibi harici, şişirilmiş bir çerçeveye bağımlı olmanın faydaları ve tuzakları tartışılabilir, ancak jQuery Ajax isteklerini güzel bir şekilde ele alır. Burada başarmaya çalıştığımız şey için mükemmel, bu yüzden çerçeveyi kullanmayı umursamıyorum.\n\nVe hepsi bu kadar! Çözüm oldukça basit, zincirleme asenkron isteklere dayanıyor. Biri başarısız olursa, diğerleri yürütülmez, bu nedenle başarı oranınızın ne olduğunu bilmek istiyorsanız bazı hata işleme yöntemleri eklemek isteyebilirsiniz. Ancak oturum kapsamındaki Özel Boyutları kullandığımız için, tüm oturumlar arasında kaç oturumda hava durumu verisi olduğuna bakarak zaten bir başarı oranı elde edebilirsiniz.\n\nSadece bir şey kaldı."}},{"@type":"Question","name":"Çerez İle Durumu Koruma Nasıl Gerçekleşir?","acceptedAnswer":{"@type":"Answer","text":"Yapbozun son parçası, etiketi oturum başına yalnızca bir kez ateşlemektir. Bunu, yalnızca özel bir 1. taraf çerezi ayarlanmamışsa tüm süreci başlatarak yapıyoruz. {{Session alive}} Çerez ayarlanmamışsa değişken tanımlanmamış olarak döner, böylece ilk adımı (coğrafi konum) yürütmeden önce bunu kontrol edebiliriz.\n\nif (typeof {{Session alive}} === 'undefined') {\n\n    ...the geolocation call...\n\n  }    \n\n  // Reset \"session\" cookie with a 30-minute expiration\n\n  var d = new Date();\n\n  d.setTime(d.getTime()+1800000);\n\n  var expires = \"expires=\"+d.toGMTString();\n\n  document.cookie = \"session=1; \"+expires+\"; path=/\";\n\nKomut dosyasının sonunda, çerezin ayarlanıp ayarlanmadığına bakılmaksızın, çerezi yeni bir 30 dakikalık süre sonu ile oluştururuz / güncelleriz.\n\nVe işte bu kadar. Kolay, değil mi?\n\nÖnizleme modunda dikkatlice test etmeyi unutmayın. JavaScript konsolunda herhangi bir hata olup olmadığını kontrol edin, çerez mantığının çalıştığını test edin ve verilerin aktığını doğrulamak için Google Analytics'teki Gerçek Zamanlı raporları izleyin."}},{"@type":"Question","name":"Google Tag Manager V2 İçin Hava Durumu Verilerini Gönderme Hakkında Genel Bilgiler Nelerdir?","acceptedAnswer":{"@type":"Answer","text":"İşte Google Tag Manager V2 için hava durumu betiği. Weather Unlocked API'yi sorgulamak isteyebileceğiniz başka bir API uç noktası ile değiştirmekten çekinmeyin. API'yi incelemeniz, parametreleri değiştirmeniz ve verileri farklı şekilde ayrıştırmanız gerekecektir, ancak mantık aynıdır."}}]}

İlk yorum yapan siz olun

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir