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

ตัวอย่างโค้ดด้านล่างใช้ไลบรารีของไคลเอ็นต์ Google API สําหรับ JavaScript คุณดาวน์โหลดตัวอย่างนี้ได้จากโฟลเดอร์ javascript ของที่เก็บตัวอย่างโค้ด API ของ YouTube ใน 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