Bu sayfa, Cloud Translation API ile çevrilmiştir.

Başlayın

Genel bakış

Bu dokümanda Yerleştirme API'sinin nasıl kullanılacağına dair eksiksiz bir örnek verilmiştir. Tamamlandıktan sonra şuna benzeyen bir uygulamanız olur.

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

Basit Kontrol Paneli Oluşturma

Aşağıdaki 2 kolay adımı uygulayarak örnek uygulamanın sunucunuzda çalışmasını sağlayabilirsiniz:

Yeni bir istemci kimliği oluşturun
Kodu kopyalayıp yapıştırma

Bu uygulamayı çalışır duruma getirdikten sonra bir sonraki bölümde tüm parçaların nasıl eşleştiğini ayrıntılı olarak açıklayacağız.

Yeni İstemci Kimliği Oluşturma

Yerleştirme API'si, bilinen OAuth 2.0 akışını kullanan tek tıklamayla oturum açma bileşeni sağlayarak neredeyse tüm yetkilendirme sürecini yönetir. Bu düğmenin sayfanızda yararlanabilmesi için bir istemci kimliği gerekir.

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

Talimatları incelerken aşağıdaki iki önemli adımı atlamamanız önemlidir:

Analytics API'yi etkinleştirme
Doğru başlangıç noktasının

Kaynaklar, hangi alanların kullanıcıları yetkilendirmek için bu kodu kullanmasına izin verildiğini kontrol eder. Bu, diğer kullanıcıların kodunuzu kopyalamasını ve sitelerinde çalıştırmasını engeller.

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

Kodu Kopyala ve Yapıştır

İstemci kimliğinizi uygun kaynaklara ayarladıktan sonra demoyu oluşturabilirsiniz. Aşağıdaki kodu kopyalayıp sunucu sürücünüzdeki bir HTML dosyasına yapıştırın. Buradaki "İstemci kimliğinizi buraya ekleyin&quot.

<!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>

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

Bu bölümde, örnek uygulama için sağlanan kodda tam olarak neler olduğu adım adım açıklanmıştır. Nasıl çalıştığını kavradıktan sonra, kendi çalışmalarınızı oluşturabilirsiniz.

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

Yerleştirme API'si bileşenlerinin çoğu, sayfanızı görsel olarak oluşturur. Bu bileşenlerin nereye gittiğini kontrol etmek için kendileri için container'lar oluşturabilirsiniz. Örnek uygulamada kimlik doğrulama düğmesi, görünüm seçici ve 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>

Bileşen oluştururken, sonraki örneklerde de göreceğiniz gibi, kimliği özelliğiyle hangi kapsayıcının kullanılacağını belirtirsiniz.

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

Yerleştirme API'si 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 tamamen yüklendiğinde, gapi.analytics.ready öğesine aktarılan tüm geri çağırmalar gerçekleştirilir.

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

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

Yerleştirme API'si, bilinen OAuth 2.0 akışını kullanan tek tıklamayla oturum açma bileşeni sağlayarak neredeyse tüm yetkilendirme sürecini sizin yerinize yönetir. Bu düğmenin sayfanızda çalışması 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 #&39;auth-button' kimliğini içeren ve sizin için yetkilendirme akışını sizin yerinize yapan 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 edinmek için kullanılabilir. Böylece bu rapor için bir rapor çalıştırabilirsiniz.

Görünüm seçici oluşturmak için tek 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. Bunun için 6. adımda işlenen execute() işlevini aramanız gerekir.

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

Yerleştirme API'si, bir grafik rapor bileşeni ve hem Google grafiği hem de grafik nesnesi sağlar. Bu şekilde, grafik nesnesi raporlarınızı perde arkasında çalıştırıp sonuçlarla kendini otomatik olarak güncellediğinden verileri görüntüleme işlemi büyük ölçüde basitleştirilir.

Grafik bileşeni oluşturmak için API sorgu parametrelerini ve grafik seçeneklerini belirtmeniz gerekir. Grafik seçeneklerinde, 1. adımda oluşturduğunuz kapsayıcının kimliğine referans verilir.

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 bileşeni, sayfada oluşturmak için bir sonraki adımda açıklanan execute() çağrısı yapmanız gerekir.

6. Adım: Birlikte çalışmak için bileşenleri birbirine bağlayın

Yerleştirme API'si 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 olduğunda etkinlikleri tetikler.

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 rehberde Yerleştirme API'si ile temel bir görselleştirmenin nasıl oluşturulacağı adım adım açıklanmıştır. Daha fazla bilgi edinmek isterseniz API referansını inceleyerek nelerin mümkün olduğunu tam olarak anlayabilirsiniz.