بناء "Dashboard" تفاعلي لبيانات الموقع باستخدام Google Looker Studio

ماذا سنبني اليوم؟

سنتعلم اليوم كيفية بناء لوحة تحكم (Dashboard) تفاعلية ومرنة لبيانات موقعك الإلكتروني باستخدام Google Looker Studio (المعروف سابقًا بـ Google Data Studio). سنقوم بإنشاء مصدر بيانات مخصص في Google Sheets، ثم نستخدم Google Apps Script لجلب وتحديث بيانات موقعك (مثل بيانات Google Analytics) تلقائيًا إلى هذا المصدر. أخيرًا، سنربط Looker Studio بـ Google Sheets لتصميم لوحة تحكم تعرض مؤشرات الأداء الرئيسية (KPIs) بشكل مرئي وتفاعلي.

المتطلبات الأساسية

  • حساب Google نشط مع إمكانية الوصول إلى Google Sheets و Google Apps Script.
  • إمكانية الوصول إلى حساب Google Analytics الخاص بموقعك (إذا كنت ستجلب البيانات منه).
  • (اختياري) إمكانية الوصول إلى Google Search Console (إذا كنت ترغب في دمج بياناته لاحقًا).

الخطوة 1: إعداد مصدر البيانات في Google Sheets

سنبدأ بإنشاء جدول بيانات Google جديد سيحتوي على البيانات التي سيتم عرضها في لوحة التحكم.

  1. انتقل إلى Google Sheets وأنشئ جدول بيانات جديدًا.
  2. أعد تسمية الورقة الأولى (Sheet1) إلى WebsiteData.
  3. في الصف الأول من ورقة WebsiteData، أضف رؤوس الأعمدة التالية: Date, PagePath, PageViews, Sessions. هذه الأعمدة ستستقبل البيانات من Google Analytics.

ملاحظة تقنية: استخدام Google Sheets كمصدر وسيط يمنحك مرونة كبيرة. يمكنك دمج بيانات من مصادر متعددة، تطبيق عمليات حسابية معقدة قبل عرضها في Looker Studio، أو حتى الاحتفاظ بسجل تاريخي للبيانات بطريقة منظمة.

الخطوة 2: جلب بيانات الموقع باستخدام Google Apps Script

سنستخدم Google Apps Script لجلب بيانات Google Analytics وتعبئة جدول البيانات WebsiteData تلقائيًا. هذا سيمكننا من تحديث البيانات بانتظام دون تدخل يدوي.

  1. افتح جدول بيانات Google الذي أنشأته في الخطوة 1.
  2. انتقل إلى Extensions (الإضافات) > Apps Script (برمجة تطبيقات). سيتم فتح محرر Apps Script في علامة تبويب جديدة.
  3. احذف الكود الافتراضي (function myFunction() { }) والصق الكود التالي:
