บทแนะนำนี้จะอธิบายขั้นตอนที่จำเป็นในการเข้าถึงบัญชี Google Analytics, ค้นหา Analytics API, จัดการการตอบกลับของ API และแสดงผลลัพธ์ บทแนะนำนี้ใช้ Core Reporting API v3.0, Management API v3.0 และ OAuth2.0
ขั้นตอนที่ 1: เปิดใช้ Analytics API
หากต้องการเริ่มต้นใช้งาน Google Analytics API ก่อนอื่นคุณต้องใช้เครื่องมือการตั้งค่า ซึ่งจะแนะนำขั้นตอนการสร้างโปรเจ็กต์ในคอนโซล Google API เปิดใช้ API และสร้างข้อมูลเข้าสู่ระบบ
สร้างรหัสไคลเอ็นต์
จากหน้าข้อมูลเข้าสู่ระบบ ให้ทำดังนี้
- คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth
- เลือกเว็บแอปพลิเคชันสําหรับประเภทแอปพลิเคชัน
- ตั้งชื่อข้อมูลเข้าสู่ระบบ
- ตั้งค่าต้นทางของ JavaScript ที่ได้รับอนุญาตเป็น http://localhost:8080
- ตั้งค่า URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตเป็น http://localhost:8080/oauth2callback
- คลิกสร้าง
ขั้นตอนที่ 2: ตั้งค่าตัวอย่าง
คุณจะต้องสร้างไฟล์ชื่อ HelloAnalytics.html
1 ไฟล์ ซึ่งจะมีโค้ด HTML และ JavaScript สำหรับตัวอย่างของเรา
- คัดลอกหรือ
ดาวน์โหลดซอร์สโค้ดต่อไปนี้ไปยัง
HelloAnalytics.html
- แทนที่
'<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 แล้ว และตั้งค่าซอร์สโค้ดตัวอย่าง ตัวอย่างก็จะพร้อมทำงาน
- เผยแพร่
HelloAnalytics.html
ไปยังเว็บเซิร์ฟเวอร์และโหลดหน้าเว็บในเบราว์เซอร์ - คลิกปุ่ม
ให้สิทธิ์ และให้สิทธิ์เข้าถึง Google Analytics
เมื่อทําตามขั้นตอนเหล่านี้เสร็จแล้ว ตัวอย่างจะแสดงชื่อข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) แรกของ Google Analytics ของผู้ใช้ที่ได้รับอนุญาตและจํานวนเซสชันในช่วง 7 วันที่ผ่านมา
ด้วยออบเจ็กต์บริการ Analytics ที่ได้รับอนุญาต ตอนนี้คุณจะเรียกใช้ตัวอย่างโค้ดที่อยู่ใน เอกสารอ้างอิงของ Management API ได้แล้ว ตัวอย่างเช่น คุณอาจลองเปลี่ยนโค้ดเพื่อใช้เมธอด accountSummaries.list