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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

لإنشاء عملية تثبيت أساسية في"إحصاءات Google"على صفحة AMP، انسخ مقتطف الرمز هذا واستبدل <GA_MEASUREMENT_ID> برقم تعريف الموقع الذي تريد استخدامه. (ابحث عن رقم تعريف "إحصاءات 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> هو مكوّن 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". إنشاء عامل مشغِّل اسمه "زر" سيتم تشغيله عند النقر على عنصر يحمل قيمة معرِّف "الزر" سيرسل هذا المشغِّل قيمة 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"ويتم استخدامها عادةً لإنشاء تقارير عن الحملات. يمكن تحديد القيم التالية في مجموعة الصيغ باستخدام المَعلمات 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>

سرعة الموقع

تم ضبط "إحصاءات 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 والصفحات الأخرى، يمكنك استخدام سمة مصدر البيانات أو سمة مخصّصة للتمييز بينهما.

بشكلٍ تلقائي، سترسل "إحصاءات Google" القيمة "AMP&quot: عبر مكوّن مصدر البيانات. يمكنك استخدام هذه القيمة لتقسيم محتوى AMP أو فلترته أو تحليله بطريقة أخرى بخلاف محتوى AMP في ملف شخصي واحد.

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

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

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

مثال كامل

يوضح هذا المثال صفحة كاملة من صفحات AMP باستخدام زر واحد في الصفحة. سيرسل هذا الإعداد بيانات مشاهدة الصفحة العادية والأحداث "&button-click-click&quot إلى "إحصاءات 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>