كيفية أستخدام وحدات أدسنس المتجاوبة - الجزء الثاني

تعتبر شركة ادسنس احد أفضل شركات الدعاية الألكترونية علي الأطلاق، حيث هي تابعة لجوجل ويثق فيها أغلب المطورين والمدونين حول العالم، وكانت احدي الخدمات التي تقدمها ادسنس مؤخراً الوحدات المتجاوبة.

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

كيف تحصل علي كود الوحدة المتجاوبة

للحصول علي الكود الخاص بالوحدة المتجاوبة قم بتسجيل الدخول لحساب ادسنس الخاص بك ثم أدخل علي قسم الوحدات الأعلانية وأضغط علي زر "وحدة أعلانية جديدة"، قم بأعطاء الوحدة الجديدة أسم خاص بها، ثم من خانة حجم الأعلان أختار "وحدة إعلانية متجاوبة (تجريبية)" وعند الأنتهاء من التعديل قم بحفظ الوحدة والحصول علي الشفرة الخاصة بها.

مثلا أذا اعطيت الوحدة أسماً "mido" ستكون الشفرة الخاصة بك هكذا

<style>
.mido { width: 320px; height: 50px; }
@media(min-width: 500px) { .mido { width: 468px; height: 60px; } }
@media(min-width: 800px) { .mido { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mido -->
<ins class="adsbygoogle mido"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

الأن تستطيع لقص تلك الوحدة اينما تشاء، ولكن عند حفظك للشفة بداخل قالب بلوجر ستجد ان هناك خطأ ما في كلمة async قم بأستبدالها في شفرة الأعلان بـ async='async' لتكون النسخة الجديدة للكود هكذا

<style>
.mido { width: 320px; height: 50px; }
@media(min-width: 500px) { .mido { width: 468px; height: 60px; } }
@media(min-width: 800px) { .mido { width: 728px; height: 90px; } }
</style>
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mido -->
<ins class="adsbygoogle mido"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

طريقة دمج وحدات ادسنس المناسبة داخل الوحدة المتجاوبة

حتي تكون وحدة ادسنس المتجاوبة مناسبة للأستخدام يجب عليك دمج الوحدات المناسبة داخل الشفرة السابقة، تستطيع ذلك من خلال أضافة ابعاد الوحدة وعرض الشاشة التي سوف تعمل لنهايتها.

مثلاً انا اريد ان يكون الاعلان بحجم 970 × 90 وهي في الغالب اكبر الوحدات وكان المحيط الذي يشمل تلك الوحدة بعرض الموقع بأكمله اي انه عندما يصبح عرض الشاشة اقل من 970 ستكون الوحدة الأعلانية في خطر الخروج من الشاشة معني ذلك انني سأقوم بأضافة الكود فوق </style> في الشفرة بالشكل التالي

@media(min-width: 970px) { .mido { width: 970px; height: 90px; } }

ومعني ذلك ان هذا الأعلان سيعمل فقط لنهاية عرض الشاشة 970 وسيكون الكود الجديد للشفرة

<style>
.mido { width: 320px; height: 50px; }
@media(min-width: 500px) { .mido { width: 468px; height: 60px; } }
@media(min-width: 800px) { .mido { width: 728px; height: 90px; } }
@media(min-width: 970px) { .mido { width: 970px; height: 90px; } }
</style>
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mido -->
<ins class="adsbygoogle mido"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

والكود للجديد للشفرة يفسر كيف ستعمل الوحدة المتجاوبة كالتالي: من العرض اللأنهائي موجباً إلي العرض 970 ستعمل الشفرة بجحم 970 × 90، ومن نهاية العرض 970 إلي العرض 800 ستعمل الشفرة بحجم 728 × 90، ومن نهاية العرض 800 إلي العرض 500 ستعمل الشفرة بحجم 468 × 60، وما هو دون ذلك ستعمل الشفرة الأساسية وهي 320 × 50.

هنا يتبقي سؤالين هامين كيف اعرف الوحدات التي المسموح بها في أدسنس والسؤال الثاني كيف استطيع توقع الوحدة المناسبة تبعاً لعرض الشاشة.

ما هي الوحدات المسموح بها في أدسنس؟

تعطيك أدسنس دليل كامل للوحدات التي تدعهما أدسنس من خلال هذا الدليل دليل أحجام الأعلانات

كيف تستطيع توقع الوحدة المناسبة لعرض شاشة موقعك؟

هناك العديد من المواقع التي توفر لك امكانية أختبار التجاوب في موقعك، مثل موقع ScreenQueri وهو موقع يحتاج للتسجيل فيه أولا ولكنه به العديد من المميزات الرائعة، وموقع ResponsiveTest.net وهو أيضا مناسب لهذا الأختبار

أما عن الطريقة التقليدية وهي ما أستخدمها وهي الأفضل والأسهل، هي من خلال متصفح جوجل كروم نفسه، في البداية قم بتقصير عرض شريط الادوات الخاص بالمتصفح قم بفتح اداة جوجل Developer tool من خلال الأزرار التالية Ctrl + shift + C وقم بتصغير حجم الشاشة الخاص بالمتصفح بأستخدام سهم الماوس

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

هناك نطقة أخري هامة جداً، أذا وضعت الشفرة بداخل عمود ما في الصفحة فأن التجاوب يؤخذ من عرض الشاشة كاملة وليس من عرض العمود او العنصر الموضوع بداخله الأعلان، بمعني انني وضعت الشفرة داخل عمود الموضوعات في مدونتي فعندما فان خروج الوحدة من عرض الموضوع عندها نقوم بعمل min-width من عرض الشاشة بأكملها وليس عرض عمود الموضوعات فقط.

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

عن الكاتب

محمد السيد وألقب ب (ميدو) مصري الوطن والجنسية، أبلغ من العمري 20 عاماً، بدأت في مجال التدوين في عام 2011، تدرجت في هذا المجال حتي يومنا هذا وقد بلغت من العلم قليله.

دروس التجاوب