إعداد علامة 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 نفسه.

تثبيت

لضبط 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. Analytics عند النقر على الزر. استبدِل <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