איך לשנות את הקוד של מודעות רספונסיביות

אם קוד המודעות הרספונסיביות שלנו לא עונה על כל הצרכים, אתם יכולים לשנות אותו כך שהוא יתאים לאתר הרספונסיבי שלכם. בדוגמאות הבאות מוצגות הדרכים הנכונות לשנות את הקוד.

חשוב:

• אם אין לכם ניסיון עם שאילתות מדיה ב-CSS ואתם משנים את קוד המודעות, מומלץ להתחיל עם הדוגמה בנושא גודל מדויק של יחידת מודעות לפי רוחב מסך.
• אם יש לכם ניסיון עם שאילתות מדיה ב-CSS ואתם משנים את קוד המודעות, אפשר לעבור ישירות לקטע דוגמאות בנושא תכונות מתקדמות של קוד למודעות רספונסיביות.

הערה: בדוגמאות שמופיעות במאמר הזה מוצגים שינויים מותרים בקוד המודעות של AdSense. ביצוע השינויים הנתמכים האלה בקוד של המודעה הרספונסיבית לא יהווה הפרה של מדיניות התוכנית של AdSense.

דוגמה לגודל מדויק של יחידת מודעות לפי רוחב מסך

בדוגמה זו תוכלו לראות כיצד לשנות קוד לעיצוב דינמי כדי להגדיר גדלים ספציפיים של יחידות מודעה לשלושה טווחים של רוחב מסך, כמו למשל בנייד, בטאבלט או במחשב. לא נדרש ניסיון קודם עם שאילתות מדיה של CSS או עם שינוי קוד מודעה של AdSense כדי להבין את הדוגמה הזו.

בהמשך אפשר לראות קוד מודעה לאתר בעיצוב דינמי לאחר שינוי שמגדיר את הגדלים המדויקים הבאים של יחידת מודעות לפי רוחב המסך:

• למסכים ברוחב של עד 500 פיקסלים: יחידת מודעות בגודל 320‏x‏100.
• למסכים ברוחב של 500-‏799 פיקסלים: יחידת מודעות בגודל 468‏x‏60.
• למסכים ברוחב של 800 פיקסלים ומעלה: יחידת מודעות בגודל 728x90.

‎<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. קובעים את הגדלים הרצויים של יחידת המודעות לפי רוחב מסך:
   • אם אתם מרוצים מהגדלים הקיימים של יחידת המודעות בקוד לדוגמה, אין צורך בשינויים נוספים.
   • כדי להגדיר גדלים שונים של יחידת המודעות לפי רוחב מסך, צריך לבצע את השינויים הבאים בקוד לדוגמה:
     • מחליפים את 320px ו-100px ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש, לערכי רוחב מסך של עד 500 פיקסלים.
     • מחליפים את 468px ו-60px ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש במסכים ברוחב של בין 500 ל-799 פיקסלים.
     • מחליפים את 728px ו-90px ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש במסכים ברוחב של 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 פיקסלים.

למרות הגמישות הזו, חשוב לפעול בהתאם למדיניות בנושא מיקומי מודעות. צריך לזכור שמדיניות התוכנית שלנו מגבילה את השינויים שמותר לבצע בקוד.