مشروع 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.