שלום 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 Console, להפעלת ה-API וליצירת פרטי כניסה.

יצירת מזהה לקוח

מדף פרטי הכניסה:

  1. לוחצים על יצירת פרטי כניסה ובוחרים באפשרות מזהה לקוח OAuth.
  2. בחר אפליקציית אינטרנט עבור סוג אפליקציה.
  3. נותנים שם לפרטי הכניסה.
  4. יש להגדיר את מודעות ה-JAVA מתבססות על הרשאה כך: http://localhost:8080
  5. הגדרת URIs מאושרים של הפניה מחדש לערך http://localhost:8080/oauth2callback
  6. לוחצים על Create.

שלב 2: הגדרת הדוגמה

צריך ליצור קובץ אחד בשם HelloAnalytics.html, שיכיל את קוד ה-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 ואת מספר הביקורים בשבעת הימים האחרונים.

באמצעות אובייקט השירות המורשה של Analytics אפשר עכשיו להריץ דוגמאות קוד שנמצאות במסמכי התיעוד של Management API. לדוגמה, אפשר לנסות לשנות את הקוד כדי להשתמש בשיטה accountSummaries.list.