إعداد العلامات لصفحات AMP

مشروع Accelerated Mobile Pages (AMP) هو نظام أساسي مفتوح المصدر يساعد على تحسين أداء محتوى الويب. وتتضمّن صفحات AMP دعمًا مضمّنًا لعلامة Google و"إدارة العلامات من Google". يصف هذا الدليل كيفية إعداد Google Analytics لصفحات AMP.

تثبيت

تتيح لك علامة Google إمكانية تثبيت "إحصاءات Google" و"إعلانات Google" ومنتجات Google الأخرى على صفحات AMP. تعمل أداة "إدارة العلامات من Google" على إعداد حاوية لصفحات AMP، كما تتيح لك إمكانية إنشاء إعدادات ضبط متقدّمة ونشر علامات الجهات الخارجية من واجهة "إدارة العلامات".

حدد تفضيل النظام الأساسي من الأزرار التالية:

علامة Google

يستخدم تنفيذ AMP لـ gtag.js إطار عمل amp-analytics ليمنحك القدرة على تحليل الإحصاءات على موقعك الإلكتروني بتنسيق AMP. ويمكن إرسال البيانات من صفحات AMP إلى "إعلانات Google" و"إحصاءات Google" ومنتجات Google الأخرى من عملية تنفيذ مقتطف gtag.js نفسه.

تثبيت

لضبط علامة Google (gtag.js) في صفحة AMP، تأكّد أولاً من تضمين المكوّن amp-analytics في العلامة <head> على الصفحة:

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

بعد ذلك، أضِف علامة Google إلى صفحة AMP كمكوِّن JSON ضمن علامة <body> على الصفحة. استبدل <TARGET_ID> بـ معرّف العلامة للمنتجات (على سبيل المثال، إعلانات Google وGoogle Analytics) التي تريد إرسال البيانات إليها:

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

لضبط منتجات متعددة في علامة Google، لن تحتاج إلى تثبيت العلامة بالكامل من هذا المنتج. ما عليك سوى إضافة معرّف الوجهة إلى أمر config منفصل.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

لمزيد من المعلومات، راجع وثائق amp-analytics.

مشغّلات الأحداث

لإرسال بيانات محدّدة إلى منتجاتك، يمكنك ضبط عوامل التشغيل استنادًا إلى أحداث مثل النقرات. تتبع مشغلات gtag.js في AMP أنماط JSON نفسها التي تتبع تهيئات amp-analytics مشغلة أخرى.

يوضح هذا المثال كيفية إرسال حدث click إلى "إحصاءات Google". القيمة selector هي أداة لاختيار لغة CSS تتيح لك تحديد العنصر المستهدف. تحدّد القيمة on نوع الفعالية الذي يكون في هذه الحالة حدثًا click. في القسم vars، حدِّد نوع الحدث في event_name وأضِف معلّمات إضافية عند الضرورة.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

بالإضافة إلى الأحداث المقترَحة، يمكنك تحديد أحداثك المخصّصة.

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

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

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

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

مثال كامل

يوضّح مثال الرمز هذا عرضًا توضيحيًا عاملاً كاملاً لصفحة AMP تعمل على إنشاء صفحة AMP واحدة وتُرسل حدث button-click إلى "إحصاءات Google" عند النقر على الزر. استبدل <TAG_ID> بـ معرّف علامة صالح:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

تحديد المشاكل وحلّها

استخدم amptagtest.appspot.com للتحقق من إعداد وضع العلامات أو يمكنك أن تضمن يدويًا اتساق قيمة cid عبر النطاقات عن طريق إجراء ما يلي:

  • تأكد من محو ملفات تعريف الارتباط أو استخدام وضع التصفح المتخفي.
  • وإذا لم يتم العثور على cid في ملف تعريف ارتباط "إحصاءات Google"، يمكن أيضًا ملاحظته في علامة التبويب "الشبكة" بمتصفح الويب لديك. ابحث عن collect request، ويجب أن تتضمن الحمولة قيمة cid.

  • بعد أن تنتقل من شبكة عرض المحتوى (CDN) في Google إلى موقع ويب العميل، يجب تمرير القيمة cid والقيمة gclid عبر تزيين عنوان URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • من المفترض أن تظل الصفحة المقصودة النهائية بالقيمة cid نفسها كما في الصفحة المقصودة الأولية.

  • انتبه إلى عمليات إعادة التوجيه وتغييرات النطاق بين الصفحة الأساسية والصفحات المقصودة التي ليست بتنسيق AMP.