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

22
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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

</head>

<body>

    <form id="form1" runat="server" >

        <div id="GeoChart"></div>

    </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.

 

    <script type="text/javascript">

        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],

                ['Kazakhstan', 1],

                ['Macedonia [FYROM]', 1],

                ['Malaysia', 1],

                ['Nepal', 1],

                ['Netherlands', 2],

                ['Pakistan', 1],

                ['Poland', 1],

                ['Russia', 1],

                ['Turkey', 896],

                ['United Kingdom', 2],

                ['United States', 5],

                ['Vietnam', 1]

            ]);

            var options = {};

            var geomap = new google.visualization.GeoChart(document.getElementById('GeoChart')); geomap.draw(data, options);

        });

 

    </script>

 

Ekran görüntüsü ise şu şekilde olacaktır.

 

 

Umarım faydalı olmuştur. Görüşmek dileğiyle.

 

MAKALE-YORUMLAR

İsminiz
Yorumunuz


Doğrulama kodu

?

MAKALEYE YORUM YAZ

İsminiz
E-posta adresiniz
Yorumunuz
Doğrulama kodu ?

Copyright © 2006 - 2013  DESTEKYERI.COM

Embedded by  ® SANALOG Tüm Hakları Saklıdır . Yayınlanan yazıların izin alınmadan kopyalanması ve kullanılması  5846 sayılı Fikir ve Sanat Eserleri Yasasına göre suçtur. Makalelerin "alıntı" olduğunu belirterek yayınlayabilir ve kaynağı belirtmeniz önemlidir !!!