אם קוד המודעות הרספונסיביות שלנו לא עונה על כל הצרכים, אתם יכולים לשנות אותו כך שהוא יתאים לאתר הרספונסיבי שלכם. בדוגמאות הבאות מוצגות הדרכים הנכונות לשנות את הקוד.
חשוב:
- אם אין לכם ניסיון עם שאילתות מדיה ב-CSS ואתם משנים את קוד המודעות, מומלץ להתחיל עם הדוגמה בנושא גודל מדויק של יחידת מודעות לפי רוחב מסך.
- אם יש לכם ניסיון עם שאילתות מדיה ב-CSS ואתם משנים את קוד המודעות, אפשר לעבור ישירות לקטע דוגמאות בנושא תכונות מתקדמות של קוד למודעות רספונסיביות.
דוגמה לגודל מדויק של יחידת מודעות לפי רוחב מסך
בדוגמה זו תוכלו לראות כיצד לשנות קוד לעיצוב דינמי כדי להגדיר גדלים ספציפיים של יחידות מודעה לשלושה טווחים של רוחב מסך, כמו למשל בנייד, בטאבלט או במחשב. לא נדרש ניסיון קודם עם שאילתות מדיה של CSS או עם שינוי קוד מודעה של AdSense כדי להבין את הדוגמה הזו.
בהמשך אפשר לראות קוד מודעה לאתר בעיצוב דינמי לאחר שינוי שמגדיר את הגדלים המדויקים הבאים של יחידת מודעות לפי רוחב המסך:
- למסכים ברוחב של עד 500 פיקסלים: יחידת מודעות בגודל 320x100.
- למסכים ברוחב של 500-799 פיקסלים: יחידת מודעות בגודל 468x60.
- למסכים ברוחב של 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>
כדי להתאים את הקוד לדוגמה לאתר שלכם:
- יוצרים יחידת מודעות לרשת המדיה בחשבון AdSense ומקפידים להשאיר את האפשרות רספונסיבי מסומנת בקטע 'גודל מודעה'. יש לרשום את הפרטים הבאים, שמופיעים בקוד המודעות הרספונסיביות:
- המזהה של בעל התוכן הדיגיטלי. לדוגמה: ca-pub-1234567890123456
- מזהה יחידת המודעות (
data-ad-slot
). לדוגמה: 1234567890.
- בקוד לדוגמה:
- מחליפים את כל המופעים של
example_responsive_1
בשם ייחודי, למשל Home_Page, front_page_123 וכולי.הערות:- השם הייחודי חייב לכלול רק אותיות באנגלית (A-Z), מספרים וקווים תחתונים. התו הראשון חייב להיות אות באנגלית.
- עליכם להשתמש בשם ייחודי שונה בכל פעם שאתם משנים את קוד הדוגמה.
- מחליפים את
ca-pub-1234567890123456
במזהה בעל התוכן הדיגיטלי שלכם. - מחליפים את הקטע
8XXXXX1
במזהה של יחידת המודעות.
- מחליפים את כל המופעים של
- קובעים את הגדלים הרצויים של יחידת המודעות לפי רוחב מסך:
- אם אתם מרוצים מהגדלים הקיימים של יחידת המודעות בקוד לדוגמה, אין צורך בשינויים נוספים.
- כדי להגדיר גדלים שונים של יחידת המודעות לפי רוחב מסך, צריך לבצע את השינויים הבאים בקוד לדוגמה:
- מחליפים את
320px
ו-100px
ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש, לערכי רוחב מסך של עד 500 פיקסלים. - מחליפים את
468px
ו-60px
ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש במסכים ברוחב של בין 500 ל-799 פיקסלים. - מחליפים את
728p
x ו-90px
ברוחב ובגובה של יחידת המודעות שבה רוצים להשתמש במסכים ברוחב של 800 פיקסלים ומעלה.
- מחליפים את
- מעתיקים את קוד המודעות החדש ומדביקים אותו בקוד המקור ב-HTML של הדף שבו רוצים להציג את המודעות.
הערה: אחרי ההצבה של קוד המודעה, מומלץ לבדוק איך המודעות מוצגות במכשירים ובמסכים שונים כדי לוודא שההתנהגות הרספונסיבית פועלת כראוי.
דוגמאות לתכונות מתקדמות של קוד למודעות רספונסיביות
אם קוד המודעות הרספונסיביות שלנו לא עונה על כל הצרכים, אתם יכולים לשנות אותו כדי לציין גודל מדויק של יחידת מודעות באמצעות CSS.
בחירת רוחב ניתן להרחבה וגובה קבוע
אפשר לשנות את קוד המודעה לאתר בעיצוב דינמי כך שתציין רוחב ניתן להרחבה וגובה קבוע של יחידת המודעות שלכם, באמצעות CSS. הדוגמה הבאה מציגה איך לבצע את השינויים:
<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. בדוגמה הבאה אפשר לראות איך לבצע את השינויים:
<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 כך שלא תישלח בקשה להצגת מודעה ולא תוצג מודעה. בדוגמה הבאה אפשר לראות איך לבצע את השינויים:
<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 פיקסלים.