إضافة "إحصاءات Google" إلى صفحات AMP

Accelerated Mobile Pages (AMP) هو نظام أساسي يُستخدم لإنشاء صفحات ويب للمحتوى الثابت الذي يتم عرضه بسرعة. تحتوي AMP على عنصر <amp-analytics> يتيح قياس تفاعلات المستخدمين، كما أنها تتوافق مع خدمة "إحصاءات Google" المضمَّنة.

الإعداد الأساسي لقياس مشاهدات الصفحة

لإنشاء عملية تثبيت أساسية لخدمة "إحصاءات Google" في صفحة AMP، انسخ مقتطف الرمز هذا واستبدل <GA_MEASUREMENT_ID> برقم تعريف علامة Google. العثور على رقم تعريف علامة Google

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

إرسال البيانات إلى وجهات متعددة

يمكنك إرسال البيانات إلى وجهات متعددة باستخدام علامة <amp-analytics> نفسها، ما عليك سوى إضافة معرّف القياس الجديد <GA_MEASUREMENT_ID_NEW> إلى أمر config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

آلية العمل

العنصر <amp-analytics> هو مكوّن AMP موسَّع ويتم تفعيله بشكلٍ صريح باعتباره custom-element في علامة نص برمجي.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

تم ضبط قالب العنصر <amp-analytics> لتفعيل التوافق مع منتجات القياس من Google. اضبط السمة type في <amp-analytics> على "gtag" (لتفعيل دعم gtag.js) والسمة data-credentials على "تضمين" (لتفعيل ملفات تعريف الارتباط).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

لا تسمح صفحات AMP باستخدام أي رمز JavaScript خارج مكتباتها المعتمَدة، لذا يتم ضبط الإعدادات باستخدام JSON بدلاً من ذلك. تتم إضافة سمة gtag_id تتضمّن <GA_MEASUREMENT_ID> صالحة إلى مجموعة vars، وبعد ذلك تتم إضافة سمة ضبط تتضمّن <GA_MEASUREMENT_ID>: {} كقيمة.

قياس الأحداث

يمكنك استخدام triggers مع قيم محدَّدة لقياس الأحداث في صفحات AMP. تُستخدَم هذه السمات في إعداد مشغِّل:

  • selector: أداة اختيار لغة CSS لتحديد عنصر هدف.
  • on: يحدّد نوع الحدث.
  • vars: حدِّد نوع الحدث في event_name وأضِف مَعلمات إضافية حسب الضرورة.

يوضِّح هذا المثال كيفية إعداد حدث أساسي في "إحصاءات Google". أنشئ مشغِّلًا باسم "button" يتم تنشيطه عند النقر على عنصر يحمل قيمة المعرّف "the-button". سيرسل هذا المشغِّل القيمة event_name لـ "login" وقيمة method لـ "Google" إلى "إحصاءات Google":

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

أحداث "إحصاءات Google" هي فئة من الأحداث المخصّصة لخدمة "إحصاءات Google" وتُستخدم بشكلٍ شائع لإنشاء تقارير عن الحملات. يمكن تحديد هذه القيم في مجموعة vars باستخدام المَعلمات event_category وevent_label وvalue:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

اطّلِع على مستندات amp-analytics لمعرفة المزيد من المعلومات عن ضبط المشغِّل.

تعديل المعلَمات

لإلغاء المَعلمات التلقائية في "إحصاءات Google" أو إضافة مَعلمات جديدة، أضِف القيم المطلوبة إلى قسم parameter في مجموعة config. يلغي هذا المثال القيم التلقائية لمشاهدة الصفحة على الويب والأحداث في page_title وpage_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

يتيح رابط النطاق قياس موقعَين أو أكثر من المواقع الإلكترونية ذات الصلة على نطاقات منفصلة باعتبارهما موقعًا واحدًا. حدِّد النطاقات التي يجب ربطها بالسمة "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

في صفحات AMP التي تم ضبط "إحصاءات Google" عليها، يتم تفعيل إمكانية الربط بنطاقك الأساسي من ذاكرة التخزين المؤقت لصفحات AMP بشكل تلقائي. لإيقاف إمكانية ربط "إحصاءات Google" بزيارات النطاق، أضِف "linker": "false" إلى مَعلمات الضبط:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

سرعة الموقع في Universal Analytics

تم إعداد "إحصاءات Google" لجمع بيانات سرعة الموقع تلقائيًا لنسبة ضئيلة من عدد زيارات موقعك. يمكنك تغيير معدل العينة لجمع المزيد أو أقل من البيانات. لضبط معدل العينة على 100٪، أضف التعليمة البرمجية المميزة إلى التهيئة الخاصة بك:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

لإيقاف جمع بيانات سرعة الموقع، استخدم الرمز المميز:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

الزيارات الواردة من صفحات AMP مقارنةً بالزيارات غير الواردة من صفحات AMP

تستخدم زيارات AMP تلقائيًا معرِّفات عملاء مختلفة عن تلك التي تخص زيارات الويب. يتم تحميل صفحات AMP بشكل أسرع وتعرض أنماط زيارات مختلفة عن نظيراتها العادية لصفحات الويب، ما قد يعني غالبًا أنك ستحصل على مقاييس مختلفة بين الزيارات الواردة من AMP وتلك التي ليست بتنسيق AMP.

يسمح استخدام موقع منفصل لقياس زيارات AMP بتحليل أفضل للمقاييس وصورة أكثر دقة لزياراتك. للتمييز بين زيارات AMP وتلك التي ليست بتنسيق AMP إذا كنت تحتاج إلى استخدام موقع واحد:

  • استخدِم سمة مصدر البيانات أو سمة مخصَّصة (Universal Analytics).
  • استخدِم مَعلمة حدث مخصّص ("إحصاءات Google 4").

تصحيح أخطاء الضبط

يمكن استخدام أداة التحقّق من صحة صفحات AMP لتحديد ما إذا كانت صفحة ويب لا تستوفي مواصفات رمز HTML لصفحات AMP أم لا. أضِف #development=1 إلى عنوان URL لإحدى الصفحات لتفعيل أداة التحقّق.

تقدّم الإضافة amp-analytics رسائل تحذيرية ورسائل خطأ للمساعدة في تصحيح أخطاء الإعداد وتحديد المشاكل فيها وحلّها. أضِف #log=1 إلى عنوان URL لصفحة ما للاطّلاع على رسائل الخطأ التي تم تسجيلها في وحدة التحكّم بمتصفّح الويب.

مثال كامل

يوضح هذا المثال صفحة AMP كاملة تحتوي على زر واحد على الصفحة. ستُرسِل هذه الإعدادات بيانات مشاهدة الصفحة العادية وأحداث "النقر على الزر" إلى "إحصاءات Google":

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>