إعداد علامة AMP

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

تثبيت

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

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

علامة التتبُّع من Google

يستخدم تنفيذ gtag.js في صفحات AMP إطار عمل 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"
    }
  }
}

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

إرسال سمات ومَعلمات مخصّصة باستخدام "إحصاءات Google"

لإرسال سمات ومقاييس مخصّصة إلى "إحصاءات Google" من صفحات AMP باستخدام gtag.js، يمكنك الاستفادة من السمة extraUrlParams ضِمن إعدادات المشغّلات في JSON الخاص بـ <amp-analytics>. يتم إرسال المَعلمات المخصّصة في "إحصاءات Google" كمَعلمات أحداث.

  • استخدِم البادئة ep. لمَعلمات الأحداث ذات القيم النصية.
  • استخدِم البادئة epn. لمَعلمات الأحداث ذات القيم الرقمية.

قبل الإرسال، تأكَّد من تسجيل هذه السمات والمقاييس المخصّصة ضِمن موقعك على "إحصاءات Google".

مثال: معلمات مخصّصة مع مشاهدة صفحة على الويب

يرسل هذا الإعداد سمة مخصّصة my_custom_dimension ومقياسًا مخصّصًا my_page_score مع مشاهدة الصفحة الأولية:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

مثال: مَعلمات مخصّصة مع حدث ناتج عن النقر

يرسل هذا الإعداد مَعلمات مخصّصة عند النقر على عنصر يحمل رقم التعريف myButton:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

تتيح أداة ربط النطاقات قياس موقعَين إلكترونيَين أو أكثر من المواقع الإلكترونية ذات الصلة على نطاقات منفصلة كوحدة واحدة. لتحديد النطاقات التي يجب ربطها، استخدِم "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>

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

استخدِم validator.amp.dev للتحقّق من صحة إعدادات وضع العلامات، أو يمكنك التأكّد يدويًا من أنّ قيمة cid متّسقة على جميع النطاقات من خلال اتّباع الخطوات التالية:

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

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

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

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

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