Başlayın

Genel bakış

Bu belgede, Embed API'nin nasıl kullanılacağına dair eksiksiz bir örnek açıklanmaktadır. İşlem tamamlandığında aşağıdakine benzer bir uygulamanız olur.

Bu kılavuzda ele alınan örneğin ekran görüntüsü
Bu kılavuzda ele alınan örneğin ekran görüntüsü.

Basit Kontrol Paneli Oluşturma

Aşağıdaki 2 kolay adımı uygulayarak örnek uygulamayı sunucunuzda çalıştırabilirsiniz:

  1. Yeni bir istemci kimliği oluşturun
  2. Kodu kopyalayıp yapıştırın

Bu uygulamayı çalıştırıp çalıştırdıktan sonra, bir sonraki bölümde tüm parçaların nasıl bir araya geldiği ayrıntılı olarak açıklanacaktır.

Yeni İstemci Kimliği Oluştur

Embed API, bilinen OAuth 2.0 akışını kullanan tek tıklamayla oturum açma bileşeni sağlayarak yetkilendirme işlemlerinin neredeyse tamamını sizin için yönetir. Bu düğmenin sayfanızda çalışması için bir istemci kimliğine ihtiyacınız var.

Daha önce istemci kimliği oluşturmadıysanız bu talimatları izleyerek oluşturabilirsiniz.

Talimatların üzerinden geçerken, bu iki kritik adımı göz ardı etmemeniz önemlidir:

  • Analytics API'yi etkinleştirme
  • Doğru başlangıç noktalarını belirlemeye

Kaynaklar, kullanıcıları yetkilendirmek için hangi alan adlarının bu kodu kullanmasına izin verildiğini kontrol eder. Bu, başkalarının kodunuzu kopyalayıp sitelerinde çalıştırmasını önler.

Örneğin, web siteniz example.com alanında barındırılıyorsa http://example.com istemci kimliğiniz için aşağıdaki kaynağı ayarladığınızdan emin olun. Kodunuzu yerel olarak test etmek istiyorsanız yerel sunucunuzun kaynağını da eklemeniz gerekir. Örneğin: http://localhost:8080.

Kodu Kopyalayıp Yapıştırın

Uygun kaynaklara sahip istemci kimliğiniz olduğunda demoyu oluşturmaya hazırsınız demektir. Aşağıdaki kodu kopyalayıp sunucunuzdaki bir HTML dosyasına yapıştırmanız yeterlidir. "İstemci kimliğinizi buraya ekleyin" ifadesinin yer aldığı istemci kimliğinizi ekleyin.

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'Insert your client ID here';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

Adım Adım Açıklamalı Kod Kılavuzu

Bu bölümde, örnek uygulama için sağlanan kodda tam olarak neler yapıldığı adım adım gösterilmektedir. Nasıl çalıştığını kavradıktan sonra kendi çalışmanızı oluşturabilirsiniz.

1. Adım: Bileşen kapsayıcılarını oluşturun

Embed API bileşenlerinin çoğu sayfanızda görsel olarak bir şeyler oluşturur. Bu bileşenlerin nereye gideceğini kontrol etmenin yolu, onlar için kapsayıcılar oluşturmaktır. Örnek uygulamada bir yetkilendirme düğmesi, bir görünüm seçici ve bir grafik bulunuyor. Bu bileşenlerin her biri aşağıdaki HTML öğelerinin içinde oluşturulur:

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

Bir bileşen oluştururken, sonraki örneklerde göreceğiniz gibi kimlik özelliğiyle hangi kapsayıcının kullanılacağını belirtirsiniz.

2. Adım: Kitaplığı yükleyin

Embed API, aşağıdaki snippet ile yüklenebilir.

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

Kitaplık tam olarak yüklendiğinde, gapi.analytics.ready öğesine iletilen tüm geri çağırmalar çağrılır.

<script>
gapi.analytics.ready(function() {
  // Put your application code here...
});
</script>

3. Adım: Kullanıcıyı yetkilendirin

Embed API, bilinen OAuth 2.0 akışını kullanan tek tıklamayla oturum açma bileşeni sağlayarak neredeyse tüm yetkilendirme işlemlerini sizin için yönetir. Bu düğmenin sayfanızda çalışmasını sağlamak için bir kapsayıcı referansı ve istemci kimliğinizi iletmeniz gerekir.

gapi.analytics.auth.authorize({
  container: 'auth-button',
  clientid: CLIENT_ID,
});

Bu işlem, öğenin içinde yetkilendirme akışını sizin için yapan "auth-button" kimliğine sahip bir düğme oluşturur.

4. Adım: Görünüm seçiciyi oluşturun

Görünüm seçici bileşeni, belirli bir görünümün kimliklerini almak için kullanılabilir. Böylece bu bileşen için bir rapor çalıştırabilirsiniz.

Görünüm seçici oluşturmak için tüm ihtiyacınız olan, 1. adımda oluşturduğunuz kapsayıcı referansıdır.

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector'
});

Bu, görünüm seçici bileşenini oluşturur, ancak henüz sayfada oluşturmaz. Bunu yapmak için execute() numaralı telefonu aramanız gerekir. Bu işlem 6. adımda yürütülür.

5. Adım: Zaman çizelgesi grafiğini oluşturma

Embed API size hem Google grafiği hem de rapor nesnesi olan bir grafik bileşeni sağlar. Grafik nesnesi, raporlarınızı arka planda çalıştıracağından ve sonuçlarla otomatik olarak güncellendiğinden, bu işlem veri görüntüleme işlemini büyük ölçüde basitleştirir.

Grafik bileşeni oluşturmak için grafik seçeneklerinin yanı sıra API sorgu parametrelerini de belirtmeniz gerekir. Grafik seçeneklerinde, 1. adımda oluşturduğunuz kapsayıcının kimliğine bir referans yer alır.

var timeline = new gapi.analytics.googleCharts.DataChart({
  reportType: 'ga',
  query: {
    'dimensions': 'ga:date',
    'metrics': 'ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
  },
  chart: {
    type: 'LINE',
    container: 'timeline'
  }
});

Görünüm seçicide olduğu gibi, grafik bileşeni oluşturulur ancak bunu sayfada oluşturmak için execute() yöntemini çağırmanız gerekir. Bu işlem bir sonraki adımda açıklanacaktır.

6. Adım: Bileşenleri birbirine bağlayarak birlikte çalışın

Embed API bileşenleri, başarılı yetkilendirme, yeni bir görünüm seçme veya bir grafiğin tamamen oluşturulması gibi çeşitli şeyler gerçekleştiğinde etkinlikler yayınlar.

Bu kılavuzdaki örnek uygulama, yetkilendirme gerçekleşene kadar görünüm seçiciyi oluşturmayı bekler ve görünüm seçiciden yeni bir görünüm seçildiğinde zaman çizelgesi grafiğini günceller.

gapi.analytics.auth.on('success', function(response) {
  viewSelector.execute();
});

viewSelector.on('change', function(ids) {
  var newIds = {
    query: {
      ids: ids
    }
  }
  timeline.set(newIds).execute();
});

Çeşitli bileşenlerin yayınladığı tüm etkinliklerin tam listesi için API referansına göz atın.

Sonraki adımlar

Bu kılavuzda, Embed API ile temel bir görselleştirmenin nasıl oluşturulacağı adım adım açıklanmıştır. Daha fazla bilgi edinmek ve neler yapılabileceğini tam olarak anlamak için API referansına göz atın.