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

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

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

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

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

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

שינוי הפריה של יחידת התוכן המותאם

פרמטר הפריסה (data-matched-content-ui-type) מאפשר לקבוע את הסדר של הטקסט והתמונות ביחידות עם תוכן מותאם. לדוגמה, אפשר לקבוע שתמונה וטקסט יופיעו זו לצד זה, זו מעל זה וכן הלאה.

אלו הן אפשרויות הפריסה הזמינות:

תמונה וטקסט, זו לצד זה

בפריסה זו, התמונה והטקסט מופיעים זו לצד זה. כדי לבחור בפריסה הזאת, מוסיפים את הפרמטר ‎data-matched-content-ui-type="image_sidebyside"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="image_sidebyside"‎
     data-matched-content-rows-num="4"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

Image and text side by side layout

תמונה וטקסט זו לצד זה, עם כרטיס

בפריסה זו, התמונה והטקסט מופיעים זו לצד זה בתוך כרטיס. כדי להשתמש בפריסה הזאת, מוסיפים את הפרמטר ‎data-matched-content-ui-type="image_card_sidebyside"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="image_card_sidebyside"‎
     data-matched-content-rows-num="4"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

Image and text side by side with card layout

תמונה מוערמת מעל לטקסט

בפריסה זו, התמונה והטקסט מסודרים זו על גבי זה. כדי לבחור בפריסה הזאת, מוסיפים את הפרמטר ‎data-matched-content-ui-type="image_stacked"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="image_stacked"‎
     data-matched-content-rows-num="3"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

Image stacked above text layout

תמונה מוערמת מעל טקסט, עם כרטיס

בפריסה זו, התמונה והטקסט מסודרים זו על גבי זה, בתוך כרטיס. כדי להשתמש בפריסה הזאת, מוסיפים את הפרמטר ‎data-matched-content-ui-type="image_card_stacked"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="image_card_stacked"‎
     data-matched-content-rows-num="3"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

Image stacked above text with card layout

טקסט בלבד

פריסה של טקסט בלבד, בלי תמונות. כדי להשתמש בפריסה הזאת מוסיפים את הפרמטר ‎data-matched-content-ui-type="text"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="text"‎
     data-matched-content-rows-num="4"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

text-only layout

טקסט עם כרטיס

פריסה של טקסט בלבד, עם כרטיס. כדי להשתמש בפריסה הזאת, מוסיפים את הפרמטר ‎data-matched-content-ui-type="text_card"‎ לקוד המודעה.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     ‎data-matched-content-ui-type="text_card"‎
     data-matched-content-rows-num="4"‎
     data-matched-content-columns-num="1"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

Text with card layout

ציון מספר השורות והעמודות ביחידה עם התוכן המותאם

ההמלצות שמוצגות בתוך היחידה עם התוכן המותאם מאורגנות ברשת. אפשר לציין את מספר השורות והעמודות שיופיעו ברשת. לדוגמה, אפשר להגדיר שיחידת התוכן המותאם תהיה ריבוע בגודל של 2x2, או עמודה בגודל של 4x1 וכן הלאה.

ההגדרה של מספר השורות מתבצעת באמצעות הפרמטר data-matched-content-rows-num וההגדרה של מספר העמודות מתבצעת באמצעות הפרמטר data-matched-content-columns-num. יש להגדיר את שני הפרמטרים ואת data-matched-content-ui-type יחד.

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

דוגמאות לשורות ולעמודות

4x1 (נייד ומחשב שולחני)

דוגמת הקוד הבאה ממחישה איך יוצרים יחידת תוכן מותאם עם ארבע שורות ועמודה אחת כדי להציג ארבע המלצות בסה"כ.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     data-matched-content-rows-num="4"‎
     data-matched-content-columns-num="1"‎
     ‎data-matched-content-ui-type="image_stacked"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

4x1 grid

2x2 (נייד ומחשב שולחני)

דוגמת הקוד הבאה ממחישה איך יוצרים יחידת תוכן מותאם עם שתי שורות ושתי עמודות כדי להציג ארבע המלצות בסה"כ.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     data-matched-content-rows-num="2"‎
     data-matched-content-columns-num="2"‎
     ‎data-matched-content-ui-type="image_stacked"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

2x2 grid

3x3 (נייד ומחשב שולחני)

דוגמת הקוד הבאה ממחישה איך יוצרים יחידת תוכן מותאם עם שלוש שורות ושלוש עמודות כדי להציג תשע המלצות בסה"כ.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     data-matched-content-rows-num="3"‎
     data-matched-content-columns-num="3"‎
     ‎data-matched-content-ui-type="image_stacked"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

3x3 grid

4x1 (נייד) ו-2x2 (מחשב) לאתרים רספונסיביים

דוגמת הקוד הבאה ממחישה כיצד ליצור יחידת תוכן מותאם עם רשת בגודל 4x1 לנייד ורשת בגודל 2x2 למחשב. מומלץ להשתמש בהגדרה הזאת אם יש לכם אתר רספונסיבי.

‎<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">‎</script>‎
‎<!-- pbad -->‎
‎<ins class="adsbygoogle"‎
     style="display:block"‎
     ‎data-ad-client="ca-pub-xxxxxxxxx"‎
     ‎data-ad-slot="1234567890"‎
     data-matched-content-rows-num="4,2"‎
     data-matched-content-columns-num="1,2"‎
     data-matched-content-ui-type="image_stacked,image_stacked"‎
     ‎data-ad-format="autorelaxed"></ins>‎
<script>
‎(adsbygoogle = window.adsbygoogle || []).push({});‎
‎</script>‎

4x1 grid

2x2 grid

יש לכם משוב?

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

פתרון בעיות

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

יחידת התוכן המותאם שלך ריקה

יש 2 סיבות אפשריות לכך:

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

יחידת התוכן המותאם מכילה פחות המלצות מהצפוי

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

ההמלצות שלך הן מסוג טקסט בלבד

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

שימוש במסוף (DevTools Console) כדי לאתר שגיאות ביחידות התוכן המותאם שלך

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

בדפדפן Chrome אפשר לבצע את הצעדים הבאים כדי לבדוק את קוד המודעה באמצעות DevTools Console:

  1. נכנסים לדף שמכיל את יחידות התוכן המותאם.
  2. הקשה על Ctrl+Shift+J (‏Windows / Linux‏) או על Cmd+Opt+J (‏Mac‏).
  3. בודקים אם יש הודעות שגיאה בחלונית המסוף.
האם המידע הועיל?
איך נוכל לשפר את המאמר?