ตัวอย่างโค้ด JavaScript

ตัวอย่างโค้ดด้านล่างใช้ไลบรารีของไคลเอ็นต์ Google APIs สำหรับ JavaScript คุณดาวน์โหลดตัวอย่างนี้ได้จากโฟลเดอร์ javascript ของที่เก็บตัวอย่างโค้ดของ YouTube API ใน GitHub

โค้ดจะขอสิทธิ์จากผู้ใช้เพื่อเข้าถึงขอบเขต https://www.googleapis.com/auth/yt-analytics.readonly

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

แอปพลิเคชันของคุณอาจต้องขอสิทธิ์เข้าถึงขอบเขตอื่นๆ ด้วย ตัวอย่างเช่น แอปพลิเคชันที่เรียกใช้ YouTube Analytics API และ YouTube Data API อาจต้องให้ผู้ใช้ให้สิทธิ์เข้าถึงบัญชี YouTube ของตนด้วย ภาพรวมการให้สิทธิ์จะระบุขอบเขตที่มักใช้ในแอปพลิเคชันที่เรียกใช้ YouTube Analytics API

เรียกข้อมูลสถิติช่องรายวัน

ตัวอย่างนี้เรียกใช้ YouTube Analytics API เพื่อดึงข้อมูลยอดดูรายวันและเมตริกอื่นๆ สำหรับช่องของผู้ใช้ที่ให้สิทธิ์ในปีปฏิทิน 2017 ตัวอย่างใช้ไลบรารีของไคลเอ็นต์ JavaScript ของ Google APIs

ตั้งค่าข้อมูลเข้าสู่ระบบการให้สิทธิ์

ก่อนเรียกใช้ตัวอย่างนี้ในเครื่องเป็นครั้งแรก คุณต้องตั้งค่าข้อมูลเข้าสู่ระบบการให้สิทธิ์สำหรับโปรเจ็กต์โดยทำดังนี้

1. สร้างหรือเลือกโปรเจ็กต์ในคอนโซล Google API
2. เปิดใช้ YouTube Analytics API สำหรับโปรเจ็กต์
3. ที่ด้านบนของหน้าข้อมูลเข้าสู่ระบบ ให้เลือกแท็บหน้าจอขอความยินยอม OAuth เลือกอีเมล ป้อนชื่อผลิตภัณฑ์หากยังไม่ได้ตั้งค่า แล้วคลิกปุ่มบันทึก
4. ในหน้าข้อมูลเข้าสู่ระบบ ให้คลิกปุ่มสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ Oauth
5. เลือกประเภทแอปพลิเคชันเป็นเว็บแอปพลิเคชัน
6. ในช่องต้นทาง JavaScript ที่ได้รับอนุญาต ให้ป้อน URL ที่คุณจะใช้แสดงตัวอย่างโค้ด เช่น คุณอาจใช้ http://localhost:8000 หรือ http://yourserver.example.com คุณเว้นช่อง URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตว่างไว้ได้
7. คลิกปุ่มสร้างเพื่อสร้างข้อมูลเข้าสู่ระบบให้เสร็จสมบูรณ์
8. ก่อนปิดกล่องโต้ตอบ ให้คัดลอกรหัสไคลเอ็นต์ ซึ่งคุณจะต้องใส่ลงในตัวอย่างโค้ด

ทำสำเนาตัวอย่างในเครื่อง

จากนั้นบันทึกตัวอย่างลงในไฟล์ในเครื่อง ในตัวอย่าง ให้ค้นหาบรรทัดต่อไปนี้ แล้วแทนที่ YOUR_CLIENT_ID ด้วยรหัสไคลเอ็นต์ที่คุณได้รับเมื่อตั้งค่าข้อมูลเข้าสู่ระบบการให้สิทธิ์

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

เรียกใช้โค้ด

ตอนนี้คุณพร้อมที่จะทดสอบตัวอย่างแล้ว โดยทำดังนี้

1. เปิดไฟล์ในเครื่องจากเว็บเบราว์เซอร์ แล้วเปิดคอนโซลการแก้ไขข้อบกพร่องในเบราว์เซอร์ คุณควรเห็นหน้าเว็บที่แสดงปุ่ม 2 ปุ่ม
2. คลิกปุ่มให้สิทธิ์และโหลดเพื่อเปิดขั้นตอนการให้สิทธิ์ผู้ใช้ หากให้สิทธิ์แอปในการดึงข้อมูลช่อง คุณควรเห็นบรรทัดต่อไปนี้พิมพ์ลงในคอนโซลในเบราว์เซอร์

   Sign-in successful
   GAPI client loaded for API

3. หากเห็นข้อความแสดงข้อผิดพลาดแทนบรรทัดด้านบน ให้ยืนยันว่าคุณกำลังโหลดสคริปต์จาก URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตซึ่งคุณตั้งค่าไว้สำหรับโปรเจ็กต์ และคุณได้ใส่รหัสไคลเอ็นต์ลงในโค้ดตามที่อธิบายไว้ข้างต้น
4. คลิกปุ่มเรียกใช้เพื่อเรียก API คุณควรเห็นออบเจ็กต์ response พิมพ์ไปยังคอนโซลในเบราว์เซอร์ ในออบเจ็กต์นั้น พร็อพเพอร์ตี้ result จะแมปกับออบเจ็กต์ที่มีข้อมูล API

โค้ดตัวอย่าง

<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