Hello Analytics Reporting API v4; การเริ่มต้นใช้งาน JavaScript อย่างรวดเร็วสำหรับเว็บแอปพลิเคชัน

บทแนะนำนี้จะแนะนำขั้นตอนที่จำเป็นในการเข้าถึง Analytics Reporting API เวอร์ชัน 4

1. เปิดใช้ API

หากต้องการเริ่มต้นใช้งาน Analytics Reporting API v4 ก่อนอื่นคุณต้องใช้เครื่องมือการตั้งค่า ซึ่งจะแนะนำขั้นตอนการสร้างโปรเจ็กต์ในคอนโซล Google API เปิดใช้ API และสร้างข้อมูลเข้าสู่ระบบ

หมายเหตุ: หากต้องการสร้างรหัสเว็บไคลเอ็นต์หรือไคลเอ็นต์แอปพลิเคชันที่ติดตั้ง คุณต้องตั้งค่าชื่อผลิตภัณฑ์ในหน้าจอความยินยอม หากยังไม่ได้ทํา ระบบจะแจ้งให้กําหนดค่าหน้าจอขอความยินยอม

สร้างข้อมูลเข้าสู่ระบบ

  • เปิดหน้าข้อมูลเข้าสู่ระบบ
  • คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth
  • ในส่วนประเภทแอปพลิเคชัน ให้เลือกเว็บแอปพลิเคชัน
  • ตั้งชื่อรหัสไคลเอ็นต์quickstart แล้วคลิกquickstart
  • ตั้งค่าต้นทาง JavaScript ที่ได้รับอนุญาตเป็น http://localhost:8080
  • คลิกสร้าง

2. ตั้งค่าตัวอย่าง

คุณจะต้องสร้างชื่อไฟล์ 1 ชื่อ HelloAnalytics.html ซึ่งจะมีโค้ด HTML และ JavaScript สำหรับตัวอย่างของเรา

  • คัดลอกหรือดาวน์โหลดซอร์สโค้ดต่อไปนี้ลงใน HelloAnalytics.html
  • แทนที่ <REPLACE_WITH_CLIENT_ID> ด้วยรหัสไคลเอ็นต์ที่สร้างไว้ข้างต้น
  • แทนที่ <REPLACE_WITH_VIEW_ID> ด้วยรหัสข้อมูลพร็อพเพอร์ตี้ คุณดึงรหัสข้อมูลพร็อพเพอร์ตี้ได้จากโปรแกรมสำรวจบัญชี
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="<REPLACE_WITH_CLIENT_ID>">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>

<h1>Hello Analytics Reporting API V4</h1>

<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
  // Replace with your view ID.
  var VIEW_ID = '<REPLACE_WITH_VIEW_ID>';

  // Query the API and print the results to the page.
  function queryReports() {
    gapi.client.request({
      path: '/v4/reports:batchGet',
      root: 'https://analyticsreporting.googleapis.com/',
      method: 'POST',
      body: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '7daysAgo',
                endDate: 'today'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(displayResults, console.error.bind(console));
  }

  function displayResults(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  }
</script>

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

</body>
</html>

3: เรียกใช้ตัวอย่าง

  • เผยแพร่ HelloAnalytics.html ไปยังเว็บเซิร์ฟเวอร์และโหลดหน้าเว็บในเบราว์เซอร์
  • คลิกปุ่มลงชื่อเข้าใช้ และอนุญาตการเข้าถึง Google Analytics

เมื่อทําตามขั้นตอนเหล่านี้เสร็จแล้ว ตัวอย่างจะแสดงจํานวนเซสชันในช่วง 7 วันที่ผ่านมาสำหรับข้อมูลพร็อพเพอร์ตี้ที่ระบุ