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