שינוי הפריסה מתרחש כשרכיב גלוי בדף משתנה במיקום או בגודל שלו, ומשפיע על המיקום של התוכן שמסביב. לפעמים השינוי מכוון, למשל כשקונטיינר מתרחב כתוצאה מפעולת משתמש. עם זאת, הטבע הדינמי של המודעות עלול להוביל לשינויים לא צפויים בפריסת האתר, שמשפיעים לרעה על חוויית המשתמש ויכולים לגרום לבעיות חמורות בנוחות השימוש.
במדריך הזה נסביר איך למדוד את השינויים בפריסת האתר ולצמצם אותם כשעובדים עם תגי Google Publisher Tag (GPT).
איך מודעות גורמות לשינוי בפריסת האתר
הבקשה להצגת מודעות בדרך כלל מתבצעת באופן אסינכרוני ודינמי לדף שלכם, במהלך טעינת הדף או אחריה. בזמן אחזור המודעות, שאר הדף ממשיך להיטען וייתכן שתוכן שאינו מודעה יהיה גלוי למשתמש. אם לא תשמרו מספיק מקום כדי להציג את המודעות, הן עלולות להחליף תוכן גלוי שלא קשור למודעות בסופו של דבר להוסיף אותן לדף.
כשעובדים עם Google Publisher Tag, יש כמה נקודות במחזור החיים של המודעות שבהן יכול להיות שינוי בפריסה:
- כשמתבצעת קריאה אל
display(). חריץ יכול להתרחב או להתכווץ, בהתאם לאופן שבו הוא הוגדר. - כשמתבצע רינדור של תוכן המודעה. יכול להיות שגודל המיקום יוגדר מחדש אם תוצג בו מודעה דינמית או אם אין מספיק מקום אחרת. יכול להיות גם שהתצוגה של החריץ תתרחב או תתכווץ בשלב הזה, בהתאם לאופן שבו הוא הוגדר.
- אחרי שתוכן המודעה עבר עיבוד. סוגים מסוימים של נכסי קריאייטיב נועדו להתרחב אחרי שהם מופיעים בדף.
חשוב לזכור שככל שמיקום המודעה בדף גבוה יותר בחלון התצוגה, כך יש לה יותר פוטנציאל להסתיר תוכן. חשוב להקפיד במיוחד על מיקומי מודעות בחלק העליון של אזור התצוגה הראשוני (מעל למסך). שטחי הפרסום האלה יכולים לגרום לשינוי לא פרופורציונלי בפריסת האתר, כי סביר יותר שהם יהיו גלויים כשתוכן המודעה שלהם נטען.
מדידת שינויי פריסה
Cumulative Layout Shift (CLS) הוא מדד של מדדי הליבה לבדיקת חוויית המשתמש באתר שבעזרתו אפשר למדוד את ההשפעה של תזוזות בפריסת הדף על האתר, גם במעבדה וגם בשטח.
במעבדה
כלים למעבדה מודדים את CLS באופן סינתטי. המשמעות היא שהן לא מסתמכות על אינטראקציה של משתמשים אמיתיים, ולכן הן מתאימות לשימוש בשילוב רציף ובתהליכי פיתוח מקומיים. עם זאת, הכלים האלו בדרך כלל מודדים את הביצועים רק במהלך טעינת הדף, והתנאים שהם יכולים להיות מוגבלים בתנאים שהם יכולים להיות דומים, ולכן הערכים המדווחים עשויים להיות נמוכים יותר ממה שמשתמש אמיתי יחים.
Publisher Ads Audits for Lighthouse הוא כלי שאפשר להשתמש בו למדידת CLS שאפשר לשייך באופן ספציפי למודעות GPT. פרטים נוספים זמינים במסמכי התיעוד של הביקורת בנושא צמצום השינויים בתצוגה של הפריסה שקשורים למודעות.
אפשר גם להגדיר את הכלים למפתחים של Chrome כך שידגישו שינויים בפריסה בזמן הניווט באתר. אפשר להשתמש באפשרות הזו כדי לזהות באופן ידני שינויים בפריסה שמתרחשים ליד מיקומי מודעות בדף.
בשדה
כלים לשדה מודדים את זמן הטעינה של דף הנחיתה (CLS) שחווים משתמשים אמיתיים במהלך האינטראקציה שלהם עם האתר. התהליך הזה נקרא בדרך כלל 'מעקב אחר משתמשים אמיתיים' (RUM). RUM מאפשר לכם לראות איך CLS מושפע מגורמים מהעולם האמיתי, כמו יכולות המכשיר, תנאי הרשת, האינטראקציה של המשתמשים וההתאמה האישית של הדף. לרוב קשה או בלתי אפשרי לדמות את הגורמים האלה באמצעות בדיקות סינתטיות.
צמצום שינוי הפריסה
הדרך היחידה למנוע שינוי בפריסה היא לשריין מספיק מקום למיקום מודעה נתון באמצעות CSS. הדרך היעילה ביותר לעשות זאת היא להגדיר גובה ורוחב קבועים ישירות במקום של מודעה div. עם זאת, הפתרון הזה מתאים מאוד למיקומי מודעות סטטיים בגודל קבוע, אבל בתרחישים מורכבים יותר ייתכן שתצטרכו גישה מורכבת יותר. בקטעים הבאים מוסבר על כמה תרחישים נפוצים.
מיקומי מודעות מרובי גדלים
ביחס למיקומי מודעות שתומכים במספר גדלים, מומלץ להשתמש באחת מהגישות הבאות:
- שומרים מקום לגודל הגדול ביותר שהוגדר להצגה.
- שומרים מקום לגודל הקטן ביותר שהוגדר להצגה.
- שיריוּן השטח בהתאם לגודל עם הסיכוי הגבוה ביותר להציג מודעות, בהתאם לבחינת נתוני מילוי היסטוריים מהדוחות של Google Ad Manager.
בחירת הגישה המתאימה
הדרך היעילה ביותר למנוע שינויים בפריסה היא להקצות מקום לגודל הגדול ביותר שהוגדר להצגה. עם זאת, השיטה הזו עלולה לגרום למרחב ריק נוסף סביב המודעה, במקרה שמוצג קריאייטיב קטן מהגודל ששמור. צמצום של מיקום המודעה כך שיתאים לגודל הקריאייטיב המוצג יגרום לשינוי נוסף בפריסת המודעות, לכן מומלץ להימנע מכך. במקום זאת, אפשר להשתמש במרכז אנכי ואופקי כדי לצמצם את ההשפעה החזותית של שטח ריק עודף.
לעומת זאת, אם שומרים מקום לגודל הקטן ביותר שהוגדר להצגה, אפשר למנוע שטח ריק מיותר סביב המודעה. זו יכולה להיות אפשרות טובה אם מיקום המודעה בדרך כלל מתמלא בקריאייטיבים קטנים יותר, או במקרים שבהם כל הגדלים שתומכים במיקום המודעה דומים. עם זאת, השיטה הזו גורמת לשינוי בפריסת המודעות במקרה שמוצג קריאייטיב גדול מהגודל ששמורה לו מקום (אבל בדרך כלל השינויים האלה קטנים יותר בהשוואה למקרה שלא שומרים מקום בכלל).
כדי לשמור על איזון בין שטח ריק לבין שינויים בפריסה, אפשר להקצות כמות 'ממוצעת' של שטח למיקומי המודעות. לדוגמה, כשמשריינים 100px בכיוון אנכי, נוצר קצת מקום ריק כשמוצג נכס קריאייטיב מסוג 320x50, אבל ציון ה-CLS יורד בהשוואה למצב שבו לא שומרים מקום בכלל. תצטרכו להתנסות בגדלים שונים כדי למצוא את האיזון הטוב ביותר לאתר שלכם.
כשמגדירים את נפח המקום שרוצים להקצות למיקום מודעה מסוים, כדאי לבדוק את נתוני המילוי ההיסטוריים בדוחות של Google Ad Manager כדי לקבל החלטה מושכלת יותר. הדרך הטובה ביותר להמחיש את זה היא להציג כמה דוגמאות.
דוגמה ראשונה
| גודל הקריאייטיב (שנשלח) | חשיפות של שרת המודעות (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
במקרה כזה, הזמנת 250px בפורמט אנכי יכולה לצמצם באופן משמעותי את CLS, מאחר שרוב הקריאייטיבים שמוצגים הם 300x250.
דוגמה 2
| גודל הקריאייטיב (שנשלח) | חשיפות בשרת המודעות (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
במקרה כזה, רוב המודעות הן בגובה של 90px לכל היותר, ולכן הזמנת 90px מודעות אנכיות אמורה למנוע שינוי בפריסת המודעות ברוב המקרים.
איך להזמין מקום
מומלץ לפתור את הבעיה הזו על ידי ציון הגודל של מקום המודעה באמצעות מאפייני ה-CSS min-height ו-min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
שימוש במאפיינים min-height ו-min-width מאפשר לכם להקצות כמות מינימלית של מקום למיקום המודעה, ועדיין לאפשר לדפדפן להגדיל את הגודל של המאגר לפי הצורך. כך תוכלו לוודא שלא ייחתך תוכן במקרה שמוצג קריאייטיב גדול יותר.
אפשר לשלב את הטכניקה הזו עם שאילתות מדיה ב-CSS כדי לציין ערכי מינימום שונים לגדלי מסך שונים:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
מומלץ להימנע משימוש ב-JavaScript כדי להקצות מקום, כי הפעולה הזו עלולה לגרום לשינוי בפריסה בזמן הטעינה של הסקריפט. הזמנת מקום באמצעות שירות CSS מונעת את הסיכון.
מיקומי מודעות דינמיים
במודעות בפורמט גמיש אין הגדרה של קבוצה קבועה של גדלים שתומכים בהם. במקום זאת, הגודל של שטחי הפרסום האלה משתנה באופן אוטומטי בהתאם לתוכן הקריאייטיב שמוצג בהם, וכך הם יכולים לתמוך בקריאייטיבים בגדלים שונים. כתוצאה מכך, אי אפשר להזמין מקום עבור המיקומים האלה לפני שמבקשים תוכן של מודעות, ומודעות בגודל דינמי תמיד גורמות לשינויים בפריסת האתר.
כדי לצמצם את ההשפעות של שינויים בפריסת המודעות כשעובדים עם משבצות מודעות גמישות, מומלץ:
- מומלץ להשתמש בגודל
fluidרק במודעות שמתחת לקצה המסך. - כדאי לאחזר מיקומי מודעות דינמיים מוקדם ככל האפשר כדי למזער את הסיכוי שהמשתמשים יגללו אותם לתצוגה לפני שינוי הגודל של המיקום.
כיווץ והרחבה של מיקומי מודעות
השיטה collapseEmptyDivs() מאפשרת לכווץ את הקטעים של מיקומי המודעות, כך שלא יתפסו מקום בדף כשאין תוכן של מודעה להצגה. עם זאת, יש להשתמש בתכונה הזו בזהירות כי היא עלולה לגרום לשינויים לא רצויים בפריסה. כפי שצוין בקטע הקודם, כיווץ והרחבה של משבצות מודעות עלולים לגרום לשינויים בפריסה בשתי נקודות שונות במחזור החיים של המודעה.
אם אתם צריכים להשתמש בתכונה הזו, תוכלו לצמצם את ההשפעה של שינויים בפריסה על ידי שימוש בנתוני מילוי היסטוריים מהדוחות של Ad Manager, כדי להטמיע את השיטות המומלצות הבאות:
- תמיד כדאי להתחיל עם הרחבה של משבצות שיש סיכוי שיתמלאו.
- תמיד כדאי להתחיל עם קיפול של משבצות שלא צפויות להתמלא.
דוגמה להטמעה מפורטת זמינה בקטע כיווץ של משבצות מודעות ריקות.