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

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

לפני שמתחילים:

• אם אין לכם ניסיון עם שאילתות מדיה ב-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 פיקסלים.

הערה: כשאתם משנים את הקוד של המודעות הרספונסיביות שהעתקתם, אתם צריכים למחוק את שתי השורות הבאות:
data-ad-format="auto"‎
data-full-width-responsive="true"‎

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