قياس بيانات حقول "مؤشرات أداء الويب الأساسية" باستخدام مقاييس الإعلانات

1- قبل البدء

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية قياس Core Web Vitals باستخدام نموذج علامات التتبُّع تم إنشاؤه مسبقًا في أداة Google Tag Manager (GTM) وإرسال البيانات إلى موقع على إحصاءات Google‏ 4 (GA4). ستتعرّف أيضًا على كيفية سحب البيانات من إدارة إعلانات Google وGoogle AdSense إلى "إحصاءات Google‏ 4"، من أجل ربط البيانات الفعلية لمؤشرات أداء الويب الأساسية ومقاييس أداء الإعلانات بلوحة بيانات تم إنشاؤها مسبقًا في Looker Studio.

الإجراءات التي ستنفذّها

• استيراد علامة وإعدادها في حاوية Google Tag Manager
• قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب في "إحصاءات Google‏ 4"
• إعداد علامة حدث في "إحصاءات Google‏ 4" في أداة "إدارة العلامات من Google"
• استكشاف بيانات "مؤشرات أداء الويب" في dataLayer وفي تقارير "إحصاءات Google‏ 4"
• ربط موقع "إحصاءات Google‏ 4" بحساب "مدير إعلانات Google" وGoogle AdSense
• ربط "مؤشرات أداء الويب الأساسية" وإيرادات الإعلانات من خلال لوحة بيانات في Looker Studio

المتطلبات

• حساب على "إحصاءات Google" وموقع على "إحصاءات Google‏ 4" على الويب مع إذن وصول بصفة محرّر
• حساب على Google Tag Manager وحاوية ويب مع حقوق النشر
• شبكة "إدارة إعلانات Google" و/أو حساب على Google AdSense مع إذن وصول إداري
• حساب على Looker Studio

2. إضافة نموذج علامات التتبُّع من GitHub إلى "إدارة العلامات من Google"

يعتمد قياس "مؤشرات أداء الويب الأساسية" من خلال نموذج علامات التتبُّع في "إدارة العلامات من Google" على web-vitals مكتبة. أولاً، سننزِّل نموذج علامات التتبُّع في "إدارة العلامات من Google".

1. افتح ملف template.tpl
2. نزِّل الملف على جهاز الكمبيوتر

الآن، انتقِل إلى حسابك على "إدارة العلامات من Google".

1. افتح حاوية الويب.
2. أنشئ مساحة عمل جديدة وأدخِل اسمًا (مثل "قياس Core Web Vitals").
3. انتقِل إلى "النماذج".
4. في قسم "نماذج العلامات"، انقر على الزر "جديد".

5. انقر على قائمة "مزيد من الإجراءات" واختَر "استيراد".

6. اختَر ملف TPL الذي نزّلته سابقًا من جهاز الكمبيوتر.
7. انقر على الزر "حفظ".

لقد أضفت نموذج علامات التتبُّع إلى حاويتك في Google Tag Manager.

3- إعداد علامة Web Vitals

1. في مساحة عملك في Google Tag Manager، انتقِل إلى "العلامات".
2. أضِف علامة Web Vitals من خلال النقر على "جديد"، ثم على "إعدادات العلامة" واختَر علامة Web Vitals من قسم "مخصّص".
3. الخطوة التالية هي ضبط الإعدادات المختلفة. تم توضيح جميع الإعدادات في مستودع GitHub. لإنجاح هذا الدرس التطبيقي ولوحة البيانات النهائية، تكفي الإعدادات التالية.

4. طبِّق أحد مشغّلات مشاهدة صفحة على الويب، مثل مشغّل "جميع الصفحات".
5. أضِف أيضًا استثناءات المشغّلات إذا لزم الأمر.
6. أطلِق على العلامة الاسم "Core Web Vitals - جميع الصفحات" واحفظها.

4. استكشاف بيانات Web Vitals في `dataLayer`

لمشاهدة العلامة أثناء العمل، انتقِل إلى وضع المعاينة في Google Tag Manager. سيتم فتح Tag Assistant وسيطلب عنوان URL لمعاينة إعدادك وتصحيح أخطائه. قدِّم عنوان URL لصفحة تم فيها تنفيذ حاوية Google Tag Manager وانقر على "ربط". سيتم فتح علامة تبويب منفصلة بعنوان URL المقدَّم.

1. تفاعَل مع الصفحة من خلال التمرير والنقر على العناصر أو المساحات البيضاء.
2. بعد ذلك، ارجع إلى علامة التبويب التي تحتوي على Tag Assistant ووضع المعاينة في Google Tag Manager.
3. على يمين الصفحة، ستظهر لك الأحداث المختلفة التي تم إرسالها إلى dataLayer.
4. عليك أولاً التحقّق مما إذا تم تنشيط علامة Web Vitals على مشغّل مشاهدة صفحة على الويب الذي اخترته.

5. من المفترض أن تظهر لك أيضًا ثلاثة أحداث "web_vitals"، يمثّل كل منها أحد "مؤشرات أداء الويب الأساسية": LCP وINP وCLS.

