שינוי בפריסה מתרחש כשרכיב גלוי בדף משתנה במיקום או בגודל, וכתוצאה מכך משתנה המיקום של התוכן שמסביב לו. לפעמים השינוי מכוון, למשל כשקונטיינר מתרחב כתוצאה מפעולת משתמש. עם זאת, הטבע הדינמי של המודעות עלול להוביל לשינויים לא צפויים בפריסה, שמשפיעים לרעה על חוויית המשתמש ויכולים לגרום לבעיות חמורות בנוחות השימוש.
במדריך הזה נסביר איך למדוד את השינויים בפריסת האתר ולצמצם אותם כשעובדים עם תגי Google Publisher Tag (GPT).
איך מודעות גורמות לשינוי בפריסת האתר
בדרך כלל, הבקשות להצגת מודעות מתבצעות באופן אסינכררוני, והן מוסיפות תוכן לדף באופן דינמי במהלך הטעינה של הדף או אחריה. בזמן אחזור המודעות, שאר הדף ממשיך להיטען וייתכן שתוכן שאינו מודעה יהיה גלוי למשתמש. אם לא תקצרו מספיק מקום למודעות שנטענות, הן עלולות להזיז תוכן גלוי שאינו מודעה כשהן יתווספו לדף.
כשעובדים עם תגי Google Publisher, יש כמה נקודות במחזור החיים של המודעה שבהן יכולה להתרחש שינוי בפריסה:
- כשהפונקציה
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 כדי לקבל החלטה מושכלת יותר. הדרך הטובה ביותר להמחיש זאת היא להציג כמה דוגמאות.
דוגמה מס' 1
| גודל הקריאייטיב (שנשלח) | חשיפות בשרת המודעות (%) |
|---|---|
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() מאפשרת לכווץ את ה-div של שטחי המודעות כדי שהם לא יתפסו מקום בדף כשאין תוכן של מודעות להצגה. עם זאת, יש להשתמש בתכונה הזו בזהירות כי היא עלולה לגרום לשינויים לא רצויים בפריסה. כפי שצוין בקטע הקודם, כיווץ והרחבה של משבצות מודעות עלולים לגרום לשינויים בפריסה בשתי נקודות שונות במחזור החיים של המודעה.
אם אתם צריכים להשתמש בתכונה הזו, תוכלו לצמצם את ההשפעה של שינויים בפריסה על ידי שימוש בנתוני מילוי היסטוריים מהדוחות של Ad Manager, כדי להטמיע את השיטות המומלצות הבאות:
- תמיד כדאי להתחיל עם הרחבה של משבצות שסביר להניח שיתמלאו.
- תמיד כדאי להתחיל עם קיפול של משבצות שלא צפויות להתמלא.
דוגמה להטמעה מפורטת זמינה בקטע כיווץ של משבצות מודעות ריקות.