كيفية تعديل شفرة الإعلان المتجاوب

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

مهم:

• إذا كنت حديث العهد بطلبات بحث الوسائل في CSS وتعديل شفرة الإعلان، نقترح البدء باستخدام مثال الحجم المحدد للوحدة الإعلانية لكل عرض شاشة.
• إذا كنت على دراية بطلبات بحث الوسائط في CSS وتعديل رمز الإعلان، لا تتردّد في الانتقال مباشرةً إلى قسم أمثلة ميزات رمز الإعلان المتجاوب المتقدّمة.

ملاحظة: الأمثلة الموصوفة في هذه المقالة تُعد تعديلات مقبولة لرمز إعلان AdSense. ولن تنتهك سياسات برنامج AdSense عند تعديل رمز الإعلان المتجاوب بهذه الطرق التي تمت الموافقة عليها.

مثال الحجم المحدّد للوحدة الإعلانية لكل عرض شاشة

يوضح هذا المثال كيفية تعديل الشفرة المتجاوبة لتعيين أحجام محددة للوحدة الإعلانية لثلاثة نطاقات لعرض الشاشة، بمعنى الجوّال، والأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. ولا تحتاج إلى أي خبرة سابقة في مجال طلبات بحث الوسائل في CSS أو تعديل شفرة إعلان AdSense لاتباع هذا المثال.

في ما يلي شفرة إعلان متجاوب معدّلة تعمل على تعيين الأحجام المحددة التالية للوحدة الإعلانية لكل عرض شاشة:

• بالنسبة إلى عرض الشاشة حتى 500 بكسل: وحدة إعلانية 320×100.
• بالنسبة إلى عرض الشاشة بين 500 بكسل و799 بكسل: وحدة إعلانية 468×60.
• بالنسبة إلى عرض الشاشة 800 بكسل وأعرض: وحدة إعلانية 728×90.

<style>
‪.example_responsive_1 { width: 320px; height: 100px; }
‪@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
‪@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
‪</style>
‪<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
‪<!-- example_responsive_1 -->
‪<ins class="adsbygoogle example_responsive_1"
     ‪style="display:inline-block"
     ‪data-ad-client="ca-pub-XXXXXXX11XXX9"
     ‪data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
‪</script>

لتعديل نموذج هذا الرمز ليلائم موقعك:

1. أنشئ وحدة إعلانية صوريّة في حساب AdSense، مع التأكُّد من المحافظة على اختيار متجاوبة في قسم "حجم الإعلان". اكتب المعلومات التالية من رمز إعلانك المتجاوب:
   • الرقم التعريفي للناشر، على سبيل المثال، ca-pub-1234567891234567
   • رقم تعريف الوحدة الإعلانية (data-ad-slot)، على سبيل المثال، 1234567890.
2. في نموذج الشفرة:
   • استبدِل جميع حالات استخدام example_responsive_1‏ باسم فريد، مثل Home_Page‏ أو front_page_123‏ أو غير ذلك.
     ملاحظات:

     • يجب ألا يحتوي اسمك الفريد إلا على أحرف إنجليزية (من A إلى Z) وأرقام وشرطات سفلية، ويجب أن يكون الحرف الأول حرفًا إنجليزيًا.
     • يجب عليك استخدام اسم فريد مختلف في كل مرة تعدِّل فيها نموذج الشفرة هذا.
   • استبدل ca-pub-XXXXXXX11XXX9‏ برقمك التعريفي للناشر.
   • استبدل 8XXXXX1 بالرقم التعريفي لوحدتك الإعلانية.
3. حدد الأحجام التي تريدها لوحدتك الإعلانية لكل عرض شاشة:
   • إذا كنت راضيًا عن أحجام الوحدة الإعلانية الحالية في نموذج الشفرة، فلا تحتاج إلى إجراء أي تغييرات إضافية.
   • إذا كنت ترغب في تعيين أحجام مختلفة للوحدة الإعلانية لكل عرض شاشة، في هذه الحالة، في نموذج الشفرة:
     • استبدل 320 بكسل و100 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات حتى 500 بكسل.
     • استبدل 468 بكسل و60 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات بين 500 بكسل و799 بكسل.
     • استبدل 728 بكسل و90 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما للشاشات بعرض 800 بكسل وأكثر.
