שלום Analytics API: מדריך למתחילים בנושא JavaScript לאפליקציות אינטרנט

במדריך הזה מפורטים השלבים שצריך לבצע כדי לגשת לחשבון Google Analytics, לשלוח שאילתות לממשקי ה-API של Analytics, לטפל בתשובות ה-API ולהציג פלט של התוצאות. במדריך הזה אנחנו משתמשים בגרסה 3.0 של ממשק ה-API הראשי לדיווח, ב-Management API v3.0 וב-OAuth2.0.

שלב 1: מפעילים את ה-API של Analytics

כדי להתחיל להשתמש ב-Google Analytics API, קודם צריך להשתמש בכלי ההגדרה, שמדריך אתכם לגבי יצירת פרויקט ב-Google API Console, הפעלת ה-API ויצירת פרטי כניסה.

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

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

  1. לוחצים על Create Credentials (יצירת פרטי כניסה) ובוחרים באפשרות OAuth client ID (מזהה לקוח OAuth).
  2. בוחרים באפשרות אפליקציית אינטרנט עבור APPLICATION TYPE.
  3. נותנים שם לפרטי הכניסה.
  4. מגדירים את מקורות ה-JAVAScript מוסמכים לכתובת http://localhost:8080
  5. מגדירים את URIS מורשים להפניה מחדש כ-http://localhost:8080/oauth2callback
  6. לוחצים על יצירה.

שלב 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. לוחצים על הלחצן Authorize (אישור) ומאשרים גישה ל-Google Analytics.

לאחר סיום השלבים האלה, הפלט של הדגימה יהיה שם התצוגה המפורטת (הפרופיל) הראשונה של המשתמש המורשה ב-Google Analytics ומספר הסשנים בשבעת הימים האחרונים.

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