1. قبل البدء
في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية قياس "مؤشرات أداء الويب الأساسية" باستخدام نموذج علامات إدارة العلامات من Google (GTM) الذي تم إنشاؤه مسبقًا وإرسال البيانات إلى موقع على إحصاءات Google 4. ستتعرَّف أيضًا على كيفية سحب البيانات من مدير إعلانات Google وGoogle AdSense إلى "إحصاءات Google 4"، من أجل ربط بيانات حقول "مؤشرات أداء الويب الأساسية" ومقاييس أداء الإعلانات بلوحة بيانات سابقة الإعداد في Looker Studio.
الإجراءات التي ستنفذّها
- عليك استيراد علامة وإعدادها في حاوية أداة "إدارة العلامات من Google".
- قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب في "إحصاءات Google 4"
- عليك إعداد علامة حدث "إحصاءات Google 4" في أداة "إدارة العلامات من Google".
- استكشِف بيانات "مؤشرات أداء الويب" في تقارير
dataLayer
وفي تقارير "إحصاءات Google 4". - ربط موقعك على "إحصاءات Google 4" بحساب "مدير إعلانات Google" وGoogle AdSense
- ربط "مؤشرات أداء الويب الأساسية" وأرباح الإعلانات من خلال لوحة بيانات Looker Studio
المتطلبات
- حساب على "إحصاءات Google" وموقع إلكتروني على "إحصاءات Google 4" مع إذن تعديل.
- حساب على أداة "إدارة العلامات من Google" وحاوية ويب مع حقوق النشر
- شبكة "مدير إعلانات Google" و/أو حساب على Google AdSense لديه إذن وصول إداري.
- حساب على Looker Studio
2. إضافة نموذج العلامة من GitHub إلى GTM
يستند قياس "مؤشرات أداء الويب الأساسية" من خلال نموذج علامات "إدارة العلامات من Google" إلى مكتبة web-vitals
. سنُنزِّل أولاً نموذج علامة "إدارة العلامات من Google".
- افتح ملف template.tpl
- تنزيل الملف من الكمبيوتر
الآن، انتقِل إلى حسابك على أداة "إدارة العلامات من Google".
- افتح حاوية الويب.
- أنشِئ مساحة عمل جديدة وأدخِل اسمًا (مثل "قياس مؤشرات أداء الويب الأساسية").
- انتقِل إلى "النماذج".
- في "نماذج العلامات" انقر على زر "جديد" .
- انقر على قائمة "إجراءات إضافية" وحدد "استيراد".
- اختَر ملف TPL الذي سبق لك تنزيله من جهاز الكمبيوتر.
- انقر على الزر "حفظ".
لقد أضفت نموذج العلامة إلى حاويتك على أداة "إدارة العلامات من Google".
3- إعداد علامة "مؤشرات أداء الويب"
- في مساحة عمل أداة "إدارة العلامات من Google"، انتقِل إلى "العلامات".
- إضافة علامة "مؤشرات أداء الويب" من خلال النقر على "جديد"، ثم على "إعداد العلامة" واختَر "مؤشرات أداء الويب" من علامة "مخصَّصة" .
- الخطوة التالية هي ضبط الإعدادات المختلفة. ستجد شرحًا لجميع الإعدادات في مستودع جيت هب. يكفي استخدام الإعدادات التالية في هذا الدرس التطبيقي حول الترميز ولوحة البيانات النهائية.
- تطبيق أحد مشغلات مشاهدة الصفحة على الويب، على سبيل المثال: "جميع الصفحات" .
- أضِف أيضًا سبب الاستثناءات إذا لزم الأمر.
- يجب تسمية العلامة باسم "مؤشرات أداء الويب الأساسية - جميع الصفحات". واحفظه.
4. استكشاف بيانات "مؤشرات أداء الويب" في dataLayer
للاطّلاع على العلامة أثناء تنفيذها، يمكنك التبديل إلى وضع المعاينة في أداة "إدارة العلامات من Google". سيتم فتح Tag Assistant وستطلب عنوان URL لمعاينة الإعداد وتصحيح الأخطاء. قدِّم عنوان URL يؤدي إلى صفحة تم تنفيذ حاوية أداة "إدارة العلامات من Google" عليها، ثم انقر على "ربط". ستفتح علامة تبويب منفصلة تتضمّن عنوان URL المقدَّم.
- تفاعل مع الصفحة من خلال التمرير والنقر على العناصر أو المسافات البيضاء.
- بعد ذلك، ارجع إلى علامة التبويب التي تستخدم Tag Assistant ووضع المعاينة في أداة "إدارة العلامات من Google".
- على يمين الصفحة، ستظهر لك الأحداث المختلفة التي تم دفعها إلى
dataLayer
. - عليك أولاً التحقّق مما إذا تم تنشيط علامة "مؤشرات أداء الويب" عند تشغيل علامة مشاهدة الصفحة على الويب التي اخترتها.
- يجب أن ترى أيضًا ثلاث من "web_vitals" الأحداث، حيث يمثّل كلٌّ منها أحد مؤشرات أداء الويب الأساسية، وهي: LCP وINP وCLS.
- انقر على الأول وعلى اليمين افتح "طلب بيانات من واجهة برمجة التطبيقات" حيث سترى البيانات المُرسَلة من نموذج العلامة إلى
dataLayer
.
- راجع أيضًا الإدخالات الأخرى في "web_vitals" أحداث. استخدِم المستندات في
web-vitals.js
كمرجع لأنواع البيانات المختلفة.
5- إرسال بيانات "مؤشرات أداء الويب" إلى "إحصاءات Google 4"
لسحب بيانات "مؤشرات أداء الويب الأساسية" من dataLayer
وإرسالها إلى "إحصاءات Google 4"، عليك إجراء ما يلي:
- إنشاء عامل تشغيل لعلامة "إحصاءات Google 4"
- أنشِئ متغيّرات لسحب البيانات من "
dataLayer
". - إنشاء علامة حدث "إحصاءات Google 4"
إنشاء عامل التفعيل
- في مساحة عمل "إدارة العلامات من Google"، انتقِل إلى "العوامل المشغِّلة".
- إضافة عامل تشغيل جديد بالنقر على "جديد"، ثم على "إعداد المشغِّل" واختَر "حدث مخصّص". من "الحالات الأخرى" .
- ضبط "web_vitals" في الحقل "اسم الحدث" (اسم الحدث)، قم بتسمية المشغل واحفظه.
إنشاء متغيّرات dataLayer
- في مساحة عمل أداة "إدارة العلامات من Google"، انتقِل إلى "المتغيّرات".
- أنشِئ متغيّرًا جديدًا من تحديد المستخدم من النوع "متغيّر طبقة البيانات".
- ضبط "webVitalsData.name" في حقل اسم متغير طبقة البيانات، قم بتسمية المتغير (على سبيل المثال، "DLV - webVitalsData.name") واحفظه.
- كرِّر هذه الخطوات لمتغيرات طبقة البيانات الأربعة الأخرى المطلوبة. إنشاء "webVitalsData.value".
- أنشئ متغيرًا آخر باستخدام حقل الاسم "webVitalsData.id".
- إنشاء "webVitalsData.rating".
- أنشئ "webVitalsData.delta".
- من المفترض أن ينتهي بك الأمر بمتغيّرات
dataLayer
التالية التي يحدّدها المستخدم:
إنشاء علامة حدث "إحصاءات Google 4"
قبل إنشاء علامة حدث "إحصاءات Google 4"، تأكّد من أنّ علامة Google سبق أن تم إعدادها.
- في مساحة عمل أداة "إدارة العلامات من Google"، انتقِل إلى "العلامات".
- أضِف علامة حدث "إحصاءات Google 4" عن طريق النقر على "جديد"، ثمّ "ضبط العلامة". واختَر "إحصاءات Google: حدث إحصاءات Google 4" من "إحصاءات Google" .
- أدخِل رقم تعريف القياس في الحقل المقابل.
- بالنسبة إلى "اسم الحدث" حقل إدخال، اختَر المتغيّر
dataLayer
"DLV - webVitalsData.name". من خطوة تم إنشاؤها سابقًا
- أضِف متغيّرات
dataLayer
الأخرى كمَعلمات للحدث كما هو موضّح في لقطة الشاشة. ويجب التأكّد أيضًا من إضافة المَعلمة event_category. بقيمة مثل "مؤشرات أداء الويب" لتجميع أحداث Core Web Vitals.
- سجِّل مَعلمات الأحداث هذه كسمات مخصّصة في واجهة مستخدم "إحصاءات Google 4".
- طبِّق إعدادات إضافية استنادًا إلى متطلبات إعداد "إحصاءات Google 4".
- ضبط "web_vitals" حدث مخصّص كعامل تشغيل لعلامة "إحصاءات Google 4".
- أضِف أيضًا سبب الاستثناءات إذا لزم الأمر.
6- الاطّلاع على البيانات في "إحصاءات Google 4"
للتحقّق من صحة تدفق البيانات إلى "إحصاءات Google 4"، عليك التبديل مرة أخرى إلى وضع المعاينة في أداة "إدارة العلامات من Google". أدخِل عنوان URL إلى Tag Assistant، ثم انقر على "ربط".
- تفاعل مع الصفحة من خلال التمرير والنقر على العناصر أو المسافات البيضاء.
- بعد ذلك، ارجع إلى علامة التبويب التي تستخدم Tag Assistant ووضع المعاينة في أداة "إدارة العلامات من Google".
- على يمين الصفحة، انقر على كل من "web_vitals" المدخلات والتأكُّد من تنشيط علامة "مؤشرات أداء الويب الأساسية" في "إحصاءات Google 4"
- افتح علامة "إحصاءات Google 4" من خلال النقر على البطاقة للتحقّق من أنّه تم سحب البيانات بشكل صحيح من
dataLayer
. تأكَّد من عرض المتغيّرات كقيم.
- انتقِل الآن إلى موقعك على "إحصاءات Google 4" وافتح تقرير "الوقت الفعلي".
- في "عدد الأحداث حسب اسم الحدث" التي يمكنك التحقّق منها إذا تم جمع أحداث "مؤشرات أداء الويب الأساسية" بنجاح.
- إذا تمت معالجة كمية كبيرة من البيانات في تقرير الوقت الفعلي، فمن المحتمل ألا يكون من السهل التعرف على الأحداث. وفي هذه الحالة، استخدِم تقرير تصحيح الأخطاء الذي يتيح لك الاطّلاع على بيانات جهاز معيّن.
7. نشر الإعداد
بعد اختبار الإعداد بنجاح، يحين وقت نشر مساحة العمل.
- افتح مساحة عمل "إدارة العلامات من Google".
- في أعلى يسار واجهة المستخدم، انقر على "إرسال".
- أدخِل اسم الإصدار ووصفًا للإصدار واضبط الإعداد على "نشر" من خلال النقر على "نشر".
8. ربط "إحصاءات Google 4" بحساب "مدير إعلانات Google" أو Google AdSense
بعد جمع بيانات "مؤشرات أداء الويب الأساسية" في "إحصاءات Google 4"، يجب أيضًا أن تكون المقاييس المرتبطة بالإعلانات متاحة في "إحصاءات Google 4" كي تعمل لوحة البيانات. يمكنك ربط "مدير إعلانات Google" وGoogle AdSense بخدمة "إحصاءات Google 4" أو حلّ واحد فقط من هذين الحلَّين الإعلانيَين. تجدُر الإشارة إلى أنّه يجب أن يكون لديك إذن تعديل (أو إذن أعلى) في "إحصاءات Google 4" وإذن المشرف في "مدير إعلانات Google" وGoogle AdSense لإجراء عملية الربط.
ربط "إحصاءات Google 4" بحساب "مدير إعلانات Google"
- انتقِل إلى شبكة "مدير إعلانات Google".
- انقر على "المشرف" -> "إعدادات عامة" -> "إعدادات الشبكة".
- في "إعدادات التقرير" فعِّل "تقارير موقع "إحصاءات Google 4" في تقارير "مدير إعلانات Google".
- راجِع الأحكام والشروط وانقر على "تأكيد".
- احفظ التحديث.
- الانتقال إلى "المشرف" -> "الحسابات المرتبطة" -> "إحصاءات Google 4".
- انقر على "رابط موقع إحصاءات Google 4 الجديد".
- ابحث عن موقعك على "إحصاءات Google 4" الذي تريد ربطه واختَره.
- انقر على "حفظ" وبذلك تنتهي الخطوات.
ربط "إحصاءات Google 4" بحساب Google AdSense
- انتقِل إلى حسابك على Google AdSense.
- انقر على "الحساب". -> "الوصول والترخيص" -> "دمج "إحصاءات Google""
- انقر على "+رابط جديد".
- ابحث عن موقعك على "إحصاءات Google 4" الذي تريد ربطه واختَره.
- انقر على "إنشاء رابط".
9. عرض البيانات بشكل مرئي باستخدام Looker Studio
للحصول على عرض مرئي لبيانات "مؤشرات أداء الويب الأساسية" مع مقاييس الإعلانات، تتطلّب هذه الخطوة إعداد لوحة بيانات Looker Studio. يُرجى اتّباع هذه الخطوات لربط مؤشرات Core Web Vitals وأرباح الإعلانات.
- افتح نموذج لوحة بيانات Looker Studio هذا.
- انسخ لوحة البيانات.
- عدِّل مصدر البيانات عن طريق اختيار موقعك على "إحصاءات Google 4" من القائمة المنسدلة.
- تم
يرجى ملاحظة أنه لكي تعمل لوحة المعلومات وتعرض البيانات بشكل صحيح، تعتمد البيانات على اصطلاح بناء الجملة والتسمية من هذا الدرس التطبيقي حول الترميز.
ستعرض لك الصفحة الأولى من لوحة البيانات عرضًا سابقًا لأداء مؤشرات Core Web Vitals:
في الصفحة الثانية، يمكنك ربط "مؤشرات أداء الويب الأساسية" بأرباح الإعلانات المحقّقة من "مدير إعلانات Google" و/أو Google AdSense:
تمنحك الصفحة الثالثة إمكانية تحليل أداء "مؤشرات أداء الويب الأساسية" على مستوى مسار الصفحة إلى جانب المقاييس المرتبطة بالإعلانات:
10. الخاتمة
تهانينا! لقد تعرَّفت على كيفية قياس "مؤشرات أداء الويب الأساسية" والإبلاغ عنها من خلال "إحصاءات Google 4" ومقاييس أداء الإعلانات من "مدير إعلانات Google" وGoogle AdSense.