الوحدات الإعلانية

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

التالي: إرشادات الوحدات الإعلانية الصوريّة ذات الحجم الثابت

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

قبل البدء:

إذا لم تكن على دراية بطلبات الاستعلام عن الوسائط في خدمات مقارنة الأسعار (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>

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

أنشئ وحدة إعلانية صوريّة في حساب AdSense، مع التأكُّد من الإبقاء على اختيار متجاوبة في قسم "حجم الإعلان". اكتب المعلومات التالية من رمز إعلانك المتجاوب:
- الرقم التعريفي للناشر، على سبيل المثال، ca-pub-1234567890123456
- رقم تعريف الوحدة الإعلانية (data-ad-slot)، مثل 1234567890.
في الرمز النموذجي:
- استبدِل جميع حالات استخدام example_responsive_1 باسم فريد، مثل Home_Page‏ أو front_page_123‏ أو غير ذلك.
  ملاحظات:
  - يجب ألا يحتوي اسمك الفريد إلا على أحرف إنجليزية (من A إلى Z) وأرقام وشرطات سفلية، ويجب أن يكون الحرف الأول حرفًا إنجليزيًا.
  - يجب عليك استخدام اسم فريد مختلف في كل مرة تعدِّل فيها نموذج الشفرة هذا.
- استبدل ca-pub-1234567890123456 برقمك التعريفي للناشر.
- استبدل 8XXXXX1 برقم تعريف وحدتك الإعلانية.
حدّد الأحجام التي تريدها لوحدتك الإعلانية لكل عرض شاشة:
- إذا كنت راضيًا عن أحجام الوحدة الإعلانية الحالية في نموذج الشفرة، فلا تحتاج إلى إجراء أي تغييرات إضافية.
- إذا كنت تريد ضبط أحجام مختلفة للوحدة الإعلانية لكل عرض شاشة، في هذه الحالة، في الرمز النموذجي:
  - استبدل 320 بكسل و100 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات حتى 500 بكسل.
  - استبدل 468 بكسل و60 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات بين 500 بكسل و799 بكسل.
  - استبدل 728 بكسل و90 بكسل بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما للشاشات بعرض 800 بكسل وأكثر.
انسخ رمز الإعلان المعدّل والصقه في رمز مصدر 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 بكسل.

ملاحظة: عند تعديل رمز الإعلان المتجاوب الذي نسخته، عليك حذف السطرَين التاليَين:

data-ad-format="auto"‎

    data-full-width-responsive="true"‎

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

هل كان ذلك مفيدًا؟

كيف يمكننا تحسينها؟