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

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

ملاحظة مهمّة:

• إذا كنت حديث العهد بطلبات بحث الوسائل في 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-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إذا كنت لا تريد عرض الإعلانات إلا لأحجام شاشات معينة، يمكنك استخدام CSS لإجراء هذا. يوضّح لك المثال التالي كيفية تعديل رمز الإعلان لاستخدام طلبات الاستعلام عن الوسائط في CSS3 لإخفاء الإعلانات لأحجام شاشات محدّدة:
<style type="text/css">
.adslot_1 { display: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-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

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