تغییر چیدمان زمانی اتفاق می افتد که یک عنصر قابل مشاهده در صفحه شما موقعیت یا اندازه را تغییر می دهد و بر موقعیت محتوای اطراف آن تأثیر می گذارد. گاهی اوقات تغییر در نظر گرفته شده است، مانند زمانی که یک ظرف در نتیجه یک اقدام کاربر گسترش می یابد. با این حال، ماهیت پویای تبلیغات می‌تواند منجر به تغییرات غیرمنتظره طرح‌بندی شود که تأثیر منفی بر تجربه کاربر دارد و می‌تواند باعث ایجاد مشکلات جدی در قابلیت استفاده شود.
این راهنما نحوه اندازه‌گیری و به حداقل رساندن تغییر طرح را هنگام کار با برچسب‌های ناشر Google (GPT) توضیح می‌دهد.
چگونه تبلیغات باعث تغییر چیدمان می شود
تبلیغات معمولاً به صورت ناهمزمان درخواست می شوند و به صورت پویا محتوا را در حین یا پس از بارگذاری صفحه به صفحه شما اضافه می کنند. در حالی که تبلیغات در حال واکشی هستند، بقیه صفحه به بارگیری ادامه می‌دهد و ممکن است محتوای غیر تبلیغاتی برای کاربر قابل مشاهده باشد. اگر فضای کافی برای تبلیغات در حال بارگذاری رزرو نکنید، در نهایت می‌توانند محتوای غیر تبلیغاتی قابل مشاهده را در نهایت به صفحه اضافه کنند.
هنگام کار با برچسب‌های ناشر Google، چند نکته در چرخه عمر تبلیغات وجود دارد که ممکن است تغییر طرح‌بندی رخ دهد:
- هنگامی که
display()فراخوانی می شود. یک اسلات بسته به نحوه پیکربندی آن ممکن است بزرگ یا جمع شود. - هنگامی که محتوای تبلیغاتی ارائه می شود. اگر یک تبلیغ روان ارائه شود یا اگر فضای کافی در دسترس نباشد، ممکن است اندازه یک شکاف تغییر کند. یک اسلات نیز بسته به نحوه پیکربندی آن ممکن است در این نقطه بزرگ یا جمع شود.
- پس از ارائه محتوای تبلیغاتی برخی از انواع خلاقانه برای گسترش پس از ظاهر شدن در صفحه طراحی شده اند.
به خاطر داشته باشید که هرچه یک جایگاه تبلیغاتی در قسمت دید بالاتر باشد، محتوای بیشتری می تواند جابجا شود. مراقب شکاف های نزدیک بالای درگاه دید اولیه (بالای تاشو) باشید. این اسلات‌ها می‌توانند مقدار نامتناسبی از جابجایی طرح‌بندی ایجاد کنند، زیرا احتمال بیشتری وجود دارد که هنگام بارگیری محتوای تبلیغاتی آنها قابل مشاهده باشند.
اندازه گیری تغییر چیدمان
تغییر چیدمان تجمعی (CLS) یک معیار اصلی Web Vitals است که می‌توانید از آن برای تعیین کمیت تأثیر تغییرات طرح‌بندی بر روی سایت خود، هم در آزمایشگاه و هم در زمینه استفاده کنید.
در آزمایشگاه
ابزارهای آزمایشگاهی CLS را به صورت مصنوعی اندازه گیری می کنند. این بدان معنی است که آنها بر تعامل واقعی کاربر متکی نیستند، و آنها را برای استفاده در یکپارچه سازی مداوم و گردش کار توسعه محلی مناسب می کند. با این حال، این ابزارها معمولاً فقط عملکرد را در حین بارگذاری صفحه اندازه‌گیری می‌کنند و در شرایطی که می‌توانند شبیه‌سازی کنند محدود هستند، بنابراین مقادیر گزارش‌شده ممکن است کمتر از آنچه یک کاربر واقعی تجربه می‌کند باشد.
Publisher Ads Audits for Lighthouse ابزاری است که می تواند برای اندازه گیری CLS که به طور خاص به تبلیغات GPT نسبت داده می شود، استفاده شود. برای جزئیات، به مستندات حسابرسی شیفت طرح بندی مربوط به کاهش آگهی مراجعه کنید.
Chrome DevTools همچنین می‌تواند به گونه‌ای پیکربندی شود که تغییرات طرح‌بندی را در حین پیمایش در سایت خود برجسته کند . این می تواند برای شناسایی دستی تغییرات طرح بندی که در نزدیکی جایگاه های تبلیغاتی در صفحه شما رخ می دهد استفاده شود.
در میدان
ابزارهای میدانی 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 به صورت عمودی باید از تغییر چیدمان در بیشتر مواقع جلوگیری کند.
نحوه رزرو فضا
توصیه می‌کنیم با مشخص کردن اندازه فضای تبلیغاتی خود از طریق ویژگی‌های min-height و min-width CSS، با این مشکل مقابله کنید:
<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;
}
}
از رزرو فضا با جاوا اسکریپت باید اجتناب شود، زیرا انجام این کار می تواند منجر به تغییر طرح در زمان بارگیری اسکریپت شود. رزرو فضا با CSS از این خطر جلوگیری می کند.
اسلات های تبلیغاتی روان
اسلات های تبلیغاتی سیال مجموعه ثابتی از اندازه هایی را که پشتیبانی می کنند مشخص نمی کنند. در عوض، این اسلات‌ها به‌طور خودکار اندازه‌شان را تغییر می‌دهند تا با محتوای خلاقانه ارائه‌شده به آنها تناسب داشته باشد و به آنها اجازه می‌دهد از خلاقیت‌های با اندازه نامشخص پشتیبانی کنند. در نتیجه، امکان رزرو فضا برای این اسلات‌ها قبل از درخواست محتوای تبلیغاتی وجود ندارد، و تبلیغات با اندازه روان همیشه باعث تغییر طرح‌بندی می‌شوند.
برای کاهش اثرات تغییر چیدمان هنگام کار با اسلات های تبلیغاتی سیال، موارد زیر را توصیه می کنیم:
- فقط از اندازه
fluidبرای شکاف های زیر تاشو استفاده کنید. - اسلات های مایع را در اسرع وقت واکشی کنید تا احتمال اینکه کاربر قبل از تغییر اندازه شکاف، آنها را در معرض دید قرار دهد، به حداقل برسد.
در حال فروپاشی و گسترش جایگاه های تبلیغاتی
متد collapseEmptyDivs() به شما این امکان را می دهد که div های اسلات تبلیغاتی را جمع کنید تا زمانی که محتوای تبلیغاتی برای نمایش وجود ندارد، فضایی را در صفحه اشغال نکنند. با این حال، این ویژگی باید با احتیاط مورد استفاده قرار گیرد زیرا می تواند تغییرات ناخواسته طرح را ایجاد کند. همانطور که در بخش قبل ذکر شد، جمع شدن و گسترش شکاف های تبلیغاتی می تواند باعث تغییر طرح در دو نقطه مختلف در چرخه عمر تبلیغ شود.
اگر می‌خواهید از این ویژگی استفاده کنید، می‌توانید با استفاده از داده‌های پر تاریخی از گزارش Ad Manager برای اجرای بهترین شیوه‌های زیر، تأثیر تغییرات طرح‌بندی را کاهش دهید:
- شکاف هایی که احتمالا پر می شوند باید همیشه گسترش یافته شروع شوند.
- شکاف هایی که بعید به نظر می رسد پر شوند باید همیشه به صورت جمع شده شروع شوند.
برای اجرای نمونه، نمونه کوچک کردن جایگاه‌های آگهی خالی را ببینید.