6. انقر على الحدث الأول وافتح علامة التبويب "طلب بيانات من واجهة برمجة التطبيقات" على يسار الصفحة، حيث ستظهر لك البيانات التي تم إرسالها من نموذج علامات التتبُّع إلى dataLayer.

7. تحقَّق أيضًا من الإدخالات الأخرى لأحداث "web_vitals". استخدِم web-vitals.js مستندات كمرجع لأنواع البيانات المختلفة.

5. إرسال بيانات Web Vitals إلى إحصاءات Google‏ 4

لسحب بيانات "مؤشرات أداء الويب الأساسية" من dataLayer وإرسالها إلى "إحصاءات Google‏ 4"، عليك:

• إنشاء مشغّل لعلامة "إحصاءات Google‏ 4"
• إنشاء متغيّرات لسحب البيانات من dataLayer
• إنشاء علامة حدث في "إحصاءات Google‏ 4"

إنشاء المشغّل

1. في مساحة عملك في Google Tag Manager، انتقِل إلى "المشغّلات".
2. أضِف مشغّلاً جديدًا من خلال النقر على "جديد"، ثم على "إعدادات المشغّل" واختَر "حدث مخصّص" من قسم "أخرى".
3. اضبط "web_vitals" في حقل "اسم الحدث"، وأطلِق اسمًا على المشغّل واحفظه.

إنشاء متغيّرات `dataLayer`

1. في مساحة عملك في Google Tag Manager، انتقِل إلى "المتغيّرات".
2. أنشئ متغيّرًا جديدًا حدّده المستخدم من النوع "متغيّر طبقة البيانات".
3. اضبط "webVitalsData.name" في حقل "اسم متغيّر طبقة البيانات"، وأطلِق اسمًا على المتغيّر (مثل "DLV - webVitalsData.name") واحفظه.

4. كرِّر هذه الخطوات للمتغيّرات الأربعة الأخرى المطلوبة في طبقة البيانات. أنشئ "webVitalsData.value".

5. أنشئ متغيّرًا آخر باستخدام حقل الاسم "webVitalsData.id".

6. أنشئ "webVitalsData.rating".

7. أنشئ "webVitalsData.delta".

8. من المفترض أن ينتهي بك الأمر بمتغيّرات dataLayer التالية من تحديد المستخدِم:

إنشاء علامة حدث في "إحصاءات Google‏ 4"

قبل إنشاء علامة حدث في "إحصاءات Google‏ 4"، تأكَّد من إعداد "علامة التتبُّع من Google" مسبقًا.

1. في مساحة عملك في Google Tag Manager، انتقِل إلى "العلامات".
2. أضِف علامة حدث في "إحصاءات Google‏ 4" من خلال النقر على "جديد"، ثم على "إعدادات العلامة" واختَر علامة "إحصاءات Google: حدث في إحصاءات Google‏ 4" من قسم "إحصاءات Google".
3. أدخِل رقم تعريف القياس في الحقل المقابل.

4. بالنسبة إلى حقل الإدخال "اسم الحدث"، اختَر متغيّر dataLayer "DLV - webVitalsData.name" من الخطوة التي أنشأتها سابقًا.

5. أضِف متغيّرات dataLayer الأخرى كمعلّمات أحداث كما هو موضّح في لقطة الشاشة. احرص أيضًا على إضافة المَعلمة "event_category" بقيمة مثل "Web Vitals" لتجميع أحداث "Core Web Vitals".

6. سجِّل مَعلمات الأحداث هذه كسمات مخصّصة في واجهة مستخدِم "إحصاءات Google‏ 4".
7. طبِّق إعدادات إضافية استنادًا إلى متطلبات إعداد "إحصاءات Google‏ 4".
8. اضبط الحدث المخصّص "web_vitals" كمشغّل لعلامة "إحصاءات Google‏ 4".
9. أضِف أيضًا استثناءات المشغّلات إذا لزم الأمر.

6. التحقّق من البيانات في "إحصاءات Google‏ 4"

للتحقّق من تدفق البيانات إلى "إحصاءات Google‏ 4"، انتقِل مرة أخرى إلى وضع المعاينة في "إدارة العلامات من Google". قدِّم عنوان URL إلى Tag Assistant وانقر على "ربط".

1. تفاعَل مع الصفحة من خلال التمرير والنقر على العناصر أو المساحات البيضاء.
2. بعد ذلك، ارجع إلى علامة التبويب التي تحتوي على Tag Assistant ووضع المعاينة في Google Tag Manager.
3. على اليمين، انقر على كل إدخال من إدخالات "web_vitals" وتأكَّد من تنشيط علامة Core Web Vitals في إحصاءات Google‏ 4.

4. افتح علامة "إحصاءات Google‏ 4" من خلال النقر على البطاقة للتحقّق من سحب البيانات بشكلٍ صحيح من dataLayer. احرص على عرض المتغيّرات كقيم.

