راهنمای زیر نمایش یک آگهی آزمایشی را گسترش می‌دهد و مفاهیم اولیه بیشتری را برای استفاده حداکثری از کتابخانه برچسب ناشر Google (GPT) معرفی می‌کند. این مفاهیم عبارتند از:
- اندازه آگهی
- هدف گذاری کلید-مقدار
- معماری تک درخواستی
کتابخانه GPT را بارگیری کنید
با بارگیری و مقداردهی اولیه کتابخانه GPT شروع کنید. موارد زیر را به <head> سند HTML اضافه کنید:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
این کار کتابخانه GPT را بارگیری می کند و هر دو شی googletag و CommandArray را مقداردهی اولیه می کند. راه‌اندازی این اشیا به شما امکان می‌دهد بلافاصله از آرایه فرمان GPT استفاده کنید. کد جاوا اسکریپت زیر را به بدنه تابع خالی تعریف شده در این قطعه اضافه کنید.
جای تبلیغات را تعریف کنید
پس از بارگیری GPT، می توانید اسلات تبلیغاتی را تعریف کنید. مثال زیر سه جایگاه تبلیغاتی را با قالب‌های تبلیغاتی، اندازه و گزینه‌های هدف گذاری متفاوت تعریف می‌کند.
جایگاه تبلیغاتی با اندازه ثابت
در اینجا یک جایگاه تبلیغاتی ساده و با اندازه ثابت آمده است:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
علاوه بر مسیر واحد تبلیغات، اندازه و شناسه کانتینر <div> ، این قطعه تعدادی گزینه هدف را نیز مشخص می کند. این گزینه ها تبلیغاتی را که واجد شرایط ارائه در این جایگاه هستند محدود و متمایز می کند. درباره هدف گذاری کلید-مقدار بیشتر بیاموزید.
جایگاه آگهی لنگر
در اینجا یک اسلات تبلیغاتی لنگر وجود دارد که به پایین نمایپورت متصل شده است:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
شکاف های لنگر نوعی فرمت خارج از صفحه هستند که با استفاده از روش defineOutOfPageSlot به جای روش معمول defineSlot تعریف می شوند. درباره خلاقیت های خارج از صفحه بیشتر بیاموزید.
قالب‌های خارج از صفحه معمولاً محدودیت‌هایی برای انواع صفحات و دستگاه‌هایی دارند که واجد شرایط استفاده از آنها هستند. با توجه به این محدودیت‌ها، قبل از تعامل با آن، باید تأیید کنید که شکاف با موفقیت تعریف شده است. برای جزئیات بیشتر به نمایش نمونه تبلیغات لنگر مراجعه کنید.
محل تبلیغات سیال
در اینجا یک جایگاه تبلیغاتی روان برای یک آگهی بومی آمده است:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
اسلات های تبلیغاتی سیال اندازه ثابتی ندارند. اسلات‌های تبلیغاتی روان متناسب با محتوای خلاقانه آگهی تنظیم می‌شوند. شما اسلات تبلیغات سیال را با گزینه اندازه fluid تعریف می کنید. درباره اندازه آگهی و گزینه‌های اندازه‌بندی موجود بیشتر بیاموزید.
تنظیمات سطح صفحه را پیکربندی کنید
برخی از گزینه‌های پیکربندی GPT به‌جای جایگاه‌های تبلیغاتی خاص، در سطح جهانی اعمال می‌شوند. این تنظیمات به عنوان تنظیمات سطح صفحه نامیده می شوند.
در اینجا مثالی از نحوه پیکربندی تنظیمات سطح صفحه آورده شده است:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
این قطعه سه کار را انجام می دهد:
- گزینه های هدف گذاری در سطح صفحه را پیکربندی می کند که در هر جایگاه تبلیغاتی در صفحه اعمال می شود.
- حالت Single Request Architecture (SRA) را روشن می‌کند، که درخواست‌ها را برای چند جایگاه تبلیغاتی در یک درخواست آگهی واحد دسته‌بندی می‌کند. SRA عملکرد را بهبود می بخشد، و برای تضمین رعایت محرومیت ها و موانع رقابتی ضروری است، بنابراین توصیه می کنیم همیشه SRA را روشن کنید. درباره استفاده صحیح از SRA بیشتر بیاموزید.
- سرویس‌های متصل به جایگاه‌های تبلیغاتی ما را فعال می‌کند که اجازه می‌دهد درخواست‌های تبلیغاتی ارسال شود.
نمایش تبلیغات
در نهایت قطعه زیر را به <body> صفحه اضافه کنید:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
این دو محفظه اسلات تبلیغاتی را تعریف می‌کند: banner-ad و native-ad . این مقادیر id کانتینر با مقادیری مطابقت دارد که هنگام تعریف جایگاه‌های تبلیغاتی قبلاً در این مثال ارائه کرده‌اید.
پس از تعریف تمام جایگاه های تبلیغاتی، تماسی برای نمایش banner-ad برقرار می شود. از آنجایی که SRA فعال است، این تماس نمایشی تکی درخواست می‌کند و همه جایگاه‌های تبلیغاتی تعریف‌شده تا این مرحله را ارائه می‌کند. در صورت لزوم، می توانید با فعال کردن SRA ، بارگذاری آگهی و رفتار بازخوانی و دسته بندی را با دقت بیشتری کنترل کنید.
مثال کامل
در زیر کد منبع کامل صفحه نمونه ای است که این راهنما بر اساس آن است. شما همچنین می توانید نسخه نمایشی تعاملی این صفحه را مشاهده کنید.