Contoh Kode JavaScript

Contoh kode di bawah menggunakan Library Klien Google API untuk JavaScript. Anda dapat mendownload contoh ini dari folder javascript repositori contoh kode YouTube API di GitHub.

Kode ini meminta izin pengguna untuk mengakses cakupan https://www.googleapis.com/auth/yt-analytics.readonly.

return gapi.auth2.getAuthInstance()
    .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
    ...

Aplikasi Anda mungkin juga perlu meminta akses ke cakupan lain. Misalnya, aplikasi yang memanggil YouTube Analytics API dan YouTube Data API mungkin mengharuskan pengguna untuk memberikan akses ke akun YouTube mereka. Ringkasan otorisasi mengidentifikasi cakupan yang biasanya digunakan dalam aplikasi yang memanggil YouTube Analytics API.

Mengambil statistik saluran harian

Contoh ini memanggil YouTube Analytics API untuk mengambil jumlah tontonan harian dan metrik lainnya bagi channel pengguna yang memberi otorisasi untuk tahun kalender 2017. Contoh ini menggunakan library klien JavaScript Google API.

Menyiapkan kredensial otorisasi

Sebelum menjalankan contoh ini secara lokal untuk pertama kalinya, Anda perlu menyiapkan kredensial otorisasi untuk project Anda:

  1. Buat atau pilih project di Konsol API Google.
  2. Aktifkan YouTube Analytics API untuk project Anda.
  3. Di bagian atas halaman Kredensial, pilih tab Layar persetujuan OAuth. Pilih alamat Email, masukkan nama Produk jika belum ditetapkan, lalu klik tombol Simpan.
  4. Di halaman Kredensial, klik tombol Create credentials, lalu pilih Oauth client ID.
  5. Pilih jenis aplikasi Web.
  6. Di kolom asal JavaScript yang Diizinkan, masukkan URL tempat Anda akan menayangkan contoh kode. Misalnya, Anda dapat menggunakan sesuatu seperti http://localhost:8000 atau http://yourserver.example.com. Anda dapat mengosongkan kolom URI Pengalihan yang Diotorisasi.
  7. Klik tombol Buat untuk menyelesaikan pembuatan kredensial.
  8. Sebelum menutup kotak dialog, salin client ID yang harus dimasukkan ke dalam contoh kode.

Buat salinan lokal sampel

Kemudian, simpan contoh ke file lokal. Di contoh, temukan baris berikut dan ganti YOUR_CLIENT_ID dengan client ID yang Anda peroleh saat menyiapkan kredensial otorisasi.

gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});

Menjalankan kode

Sekarang, Anda siap untuk benar-benar menguji sampel:

  1. Buka file lokal dari browser web, lalu buka konsol debug di browser. Anda akan melihat halaman yang menampilkan dua tombol.
  2. Klik tombol otorisasi dan muat untuk meluncurkan alur otorisasi pengguna. Jika Anda mengizinkan aplikasi untuk mengambil data saluran, Anda akan melihat baris berikut dicetak ke konsol di browser: 
    Sign-in successful
GAPI client loaded for API
  3. Jika Anda melihat pesan error, bukan baris di atas, pastikan Anda memuat skrip dari URI pengalihan yang diotorisasi yang Anda siapkan untuk project dan memasukkan client ID ke dalam kode seperti yang dijelaskan di atas.
  4. Klik tombol eksekusi untuk memanggil API. Anda akan melihat objek response yang dicetak ke konsol di browser. Di objek tersebut, properti result dipetakan ke objek yang berisi data API.

Kode contoh

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtubeAnalytics.reports.query({
      "ids": "channel==MINE",
      "startDate": "2017-01-01",
      "endDate": "2017-12-31",
      "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
      "dimensions": "day",
      "sort": "day"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

yt_analytics_v2.html