5. الآن، انتقِل إلى موقعك على "إحصاءات Google‏ 4 (GA4)" وافتح تقرير "الوقت الفعلي".
6. في بطاقة "عدد الأحداث حسب اسم الحدث" يمكنك التأكّد مما إذا تم جمع أحداث Core Web Vitals بنجاح.

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

7. نشر إعداداتك

بعد اختبار إعداداتك بنجاح، حان وقت نشر مساحة عملك.

1. افتح مساحة عملك في Google Tag Manager.
2. في أعلى يسار واجهة المستخدِم، انقر على "إرسال".
3. قدِّم اسمًا ووصفًا للنسخة وادفع إعداداتك إلى مرحلة التشغيل من خلال النقر على "نشر".

8. ربط "إحصاءات Google‏ 4" بحساب "مدير إعلانات Google" أو Google AdSense

بعد جمع بيانات Core Web Vitals في إحصاءات Google‏ 4، يجب أيضًا أن تتوفّر المقاييس المرتبطة بالإعلانات في إحصاءات Google‏ 4 لكي تعمل لوحة البيانات. يمكنك ربط "مدير إعلانات Google" وGoogle AdSense بخدمة "إحصاءات Google‏ 4" أو ربط أحد حلول الإعلانات هذه فقط. يُرجى العِلم أنّه يجب أن يكون لديك إذن المحرِّر (أو إذن أعلى) في "إحصاءات Google‏ 4" وإذن المشرف في "مدير إعلانات Google" وGoogle AdSense لإجراء عملية الربط.

ربط "إحصاءات Google‏ 4" بحساب "مدير إعلانات Google"

1. انتقِل إلى شبكة "إدارة إعلانات Google".
2. انقر على "المشرف" -> "إعدادات عامة" -> "إعدادات الشبكة".
3. في قسم "إعدادات التقارير"، فعِّل الخيار "تقارير موقع إحصاءات Google‏ 4 في تقارير "مدير إعلانات Google"".

4. راجِع الأحكام والشروط وانقر على "تأكيد".
5. احفظ التعديل.
6. انتقِل إلى "المشرف" -> "الحسابات المرتبطة" -> "إحصاءات Google‏ 4".
7. انقر على "ربط موقع جديد على إحصاءات Google‏ 4".
8. ابحث عن موقعك على "إحصاءات Google‏ 4" الذي تريد ربطه واختَره.
9. انقر على "حفظ" وبذلك تكون قد أكملت العملية.

ربط "إحصاءات Google‏ 4" بحساب Google AdSense

1. انتقِل إلى حسابك على Google AdSense.
2. انقر على "الحساب" -> "الوصول والإذن" -> "التكامل مع إحصاءات Google".
3. انقر على "+رابط جديد".

4. ابحث عن موقعك على "إحصاءات Google‏ 4" الذي تريد ربطه واختَره.
5. انقر على "إنشاء رابط".

9- عرض البيانات بشكل مرئي باستخدام Looker Studio

للحصول على عرض مرئي لبيانات "مؤشرات أداء الويب الأساسية" مع مقاييس الإعلانات، تتضمّن هذه الخطوة إعداد لوحة بيانات في Looker Studio. يُرجى اتّباع الخطوات التالية لربط "مؤشرات أداء الويب الأساسية" بإيرادات الإعلانات.

1. افتح نموذج لوحة بيانات Looker Studio هذا
2. انسخ لوحة البيانات.
3. عدِّل مصدر البيانات من خلال اختيار موقع إحصاءات Google‏ 4 (GA4) من القائمة المنسدلة.
4. تم

يُرجى العِلم أنّه لكي تعمل لوحة البيانات وتعرض البيانات بشكلٍ صحيح، تعتمد البيانات على بناء الجملة واصطلاح التسمية من هذا الدرس التطبيقي.

ستمنحك الصفحة الأولى من لوحة البيانات عرضًا سابقًا لأداء Core Web Vitals:

في الصفحة الثانية، يمكنك ربط "مؤشرات أداء الويب الأساسية" بإيرادات الإعلانات من "إدارة إعلانات Google" و/أو Google AdSense:

تمنحك الصفحة الثالثة إمكانية تحليل أداء "مؤشرات أداء الويب الأساسية" على مستوى مسار الصفحة مع المقاييس المرتبطة بالإعلانات:

10. الخاتمة

تهانينا! لقد تعرّفت على كيفية قياس Core Web Vitals وإعداد تقارير عنها باستخدام إحصاءات Google‏ 4 ومقاييس أداء الإعلانات من إدارة إعلانات Google وGoogle AdSense.

مزيد من المعلومات

• ربط Core Web Vitals بإيرادات الإعلانات باستخدام أدوات Google
• تحميل الإعلانات بفعالية بدون التأثير في سرعة الصفحة
• تحسين سرعة عرض أكبر محتوى مرئي
• تحسين متغيّرات التصميم التراكمية
• تحسين مدى استجابة الصفحة لتفاعلات المستخدم