Google Verilerini Kullanarak Sitemizde Ziyaretçi Haritası Gösterme (GeoMap, GeoChart)

Haziran

2013

Google Verilerini Kullanarak Sitemizde Ziyaretçi Haritası Gösterme (GeoMap, GeoChart)

Herkese merhabalar.

Bu makalemizde Google analytics verilerini kullanarak sitemizde Google haritası (geomap, geochart) ile birlikte ziyaret sayılarını nasıl gösterebileceğimizi izah etmeye çalışacağız. Google analytics’in sunduğu pek çok api ve data mevcut. Biz yalnızca Google haritası (geomap, geochart) kullanıp hitleri göstereceğiz. Tabi şunu hatırlatmak gerekir ki kodlarımızın çalışabilmesi için analytics kodlarınızın sayfaya gömülü olması gerekiyor. http://www.google.com/analytics/ adresinden sitenizi tanımlayıp size verilen analytics kodlarını sitenize koyabilirsiniz.

Öncelikle gerekli olan api dosyalarını indirip projenize referans olarak eklemeniz gerekiyor. https://google-gdata.googlecode.com/files/Google_Data_API_Setup_2.1.0.0.msi adresine giderek bu paketi indirip kurun. Şimdi projenize gelerek menülerden website>add reference tıklayın. Açılan iletişim kutusunda browse tıklayarak apinin kurulduğu dizini bulun (C:\Program Files (x86)\Google\Google Data API SDK\). Burada “redist” klasöründen Google.GData.Analytics.dll ve google.gdata.client.dll seçerek projenize ekleyin.

Şimdi haritayı oluşturmaya başlayalım. Bir aspx isminde bir sayfa oluşturalım sayfamızın head kısmına alttaki gibi script tagını ve bir div ekleyelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

</form>

</body>

</html>

Şimdi cs sayfamıza geçerek kodlarımızı yazalım.

using System;

using Google.GData.Analytics;

using System.Text;

using System.Web.UI.HtmlControls;

using System.Web;

public partial class admin_Default : PageAdmin

{

AnalyticsService service = new AnalyticsService(HttpContext.Current.Request.Url.Host);

protected void Page_Load(object sender, EventArgs e)

{

//google login kullanıcı adı

string GglUser = "";

//google login şifreniz

string GglPsw = "";

//sitenizin Profile ID değeri. (ID değerinin önüne ga: ekleyiniz. Örneğin ga:12345678)

string GglProfId = "";

//google'a kullanıcı doğrulatıyoruz.

service.setUserCredentials(GglUser, GglPsw);

DataQuery feedQuery = new DataQuery("https://www.google.com/analytics/feeds/data");

feedQuery.Ids = GglProfId;

//ülkeleri anahtar değer olarak veriyoruz. (çünkü ülke hitlerini çekeceğiz)

feedQuery.Dimensions = "ga:country";

//hangi değeri çekeceğimizi belirtiyoruz. (visitors - ziyaretçiler)

feedQuery.Metrics = "ga:visitors";

feedQuery.GAStartDate = "2012-10-10";

feedQuery.GAEndDate = DateTime.Now.ToString("yyyy-MM-dd");

StringBuilder SBJs = new StringBuilder();

//şimdi haritayı oluşturan javascript kodlarını oluşturuoyruz.

SBJs.Append("google.load('visualization', '1', { 'packages': ['geochart'] });");

SBJs.Append("$(document).ready(function(){");

SBJs.Append("var data = google.visualization.arrayToDataTable([");

SBJs.Append("['Ülke', 'Hit'],");

//döngü ile ülke ismi ve hit değerini tek tek alıyoruz ve javascript kodumuza ekliyoruz.

foreach (DataEntry entry in service.Query(feedQuery).Entries)

SBJs.Append("['" + entry.Dimensions[0].Value + "'," + entry.Metrics[0].Value + "],");

//en sonda kalan virgülü kaldırıyoruz.

SBJs.Remove(SBJs.Length - 1, 1);

SBJs.Append("]);");

SBJs.Append("var options = {};");

//js kodunun bu kısmı haritayı ekrana çizer.

SBJs.Append("var geomap = new google.visualization.GeoChart(document.getElementById('GeoChart'));");

SBJs.Append("geomap.draw(data, options);");

SBJs.Append("});");

//js kodumuzu yazdırmak için script tagı oluşturuoyruz

HtmlGenericControl js = new HtmlGenericControl("script");

js.Attributes.Add("type", "text/javascript");

//scrip tagına js kodlarımızı veriyoruz

js.InnerHtml = SBJs.ToString();

//ve sayfamıza script tagımızı ekliyoruz.

this.Header.Controls.Add(js);

}

Buradaki profile ID değerini öğrenmek için analytics panelinde site isimlerinin listelendiği bölümde sağ üst tarafta yönetici butonuna tıklayınız, daha sonra site ismini tıklayıp “tüm site verileri” ksımına geçiniz. Oradan da “profil ayarları” sekmesine geçerek “profil kimliği” değerini not ediniz. Bu sayfa çalıştığı zaman html çıktısını incelediğinizde şu şekilde bir js kodu oluştuğunu görürsünüz.

google.load('visualization', '1', { 'packages': ['geochart'] });

$(document).ready(function () {

var data = google.visualization.arrayToDataTable([

[Ülke, 'Hit'],

['Azerbaijan', 4],

['Bulgaria', 1],

['Cyprus', 2],

['France', 1],

['Germany', 2],

['India', 1],

['Indonesia', 1],

['Iran', 1],