إذا اكتشفت أن شفرة الإعلان المتجاوب لا تنفّذ كل ما تحتاج إليه، يمكنك تعديل شفرة الإعلان لتلبية متطلبات موقعك المتجاوب بشكل أفضل. توضح الأمثلة التالية كيفية إجراء تلك التعديلات بشكلٍ صحيح.
مهم:
- إذا كنت حديث العهد بطلبات بحث الوسائل في CSS وتعديل شفرة الإعلان، نقترح البدء باستخدام مثال الحجم المحدد للوحدة الإعلانية لكل عرض شاشة.
- إذا كنت على دراية بطلبات بحث الوسائط في CSS وتعديل رمز الإعلان، لا تتردّد في الانتقال مباشرةً إلى قسم أمثلة ميزات رمز الإعلان المتجاوب المتقدّمة.
مثال الحجم المحدّد للوحدة الإعلانية لكل عرض شاشة
يوضح هذا المثال كيفية تعديل الشفرة المتجاوبة لتعيين أحجام محددة للوحدة الإعلانية لثلاثة نطاقات لعرض الشاشة، بمعنى الجوّال، والأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. ولا تحتاج إلى أي خبرة سابقة في مجال طلبات بحث الوسائل في 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"></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>
لتعديل نموذج هذا الرمز ليلائم موقعك:
- أنشئ وحدة إعلانية صوريّة في حساب AdSense، مع التأكُّد من المحافظة على اختيار متجاوبة في قسم "حجم الإعلان". اكتب المعلومات التالية من رمز إعلانك المتجاوب:
- الرقم التعريفي للناشر، على سبيل المثال، ca-pub-1234567891234567
- رقم تعريف الوحدة الإعلانية (
data-ad-slot
)، على سبيل المثال، 1234567890.
- في نموذج الشفرة:
- استبدِل جميع حالات استخدام
example_responsive_1
باسم فريد، مثل Home_Page أو front_page_123 أو غير ذلك.ملاحظات:- يجب ألا يحتوي اسمك الفريد إلا على أحرف إنجليزية (من A إلى Z) وأرقام وشرطات سفلية، ويجب أن يكون الحرف الأول حرفًا إنجليزيًا.
- يجب عليك استخدام اسم فريد مختلف في كل مرة تعدِّل فيها نموذج الشفرة هذا.
- استبدل
ca-pub-XXXXXXX11XXX9
برقمك التعريفي للناشر. - استبدل
8XXXXX1
بالرقم التعريفي لوحدتك الإعلانية.
- استبدِل جميع حالات استخدام
- حدد الأحجام التي تريدها لوحدتك الإعلانية لكل عرض شاشة:
- إذا كنت راضيًا عن أحجام الوحدة الإعلانية الحالية في نموذج الشفرة، فلا تحتاج إلى إجراء أي تغييرات إضافية.
- إذا كنت ترغب في تعيين أحجام مختلفة للوحدة الإعلانية لكل عرض شاشة، في هذه الحالة، في نموذج الشفرة:
- استبدل
320 بكسل
و100 بكسل
بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات حتى 500 بكسل. - استبدل
468 بكسل
و60 بكسل
بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما لعرض الشاشات بين 500 بكسل و799 بكسل. - استبدل
728 بكسل
و90 بكسل
بعرض وارتفاع الوحدة الإعلانية اللذين تريد استخدامهما للشاشات بعرض 800 بكسل وأكثر.
- استبدل
- انسخ رمز الإعلان المعدّل والصقه في رمز مصدر HTML للصفحة التي ترغب في أن تظهر عليها الإعلانات.
ملاحظة: بعد إضافة رمز الإعلان، نقترح اختبار إعلاناتك على الأجهزة والشاشات المختلفة للتأكُّد من عمل السلوك المتجاوب بشكل صحيح.
أمثلة على ميزات رمز الإعلان المتجاوب المتقدّمة
إذا رأيت أن رمز الإعلان المتجاوب لا يقدّم لك كل ما تحتاج إليه، يمكنك تعديل رمز الإعلان لتحديد حجم وحدتك الإعلانية بدقة عبر CSS.
تحديد عرض قابل للتوسيع وارتفاع ثابت
يمكنك تعديل شفرة الإعلان المتجاوب لتحديد عرض قابل للتوسيع وارتفاع ثابت لوحدتك الإعلانية عبر CSS. يوضح المثال التالي كيفية إجراء هذه التعديلات:
<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
تحديد حجم دقيق لكل عرض شاشة
يمكنك تعديل شفرة الإعلان المتجاوب لتحديد حجم دقيق لوحدتك الإعلانية عبر CSS. يوضح المثال التالي كيفية إجراء هذه التعديلات:
<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-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media
هي بنية CSS3، وهي مدعومة في جميع المتصفحات الحديثة. إذا رغبت في دعم المتصفحات القديمة، مثل Internet Explorer 7 أو ما قبله، نقترح تحديد حجم افتراضي أولاً. وسيضمن هذا عرض الإعلان حتى إن كانت الاستعلامات عن الإعلام غير مدعومة. يُرجى ملاحظة أن تعيين حجم شفرة الإعلان عبر CSS في أوراق أنماط خارجية غير مدعوم رسميًا.إخفاء وحدة إعلانية
في بعض الحالات، وخصوصًا في أجهزة الجوّال الأصغر حجمًا، قد لا تريد إظهار الإعلان على الإطلاق. إذا كنت تريد إخفاء وحدة إعلانية، يمكنك تعيين معلمة بطلبات بحث الوسائل في CSS لكي لا يتم إجراء طلب إعلان ولعدم إظهار أي إعلان. توضح الأمثلة التالية كيفية إجراء هذه التعديلات:
<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-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
في هذا المثال، لن يتم عرض أي إعلانات إذا كان عرض الشاشة أقل من 400 بكسل.