إعداد علامة AMP

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

تثبيت

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

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

علامة 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") التي تريد إرسال البيانات إليها:

<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 Analytics، يمكن أيضًا ملاحظته في علامة التبويب "الشبكة" في متصفح الويب. ابحث عن collect request، ويجب أن تحتوي الحمولة على القيمة cid.

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

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

  • يجب أن تحتوي الصفحة المقصودة النهائية على قيمة cid نفسها كما في الصفحة المقصودة الأولية.

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