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

บทแนะนำนี้จะแนะนำขั้นตอนที่จำเป็นในการเข้าถึงบัญชี Google Analytics, ค้นหา API ของ Analytics, จัดการการตอบกลับ API และแสดงผลลัพธ์ บทแนะนำนี้ใช้ Core Reporting API v3.0, Management API v3.0 และ OAuth2.0

ขั้นตอนที่ 1: เปิดใช้ Analytics API

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

สร้างรหัสไคลเอ็นต์

จากหน้าข้อมูลเข้าสู่ระบบ ให้ทำดังนี้

  1. คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth
  2. เลือกเว็บแอปพลิเคชันสำหรับประเภทแอปพลิเคชัน
  3. ตั้งชื่อข้อมูลเข้าสู่ระบบ
  4. ตั้งค่าต้นทางของ JavaScript ที่ได้รับอนุญาตเป็น http://localhost:8080
  5. ตั้งค่า URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตเป็น http://localhost:8080/oauth2callback
  6. คลิกสร้าง

ขั้นตอนที่ 2: ตั้งค่าตัวอย่าง

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

  1. คัดลอกหรือ ดาวน์โหลดซอร์สโค้ดต่อไปนี้ลงใน HelloAnalytics.html
  2. แทนที่ '<YOUR_CLIENT_ID>' ด้วยรหัสไคลเอ็นต์ ที่สร้างขึ้นด้านบน
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics - A quickstart guide for JavaScript</title>
</head>
<body>

<button id="auth-button" hidden>Authorize</button>

<h1>Hello Analytics</h1>

<textarea cols="80" rows="20" id="query-output"></textarea>

<script>

  // Replace with your client ID from the developer console.
  var CLIENT_ID = '<YOUR_CLIENT_ID>';

  // Set authorized scope.
  var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];


  function authorize(event) {
    // Handles the authorization flow.
    // `immediate` should be false when invoked from the button click.
    var useImmdiate = event ? false : true;
    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: useImmdiate
    };

    gapi.auth.authorize(authData, function(response) {
      var authButton = document.getElementById('auth-button');
      if (response.error) {
        authButton.hidden = false;
      }
      else {
        authButton.hidden = true;
        queryAccounts();
      }
    });
  }


function queryAccounts() {
  // Load the Google Analytics client library.
  gapi.client.load('analytics', 'v3').then(function() {

    // Get a list of all Google Analytics accounts for this user
    gapi.client.analytics.management.accounts.list().then(handleAccounts);
  });
}


function handleAccounts(response) {
  // Handles the response from the accounts list method.
  if (response.result.items && response.result.items.length) {
    // Get the first Google Analytics account.
    var firstAccountId = response.result.items[0].id;

    // Query for properties.
    queryProperties(firstAccountId);
  } else {
    console.log('No accounts found for this user.');
  }
}


function queryProperties(accountId) {
  // Get a list of all the properties for the account.
  gapi.client.analytics.management.webproperties.list(
      {'accountId': accountId})
    .then(handleProperties)
    .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}


function handleProperties(response) {
  // Handles the response from the webproperties list method.
  if (response.result.items && response.result.items.length) {

    // Get the first Google Analytics account
    var firstAccountId = response.result.items[0].accountId;

    // Get the first property ID
    var firstPropertyId = response.result.items[0].id;

    // Query for Views (Profiles).
    queryProfiles(firstAccountId, firstPropertyId);
  } else {
    console.log('No properties found for this user.');
  }
}


function queryProfiles(accountId, propertyId) {
  // Get a list of all Views (Profiles) for the first property
  // of the first Account.
  gapi.client.analytics.management.profiles.list({
      'accountId': accountId,
      'webPropertyId': propertyId
  })
  .then(handleProfiles)
  .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}


function handleProfiles(response) {
  // Handles the response from the profiles list method.
  if (response.result.items && response.result.items.length) {
    // Get the first View (Profile) ID.
    var firstProfileId = response.result.items[0].id;

    // Query the Core Reporting API.
    queryCoreReportingApi(firstProfileId);
  } else {
    console.log('No views (profiles) found for this user.');
  }
}


function queryCoreReportingApi(profileId) {
  // Query the Core Reporting API for the number sessions for
  // the past seven days.
  gapi.client.analytics.data.ga.get({
    'ids': 'ga:' + profileId,
    'start-date': '7daysAgo',
    'end-date': 'today',
    'metrics': 'ga:sessions'
  })
  .then(function(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  })
  .then(null, function(err) {
      // Log any errors.
      console.log(err);
  });
}

  // Add an event listener to the 'auth-button'.
  document.getElementById('auth-button').addEventListener('click', authorize);
</script>

<script src="https://apis.google.com/js/client.js?onload=authorize"></script>

</body>
</html>

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

หลังจากเปิดใช้ Analytics API แล้ว และตั้งค่าซอร์สโค้ดตัวอย่าง ตัวอย่างก็จะพร้อมทำงาน

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

เมื่อทําตามขั้นตอนเหล่านี้เสร็จแล้ว ตัวอย่างจะแสดงชื่อข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) Google Analytics รายการแรกของผู้ใช้ที่ได้รับอนุญาตและจํานวนเซสชันในช่วง 7 วันที่ผ่านมา

ด้วยออบเจ็กต์บริการ Analytics ที่ได้รับอนุญาต ตอนนี้คุณสามารถเรียกใช้ตัวอย่างโค้ดที่อยู่ใน เอกสารอ้างอิง API การจัดการได้แล้ว ตัวอย่างเช่น คุณลองเปลี่ยนโค้ดเพื่อใช้เมธอด accountSummaries.list