إضافة "إحصاءات 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" وتُستخدَم بشكل شائع لإنشاء تقارير عن الحملات. يمكن تحديد هذه القيم في مجموعة المتغيرات باستخدام المعلَمات 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 والصفحات الأخرى إذا كنت بحاجة إلى استخدام موقع واحد:

  • استخدِم سمة مصدر البيانات أو سمة مخصّصة (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>