إعداد علامة AMP

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

تثبيت

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

يمكنك اختيار الإعدادات المفضّلة للنظام الأساسي من خلال الأزرار التالية:

علامة Google

في إطار تنفيذ 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") التي تريد إرسال البيانات إليها:

<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.