تحدث متغيّرات التصميم عندما يتغيّر موضع عنصر مرئي على صفحتك أو حجمه، ما يؤثّر في موضع المحتوى المحيط به. يكون التحول أحيانًا مقصودًا، مثل عندما يتم توسيع حاوية نتيجةً لفعل أحد المستخدِمين. ومع ذلك، يمكن أن تؤدي الطبيعة الديناميكية للإعلانات إلى تغييرات غير متوقّعة في التنسيق، ما يؤدي بدوره إلى تأثير سلبي في تجربة المستخدم ويمكن أن يتسبّب في مشاكل خطيرة في سهولة الاستخدام.
يشرح هذا الدليل كيفية قياس تغيُّر التصميم والحدّ منه عند العمل باستخدام علامات الناشر من Google (GPT).
كيفية تسبب الإعلانات في حدوث متغيّرات تصميم
يتم عادةً طلب الإعلانات بشكل غير متزامن وتضيف ديناميكيًا محتوى إلى صفحتك أثناء تحميل الصفحة أو بعدها. أثناء جلب الإعلانات، يستمر تحميل بقية الصفحة وقد يصبح المحتوى غير الإعلاني مرئيًا للمستخدم. إذا لم تحجز مساحة كافية للإعلانات التي يتم تحميلها، قد يؤدي ذلك إلى إزاحة المحتوى المرئي غير الإعلاني عند إضافتها في النهاية إلى الصفحة.
عند استخدام علامات Google Publisher Tags، هناك بضع نقاط في دورة حياة الإعلان يمكن أن يحدث فيها تغيير في التنسيق:
- عند استدعاء
display()قد يتم توسيع خانة أو تصغيرها، وذلك استنادًا إلى كيفية إعدادها. - عند عرض محتوى الإعلان قد يتم تغيير حجم خانة إذا تم عرض إعلان متغيّر أو إذا لم تتوفّر مساحة كافية. قد يتم أيضًا توسيع خانة أو تصغيرها في هذه المرحلة، وذلك حسب طريقة ضبطها.
- بعد عرض محتوى الإعلان تم تصميم أنواع معيّنة من تصميمات الإعلانات بحيث تتمدد بعد ظهورها على الصفحة.
يُرجى العِلم أنّه كلما ارتفعت مساحة الإعلان في إطار العرض، زاد المحتوى الذي يمكن أن تحلّ محلّه. يجب الانتباه بشكل خاص إلى الشرائح الإعلانية القريبة من الجزء العلوي لإطار العرض الأولي (فوق المحتوى المرئي). يمكن أن تتسبب هذه المواضع في حدوث مقدار غير متناسب من تغيير التنسيق لأنّه من المرجّح أن تكون مرئية عند تحميل محتوى إعلانها.
قياس متغيّرات التصميم
متغيّرات التصميم التراكمية (CLS) هي مقياس من مؤشرات أداء الويب الأساسية يمكنك استخدامه لتحديد مدى تأثير متغيّرات التصميم في موقعك الإلكتروني، سواء في المختبر أو في المجال.
في جلسة المعمل
تقيس أدوات المختبر متغيّرات التصميم التراكمية (CLS) بشكل اصطناعي. وهذا يعني أنّها لا تعتمد على تفاعل المستخدمين الفعلي، ما يجعلها مناسبة تمامًا للاستخدام في عمليات دمج المستمر وسير العمل للتطوير على الجهاز. ومع ذلك، لا تقيس هذه الأدوات عادةً سوى الأداء أثناء تحميل الصفحة، وهي محدودة في الشروط التي يمكنها محاكاةها، لذا قد تكون القيم التي يتم الإبلاغ عنها أقل مما يشهده مستخدم حقيقي.
Publisher Ads Audits for Lighthouse هي أداة يمكن استخدامها لقياس CLS الذي يُعزى تحديدًا إلى إعلانات GPT. للاطّلاع على التفاصيل، يُرجى الاطّلاع على مستندات تدقيق الحدّ من متغيّرات تصميم الإعلان.
يمكن أيضًا ضبط Chrome DevTools لتمييز تغييرات التنسيق أثناء تنقّلك في موقعك الإلكتروني. يمكن استخدام هذه الميزة لتحديد التحولات اليدوية في التنسيق التي تحدث بالقرب من الخانات الإعلانية على صفحتك.
في المجال
تقيس أدوات الحقل مقدار CLS الذي يواجهه المستخدمون أثناء تفاعلهم مع موقعك الإلكتروني. تُعرف هذه العملية عادةً باسم مراقبة المستخدِمين الفعليين (RUM). يتيح لك RUM مراقبة مدى تأثُّر مقياس CLS بعوامل من العالم الواقعي، مثل إمكانات الجهاز وظروف الشبكة وتفاعل المستخدمين وتعدُّل الصفحات، والتي غالبًا ما يكون من الصعب أو المستحيل محاكاتها باستخدام الاختبارات التخليقية.
تقليل متغيّرات التصميم
إنّ الطريقة الوحيدة المضمونة لتجنُّب تغيير التنسيق هي حجز مقدار كافٍ
من المساحة لموضع إعلان معيّن باستخدام CSS. إنّ ضبط ارتفاع وعرض ثابتين
مباشرةً في خانة الإعلان div هي الطريقة الأكثر فعاليةً لإجراء ذلك. ومع ذلك،
على الرغم من أنّ هذا الإجراء يعمل بشكل جيد مع الخانات الإعلانية الثابتة الحجم، إلا أنّ
السيناريوهات الأكثر تعقيدًا قد تتطلّب نهجًا أكثر دقة. يتم شرح بعض السيناريوهات الشائعة في الأقسام التالية.
خانات إعلانية متعددة الأحجام
بالنسبة إلى خانات الإعلانات التي تقبل أحجامًا متعدّدة، ننصحك باتّباع إحدى الخطوات التالية:
- احجز مساحة لأكبر حجم تم ضبطه للعرض.
- حجز مساحة لعرض أصغر حجم تم ضبطه
- احجز مساحة للحجم الذي يُرجّح عرضه، والذي يتم تحديده من خلال فحص بيانات الملء السابقة من تقارير "مدير إعلانات Google".
اختيار النهج المناسب
إنّ حجز مساحة للحجم الأكبر الذي تم ضبطه لعرضه هو الطريقة الأكثر فعالية لتجنّب تغييرات التنسيق. ومع ذلك، يمكن أن تؤدي هذه الطريقة إلى ترك مساحة فارغة إضافية حول الإعلان، في حال عرض مادة إبداعية أصغر من الحجم المحجوز. سيؤدي تصغير خانة الإعلان لمطابقة حجم تصميم الإعلان المعروض إلى حدوث تغيير إضافي في التصميم، لذا ننصحك بتجنُّب إجراء ذلك. بدلاً من ذلك، يمكن استخدام المحاذاة العمودية والأفقية للحدّ من التأثير المرئي للمساحة الفارغة الزائدة.
من ناحية أخرى، يؤدي حجز مساحة لأصغر حجم تم ضبطه للعرض إلى تجنُّب ظهور مساحة فارغة زائدة حول إعلانك. يمكن أن يكون هذا خيارًا جيدًا إذا كانت الخانة الإعلانية غالبًا ما تكون مليئة بتصاميم إعلانات أصغر حجمًا، أو في الحالات التي تكون فيها كل القياسات التي تتيحها الخانة متشابهة. ومع ذلك، تؤدي هذه الطريقة إلى تغيير التنسيق في حال عرض تصميم أكبر من الحجم المحجوز (مع أنّ مثل هذه التغييرات تكون أصغر بشكل عام مقارنةً بعدم حجز مساحة على الإطلاق).
لتحقيق التوازن بين المساحة الفارغة وتغييرات التنسيق، يمكنك حجز مقدار
"متوسط" من المساحة لمواضع إعلاناتك. على سبيل المثال، يؤدي حجز 100px
عموديًا إلى ظهور مساحة فارغة صغيرة عند عرض تصميم إعلان 320x50، ولكن
يؤدي ذلك إلى خفض نتيجة CLS مقارنةً بعدم حجز أي مساحة على الإطلاق. عليك
تجربة أحجام مختلفة للعثور على أفضل توازن لموقعك الإلكتروني.
عند تحديد مقدار المساحة التي يجب حجزها لموضع إعلان معيّن، يمكن أن يساعدك فحص بيانات الملء السابقة من تقارير "مدير إعلانات Google" في اتّخاذ قرارٍ مبني على معرفةٍ أفضل. يمكن توضيح ذلك على أفضل وجه من خلال استكشاف بعض الأمثلة.
المثال 1
| حجم تصميم الإعلان (تم إرساله) | مرّات الظهور على خادم الإعلانات (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
في هذه الحالة، يمكن أن يؤدي حجز 250px عموديًا إلى تقليل CLS بشكل كبير لأنّ
غالبية المواد الإبداعية المعروضة هي 300x250.
المثال 2
| حجم تصميم الإعلان (تم إرساله) | مرّات الظهور على خادم الإعلانات (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
في هذه الحالة، يبلغ ارتفاع معظم الإعلانات 90px بحد أقصى، لذا فإنّ حجز 90px
بالعمودي من المفترض أن يتجنّب تغيير التنسيق في معظم الأوقات.
كيفية حجز مساحة
ننصحك بمعالجة هذه المشكلة من خلال تحديد حجم خانة الإعلان من خلال سمتَي CSS
min-height وmin-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
يتيح لك استخدام سمتَي min-height وmin-width حجز الحد الأدنى من المساحة لموضع إعلانك، مع السماح للمتصفّح بزيادة حجم الحاوية حسب الضرورة. يضمن ذلك عدم اقتطاع أي محتوى في حال عرض تصميم إعلان أكبر.
يمكنك الجمع بين هذه الطريقة وطلبات البحث عن الوسائط في CSS لتحديد الحدّ الأدنى من القيم المختلفة لأحجام الشاشات المختلفة:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
يجب تجنُّب حجز مساحة باستخدام JavaScript، لأنّ ذلك قد يؤدي إلى تغيير التنسيق في وقت تحميل النص البرمجي. ويؤدي حجز المساحة باستخدام CSS إلى تجنُّب هذا الخطر.
الشرائح الإعلانية القابلة للتعديل
لا تحدّد خانات الإعلانات المتغيرة حجمًا ثابتًا يمكن عرض الإعلانات به. بدلاً من ذلك، يتم تغيير حجم هذه الفتحات تلقائيًا لتلائم محتوى تصميم الإعلان الذي يتم عرضه عليها، ما يتيح لها عرض تصميمات إعلانات ذات حجم غير محدّد. نتيجةً لذلك، لا يمكن حجز مساحة لهذه الفتحات قبل طلب محتوى الإعلان، وتسبب الإعلانات ذات الحجم المتغير دائمًا تغييرات في التصميم.
للحدّ من تأثيرات متغيّرات التصميم عند العمل مع خانات الإعلانات المتغيّرة، ننصح بالآتي:
- استخدِم حجم
fluidفقط للمنافذ أسفل الطية. - يمكنك جلب الخانات الإعلانية المتغيّرة في أقرب وقت ممكن لتقليل احتمالية التمرير للمستخدمين إلى عرضها قبل تغيير حجم الخانة.
تصغير الشرائح الإعلانية وتوسيعها
تتيح لك طريقة collapseEmptyDivs()
تصغير divs لمواضع الإعلانات كي لا تشغل مساحة على الصفحة عندما
لا يكون هناك محتوى إعلاني لعرضه. ومع ذلك، يجب استخدام هذه الميزة بحذر
لأنّها قد تؤدي إلى تغييرات غير مقصودة في التنسيق. كما هو موضّح في
القسم السابق، يمكن أن يؤدي تصغير مساحات الإعلانات وتوسيع نطاقها إلى
تغييرات في التنسيق في نقطتَين مختلفتَين من دورة حياة الإعلان.
إذا كنت بحاجة إلى الاستفادة من هذه الميزة، يمكنك الحدّ من تأثير التحولات في التنسيق باستخدام بيانات الملء السابقة من تقارير "مدير إعلانات Google" لتطبيق أفضل الممارسات التالية:
- يجب أن تكون المواضع التي يُرجّح أن يتم ملؤها موسّعة دائمًا.
- يجب أن تكون الفتحات التي من غير المرجّح أن يتم ملؤها مُدمجة دائمًا.
للحصول على مثال على التنفيذ، اطّلِع على نموذج تصغير المساحات الإعلانية الفارغة.