4. انسخ رمز الإعلان المعدّل والصقه في رمز مصدر HTML للصفحة التي ترغب في أن تظهر عليها الإعلانات.
   ملاحظة: بعد إضافة رمز الإعلان، نقترح اختبار إعلاناتك على الأجهزة والشاشات المختلفة للتأكُّد من عمل السلوك المتجاوب بشكل صحيح.

أمثلة على ميزات رمز الإعلان المتجاوب المتقدّمة

إذا رأيت أن رمز الإعلان المتجاوب لا يقدّم لك كل ما تحتاج إليه، يمكنك تعديل رمز الإعلان لتحديد حجم وحدتك الإعلانية بدقة عبر CSS.

ملاحظة: لا نوصي باستخدام هذه الميزات المتقدّمة ما لم تكن واثقًا من قدرتك على تعديل رمز الإعلان.

تحديد عرض قابل للتوسيع وارتفاع ثابت

يمكنك تعديل شفرة الإعلان المتجاوب لتحديد عرض قابل للتوسيع وارتفاع ثابت لوحدتك الإعلانية عبر CSS. يوضح المثال التالي كيفية إجراء هذه التعديلات:

مثال لعرض قابل للتوسيع وارتفاع ثابت

يوضح هذا المثال كيفية تعديل شفرة الوحدة الإعلانية المتجاوبة لتحديد ارتفاع ثابت قدره 90 بكسل وعرض متغيّر يتراوح من 400 بكسل كحدٍ أدنى إلى 970 بكسل كحدٍ أقصى:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   ‪data-ad-client="ca-pub-XXXXXXX11XXX9"
   data-ad-slot="5678"></ins>
‪<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

تحديد حجم دقيق لكل عرض شاشة

يمكنك تعديل شفرة الإعلان المتجاوب لتحديد حجم دقيق لوحدتك الإعلانية عبر CSS. يوضح المثال التالي كيفية إجراء هذه التعديلات:

مثال لحجم دقيق لكل عرض شاشة

إذا كنت تعرف أحجام الوحدة الإعلانية الدقيقة لكل جهاز والتي تتناسب مع موقعك المتجاوب، يمكنك استخدام طلبات بحث الوسائل في CSS3 لتعيين حجم الوحدة الإعلانية المتجاوبة. يوضّح المثال التالي كيفية تعديل رمز الإعلان لاستخدام طلبات بحث وسائط CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
‪@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
‪</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-XXXXXXX11XXX9"
    data-ad-slot="5678"></ins>
‪<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

قواعد ‎@media هي بنية CSS3، وهي مدعومة في جميع المتصفحات الحديثة. إذا رغبت في دعم المتصفحات القديمة، مثل Internet Explorer 7 أو ما قبله، نقترح تحديد حجم افتراضي أولاً. وسيضمن هذا عرض الإعلان حتى إن كانت الاستعلامات عن الإعلام غير مدعومة. يُرجى ملاحظة أن تعيين حجم شفرة الإعلان عبر CSS في أوراق أنماط خارجية غير مدعوم رسميًا.

إخفاء وحدة إعلانية

في بعض الحالات، وخصوصًا في أجهزة الجوّال الأصغر حجمًا، قد لا تريد إظهار الإعلان على الإطلاق. إذا كنت تريد إخفاء وحدة إعلانية، يمكنك تعيين معلمة بطلبات بحث الوسائل في CSS لكي لا يتم إجراء طلب إعلان ولعدم إظهار أي إعلان. توضح الأمثلة التالية كيفية إجراء هذه التعديلات:

مثال لإخفاء الإعلانات لأحجام شاشات معينة

إذا كنت لا تريد عرض الإعلانات إلا لأحجام شاشات معينة، يمكنك استخدام CSS لإجراء هذا. يوضح لك المثال التالي كيفية تعديل شفرة الإعلان لاستخدام طلبات بحث الوسائل في CSS3 لإخفاء الإعلانات لأحجام شاشات محددة:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
‪@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
‪</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-XXXXXXX11XXX9"
   data-ad-slot="5678"></ins>
‪<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

في هذا المثال، لن يتم عرض أي إعلانات إذا كان عرض الشاشة أقل من 400 بكسل.

بالرغم من هذه المرونة، يُرجى الحرص على اتّباع سياسات موضع الإعلان دائمًا. يجب الأخذ في الاعتبار أنه يُسمَح فقط بإجراء تعديلات محدودة على الرمز، وذلك بموجب سياسات البرنامج.