function fetchDataFromGoogleAnalytics() {
  const SPREADSHEET_ID = SpreadsheetApp.getActiveSpreadsheet().getId();
  const SHEET_NAME = 'WebsiteData';
  const ANALYTICS_VIEW_ID = 'YOUR_ANALYTICS_VIEW_ID'; // استبدل بمعرف ملفك الشخصي في Google Analytics

  const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = spreadsheet.getSheetByName(SHEET_NAME);

  if (!sheet) {
    Logger.log('Sheet ' + SHEET_NAME + ' not found.');
    return;
  }

  // تحديد نطاق التاريخ (آخر 30 يومًا)
  const today = new Date();
  const thirtyDaysAgo = new Date();
  thirtyDaysAgo.setDate(today.getDate() - 30);

  const startDate = Utilities.formatDate(thirtyDaysAgo, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  const endDate = Utilities.formatDate(today, Session.getScriptTimeZone(), 'yyyy-MM-dd');

  Logger.log('Fetching data for dates: ' + startDate + ' to ' + endDate);

  try {
    // جلب البيانات من Google Analytics
    const report = Analytics.Data.Ga.get(
      ANALYTICS_VIEW_ID,
      startDate,
      endDate,
      'ga:pageviews,ga:sessions',
      {
        'dimensions': 'ga:date,ga:pagePath',
        'sort': 'ga:date'
      }
    );

    if (report && report.rows) {
      // حذف البيانات القديمة مع الاحتفاظ بالصف الأول (رؤوس الأعمدة)
      if (sheet.getLastRow() > 1) {
        sheet.deleteRows(2, sheet.getLastRow() - 1);
      }

      const data = report.rows.map(row => {
        // تحويل التاريخ من YYYYMMDD إلى YYYY-MM-DD
        const dateStr = row[0];
        const formattedDate = dateStr.substring(0, 4) + '-' + dateStr.substring(4, 6) + '-' + dateStr.substring(6, 8);
        return [formattedDate, row[1], parseInt(row[2]), parseInt(row[3])];
      });

      // كتابة البيانات الجديدة في الشيت بدءًا من الصف الثاني
      sheet.getRange(2, 1, data.length, data[0].length).setValues(data);
      Logger.log('Data successfully fetched and updated in ' + SHEET_NAME + '. Rows added: ' + data.length);
    } else {
      Logger.log('No data found in Google Analytics for the specified period.');
    }
  } catch (e) {
    Logger.log('Error fetching data from Google Analytics: ' + e.toString());
  }
}

function setupTrigger() {
  // حذف أي مشغلات (Triggers) موجودة مسبقًا لتجنب التكرار
  const triggers = ScriptApp.getProjectTriggers();
  for (const trigger of triggers) {
    if (trigger.getHandlerFunction() === 'fetchDataFromGoogleAnalytics') {
      ScriptApp.deleteTrigger(trigger);
    }
  }

  // إنشاء مشغل جديد لتشغيل الدالة يوميًا في وقت معين (مثل 3 صباحًا)
  ScriptApp.newTrigger('fetchDataFromGoogleAnalytics')
      .timeBased()
      .everyDays(1)
      .atHour(3) // يمكنك تغيير الساعة حسب حاجتك
      .create();

  Logger.log('Daily trigger for fetchDataFromGoogleAnalytics has been set up.');
}
  1. تفعيل Google Analytics API: في محرر Apps Script، انقر على Services (الخدمات) في الشريط الجانبي الأيسر. ابحث عن Google Analytics API واضغط على Add (إضافة). تأكد من تفعيلها.
  2. تعديل ANALYTICS_VIEW_ID: استبدل 'YOUR_ANALYTICS_VIEW_ID' بمعرف ملفك الشخصي (View ID) في Google Analytics. يمكنك العثور عليه في GA ضمن Admin (المسؤول) > View Settings (إعدادات الملف الشخصي).
  3. تشغيل الدالة لأول مرة:
    • احفظ المشروع (Ctrl+S أو File > Save project).
    • في شريط الأدوات العلوي، حدد الدالة fetchDataFromGoogleAnalytics من القائمة المنسدلة.
    • اضغط على زر Run (تشغيل).
    • سيطلب منك Google الإذن للوصول إلى بيانات Google Analytics وجدول البيانات الخاص بك. امنح الأذونات اللازمة.
    • بعد التشغيل الناجح، يجب أن ترى البيانات تظهر في ورقة WebsiteData.
  4. إعداد مشغل التحديث التلقائي:
    • في شريط الأدوات العلوي، حدد الدالة setupTrigger من القائمة المنسدلة.
    • اضغط على زر Run (تشغيل). سيقوم هذا بإنشاء مشغل لتشغيل الدالة fetchDataFromGoogleAnalytics يوميًا في الساعة 3 صباحًا.
    • يمكنك التحقق من المشغلات الخاصة بك بالانتقال إلى أيقونة الساعة (Triggers) في الشريط الجانبي الأيسر لمحرر Apps Script.

ملاحظة تقنية: عند تشغيل السكربت لأول مرة، قد تظهر لك رسالة تحذير "This app isn't verified". اختر "Go to (project name) (unsafe)" ثم "Allow" للمتابعة. هذا طبيعي عند استخدام سكربتات Google Apps Script مخصصة.

الخطوة 3: ربط Google Looker Studio بـ Google Sheets

الآن بعد أن أصبح لدينا مصدر بيانات محدث في Google Sheets، حان الوقت لربطه بـ Looker Studio.

  1. انتقل إلى Google Looker Studio.
  2. انقر على Create (إنشاء) > Report (تقرير).
  3. في شاشة "Add data to report" (إضافة بيانات إلى التقرير)، ابحث عن Google Sheets واختره.
  4. اختر جدول البيانات الخاص بك (الذي يحتوي على ورقة WebsiteData).
  5. حدد ورقة WebsiteData. تأكد من تحديد "Use first row as headers" (استخدام الصف الأول كرؤوس) و "Include hidden and filtered cells" (تضمين الخلايا المخفية والمصفاة).
  6. انقر على Add (إضافة) ثم Add to report (إضافة إلى التقرير).

ملاحظة تقنية: سيقوم Looker Studio تلقائيًا باكتشاف أنواع البيانات (تاريخ، نص، رقم) لأعمدتك. يمكنك مراجعة وتعديل هذه الأنواع في "Resource" (المصدر) > "Manage added data sources" (إدارة مصادر البيانات المضافة) > "Edit" (تعديل) إذا لزم الأمر.

الخطوة 4: تصميم لوحة التحكم التفاعلية

الآن يمكنك البدء في تصميم لوحة التحكم الخاصة بك باستخدام البيانات من Google Sheets.

  1. إضافة مخطط زمني (Time series chart):
    • انقر على Add a chart (إضافة مخطط) في شريط الأدوات واختر Time series chart.
    • اسحب الأبعاد (Dimensions) والمقاييس (Metrics) المناسبة: اجعل Date هو Dimension (البعد الزمني)، و PageViews أو Sessions هي Metrics (المقاييس).
  2. إضافة جدول (Table):
    • اختر Table من Add a chart.
    • أضف PagePath كـ Dimension و PageViews و Sessions كـ Metrics لعرض أداء الصفحات الفردية.
    • يمكنك فرز الجدول حسب عدد المشاهدات تنازليًا.
  3. إضافة بطاقات النتائج (Scorecards):
    • استخدم Scorecard لعرض إجمالي PageViews و Sessions للمدة المحددة.
  4. إضافة عناصر تحكم التصفية (Filter controls):
    • انقر على Add a control (إضافة عنصر تحكم) > Date range control (عنصر تحكم نطاق التاريخ) للسماح للمستخدمين بتحديد الفترة الزمنية للبيانات.
    • أضف Filter control (عنصر تحكم التصفية) بناءً على PagePath للسماح بالتصفية حسب صفحات محددة.
  5. التخصيص والتصميم:
    • استخدم خيارات التنسيق (Style tab) لتغيير الألوان والخطوط وإضافة شعار شركتك.
    • أعد ترتيب المخططات والعناصر لتصميم لوحة تحكم جذابة وسهلة القراءة.

النتيجة النهائية المتوقعة

بعد إكمال هذه الخطوات، سيكون لديك لوحة تحكم تفاعلية في Google Looker Studio تعرض بيانات موقعك الإلكتروني. ستقوم لوحة التحكم هذه تلقائيًا بتحديث بياناتها يوميًا من Google Sheets، والذي بدوره يتم تحديثه بواسطة Google Apps Script من Google Analytics. ستتمكن من تصفية البيانات حسب التاريخ والصفحة، وتصور الاتجاهات، ومراقبة أداء موقعك بسهولة وفعالية. ستكون لديك أداة قوية لاتخاذ قرارات مستنيرة لتحسين أداء موقعك وتحسين جهود الـ SEO.

مقالات ذات صلة قد تهمك: