יחידות מודעות

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

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

חשוב:

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

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

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

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

  • למסכים ברוחב של עד 500 פיקסלים: יחידת מודעות בגודל 320‏x‏100.
  • למסכים ברוחב של 500-‏799 פיקסלים: יחידת מודעות בגודל 468‏x‏60.
  • למסכים ברוחב של 800 פיקסלים ומעלה: יחידת מודעות בגודל 728‏x‏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="//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>

כדי להתאים את קוד הדוגמה הזה לאתר שלכם:

  1. יוצרים יחידת מודעות לרשת המדיה בחשבון AdSense ומקפידים להשאיר את האפשרות רספונסיבי מסומנת בקטע "גודל מודעה". יש לרשום את הפרטים הבאים הכלולים בקוד המודעה הרספונסיבית:
    • מזהה בעל האתר. למשל, ca-pub-1234567891234567‏
    • מזהה יחידת המודעות (data-ad-slot), למשל: 1234567890.
  2. באותו הקוד:
    • מחליפים את כל המופעים של example_responsive_1 בשם ייחודי, למשל Home_Page‏, front_page_123 וכו'.
      הערות:
      • השם הייחודי שלך חייב לכלול רק אותיות באנגלית (A-Z), מספרים וקווים תחתונים, והתו הראשון חייב להיות אות באנגלית.
      • עליך להשתמש בשם ייחודי שונה בכל פעם שאתה משנה את קוד הדוגמה.
    • החלף את ca-pub-XXXXXXX11XXX9 במזהה בעל האתר שלך.
    • החלף את 8XXXXX1 במזהה יחידת המודעות שלך.
  3. בחר באיזה גודל אתה רוצה שתופיע יחידת המודעות שלך ביחס לרוחב המסך:
    • אם אתה מרוצה מהגדלים הקיימים של יחידת המודעות בקוד הדוגמה, אינך צריך לבצע שינויים נוספים.
    • אם ברצונך להגדיר גדלים שונים ליחידת המודעות לפי רוחב מסך, עליך לבצע את השינויים הבאים בקוד הדוגמה:
      • החלף את 320px ו-100px ברוחב ובגובה של יחידת המודעות שבה ברצונך להשתמש במסכים ברוחב של עד 500 פיקסלים.
      • החלף את 468px ו-60px ברוחב ובגובה של יחידת המודעות שבה ברצונך להשתמש במסכים ברוחב של בין 500 ל-799 פיקסלים.
      • החלף את 728px ו-90px ברוחב ובגובה של יחידת המודעות שבה ברצונך להשתמש במסכים ברוחב של 800 פיקסלים ומעלה.
  4. מעתיקים ומדביקים את קוד המודעה החדש בקוד ה-HTML המקורי של הדף שבו רוצים להציג את המודעות.
    הערה: אחרי ההצבה של קוד המודעה, מומלץ לבדוק איך המודעות מוצגות במכשירים ובמסכים שונים כדי לוודא שההתנהגות הרספונסיבית פועלת כראוי.

דוגמאות לתכונות מתקדמות של קוד למודעות רספונסיביות

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

הערה: לא מומלץ להשתמש בתכונות המתקדמות האלה אם אתם לא בטוחים שתוכלו לשנות את קוד המודעה באופן הרצוי.

בחירת רוחב ניתן להרחבה וגובה קבוע

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

דוגמה לרוחב ניתן להרחבה עם גובה קבוע
דוגמה זו מציגה כיצד לשנות את קוד המודעה לאתר בעיצוב דינמי, כך שתציין גובה קבוע של 90 פיקסלים ורוחב משתנה מ-400 פיקסלים לכל הפחות ועד 970 פיקסלים לכל היותר:
‎<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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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:inline-block;"‎
    ‎data-ad-client="ca-pub-1234"‎
    ‎data-ad-slot="5678"></ins>‎
‎<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>‎
‎<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>‎
כללי ‎@media‎ הם תחביר של CSS3 והם נתמכים בכל הדפדפנים המודרניים. אם תרצה לתמוך בדפדפנים ישנים יותר, כגון Internet Explorer 7 או גרסאות קודמות, אנו מציעים לציין תחילה ברירת מחדל לגודל. כך תבטיח שהמודעה תוצג גם כאשר אין תמיכה בשאילתות מדיה. שים לב, אין תמיכה רשמית בהגדרת הגודל של קוד המודעה באמצעות CSS בגיליונות סגנונות חיצוניים.

הסתרה של יחידת מודעות

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

דוגמה להסתרת מודעות לגדלים מסוימים של מסך
אם אתה רוצה להציג מודעות עבור גודלי מסך מסוימים בלבד, אתה יכול להשתמש ב-CSS. הדוגמה הבאה מראה כיצד לשנות את קוד המודעה כדי להסתיר מודעות למסכים בגדלים מסוימים, באמצעות בשאילתות מדיה של CSS3:
‎<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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>‎
‎<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>‎

בדוגמה הזו לא יוצגו מודעות אם רוחב המסך קטן מ-400 פיקסלים.

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