ممکن است بخواهید جایگاه های تبلیغات HTML درون صفحه خود را با اسلات های تبلیغاتی ویدیویی یا همپوشانی مرتبط کنید. این رابطه بین اسلات های تبلیغاتی مرتبط به عنوان رابطه اصلی و همراه نامیده می شود.
علاوه بر درخواست تبلیغات اصلی ویدیویی و همپوشانی، می‌توانید از IMA SDK برای نمایش تبلیغات HTML همراه استفاده کنید. این تبلیغات در یک محیط HTML نمایش داده می شوند.
از تبلیغات همراه استفاده کنید
برای استفاده از تبلیغات همراه، مراحل زیر را انجام دهید:
1. آگهی های همراه خود را رزرو کنید
ابتدا باید تبلیغات همراهی را که می خواهید با تبلیغات اصلی خود نمایش دهید رزرو کنید. تبلیغات همراه را می توان در Ad Manager ترافیک کرد . شما می توانید تا شش تبلیغ همراه را در هر تبلیغ اصلی ارائه دهید. این تکنیک، زمانی که یک خریدار تمام تبلیغات موجود در صفحه را کنترل می کند، به عنوان مسدود کردن جاده نیز شناخته می شود.
2. تبلیغات همراه خود را درخواست کنید
به‌طور پیش‌فرض، تبلیغات همراه برای هر درخواست آگهی فعال می‌شوند.
3. نمایش تبلیغات همراه
دو روش برای ارائه تبلیغات همراه وجود دارد:
- استفاده خودکار از برچسب Google Publisher (GPT)
اگر از GPT برای پیاده‌سازی تبلیغات همراه خود استفاده می‌کنید، تا زمانی که جایگاه‌های تبلیغات همراه در صفحه HTML اعلام شده باشد و این تبلیغات در API ثبت شده باشند، به‌طور خودکار نمایش داده می‌شوند (یعنی شناسه div در جاوا اسکریپت و HTML باید مطابقت). برخی از مزایای استفاده از GPT عبارتند از:- آگاهی از اسلات همراه
- تکمیل پشتیبان همراه از شبکه ناشر، اگر پاسخ VAST حاوی تبلیغات همراه کمتری نسبت به اسلات های تعریف شده در صفحه HTML باشد.
- تکمیل خودکار همراه در صورت عدم وجود آگهی ویدیویی
- اسلات‌های تبلیغات همراه از پیش بارگذاری‌شده برای پخش‌کننده‌های ویدیوی کلیک برای پخش
- رندر خودکار همراه، از جمله
HTMLResourceوiFrameResource
- به صورت دستی با استفاده از Ad API .
از تبلیغات همراه با برچسب Google Publisher استفاده کنید
برچسب ناشر Google (GPT) نمایش تبلیغات همراه HTML در سایت شما را خودکار می کند. توصیه می کنیم اکثر ناشران از GPT استفاده کنند. اگر GPT در صفحه اصلی وب (نه در IFrame) بارگذاری شود، HTML5 SDK اسلات های GPT را تشخیص می دهد. می‌توانید اطلاعات دقیق‌تری درباره استفاده از GPT با IMA SDK در اسناد GPT پیدا کنید.
اگر میزبان HTML5 SDK در یک IFrame هستید
اگر هر دو معیار زیر را دارید، باید یک اسکریپت پراکسی اضافی اضافه کنید تا همراهان GPT شما به درستی نمایش داده شوند:
- HTML5 SDK را در IFrame بارگیری کنید.
- GPT را در صفحه اصلی وب (خارج از IFrame) بارگیری کنید.
برای اینکه همراهانتان در این سناریو نمایش داده شوند، باید اسکریپت پروکسی GPT را قبل از بارگیری SDK بارگیری کنید:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
نکات مهمی که باید در نظر داشت:
- نباید هیچ GPT در داخل IFrame بارگیری شود که SDK را بارگیری می کند.
- GPT باید در صفحه بالایی بارگذاری شود، نه در IFrame دیگری.
- اسکریپت پروکسی باید در همان قاب GPT (یعنی در صفحه اصلی) بارگذاری شود.
اسلات تبلیغات همراه را در HTML اعلام کنید
این بخش نحوه اعلان تبلیغات همراه در HTML با استفاده از GPT را توضیح می دهد و کد نمونه را برای سناریوهای مختلف ارائه می دهد. برای HTML5 SDK، باید مقداری جاوا اسکریپت را به صفحه HTML خود اضافه کنید و جایگاه های تبلیغات همراه را اعلام کنید.
توجه: در هر یک از مثال‌های زیر، مطمئن شوید که یک network معتبر و unit-path در فراخوانی متد googletag.defineSlot (در تگ <head> یا <body> قرار دارد، بسته به مثال واقعی که استفاده می‌کنید) ارائه دهید.
- مثال 1: اجرای اسلات تبلیغاتی پایه
- مثال 2: اجرای اسلات تبلیغاتی پویا
- مثال 3: جایگاه های تبلیغاتی از قبل بارگذاری شده
مثال 1: اجرای اسلات تبلیغاتی پایه
کد نمونه زیر نشان می دهد که چگونه فایل gpt.js را در صفحه HTML خود قرار دهید و یک جایگاه تبلیغاتی را اعلام کنید. جایگاه آگهی اعلام شده 728x90px است. GPT تلاش می‌کند با هر آگهی همراهی که در پاسخ VAST با این اندازه مطابقت دارد، جایگاه را پر کند. پس از اعلام جایگاه‌های تبلیغات، تابع googletag.display() می‌تواند آنها را در هر جایی که در صفحه فراخوانی شود، نمایش دهد. از آنجایی که اسلات ها اسلات های همراه هستند، تبلیغات بلافاصله نمایش داده نمی شوند. در عوض آنها در کنار تبلیغ ویدیوی اصلی ظاهر می شوند.
در اینجا یک نمونه از پیاده سازی است:
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
آن را امتحان کنید
می توانید کدپن زیر را برای اجرای کاری مشاهده کنید.
مثال 2: اجرای اسلات تبلیغاتی پویا
گاهی اوقات ممکن است تا زمانی که محتوای صفحه نمایش داده نشود، ندانید که در یک صفحه چند جایگاه تبلیغاتی دارید. کد نمونه زیر نحوه تعریف جایگاه های تبلیغاتی را در حین رندر صفحه نشان می دهد. این مثال با مثال 1 یکسان است با این تفاوت که اسلات های تبلیغاتی را در جایی که واقعاً نمایش داده می شوند، ثبت می کند.
توجه: هنگامی که پخش کننده ویدیو می خواهد تبلیغات را نمایش دهد، شکاف ها را می خواهد. مطمئن شوید که اسلات ها قبل از نمایش تبلیغات توسط پخش کننده تعریف شده است.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
آن را امتحان کنید
می توانید کد زیر را برای پیاده سازی کاری مشاهده کنید.
مثال 3: جایگاه های تبلیغاتی از قبل بارگذاری شده
در موارد خاص، ممکن است لازم باشد قبل از درخواست آگهی همراه، چیزی را در جایگاه آگهی نمایش دهید. معمولاً تبلیغات همراه به همراه یک تبلیغ ویدیویی درخواست می شود. این درخواست ممکن است پس از بارگیری صفحه رخ دهد. به عنوان مثال، یک تبلیغ همراه ممکن است فقط پس از کلیک کاربر روی یک ویدیوی کلیک برای پخش بارگیری شود. در چنین حالتی، قبل از درخواست آگهی همراه، به توانایی درخواست یک آگهی معمولی برای پر کردن جایگاه آگهی نیاز دارید. برای پشتیبانی از این مورد، می توانید تبلیغات وب استاندارد را در اسلات همراه نمایش دهید. اطمینان حاصل کنید که تبلیغات وب برای اسلات های همراه هدف قرار می گیرند. می‌توانید اسلات‌های همراه را به همان روشی که اسلات‌های استاندارد تبلیغات وب را هدف قرار می‌دهید، هدف قرار دهید.
نکته: کد نمونه زیر دقیقاً همان کد ارائه شده برای مثال 1 است به استثنای قسمتی که پررنگ است. در این صورت، به جای واحد تبلیغات ویدیویی، شبکه تبلیغات و مسیر واحد تبلیغات پیش بارگذاری شده خود را ارائه می دهید.
در اینجا یک نمونه از پیاده سازی که به تازگی توضیح داده شده است:
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
آن را امتحان کنید
می توانید کد-پن زیر را برای پیاده سازی کاری مشاهده کنید.
از تبلیغات همراه با Ad API استفاده کنید
این بخش نحوه نمایش تبلیغات همراه با استفاده از Ad API را توضیح می دهد.
نمایش تبلیغات همراه
برای نمایش تبلیغات همراه، ابتدا از طریق هر یک از رویدادهای AdEvent ارسال شده از AdsManager به یک شیء Ad ارجاع دهید. توصیه می کنیم از رویداد AdEvent.STARTED استفاده کنید، زیرا نمایش تبلیغات همراه باید با نمایش آگهی اصلی همزمان باشد.
سپس، از این شیء Ad برای فراخوانی getCompanionAds() استفاده کنید تا آرایه ای از اشیاء CompanionAd به دست آورید. در اینجا می‌توانید CompanionAdSelectionSettings را تعیین کنید که به شما امکان می‌دهد فیلترهایی را بر روی تبلیغات همراه برای نوع خلاقانه، درصد نزدیک به تناسب، نوع منبع و معیارهای اندازه تنظیم کنید. برای اطلاعات بیشتر در مورد این تنظیمات، به مستندات API HTML5 مراجعه کنید.
اشیاء CompanionAd برگردانده شده توسط getCompanionAds اکنون می توانند برای نمایش تبلیغات همراه در صفحه با استفاده از این دستورالعمل ها استفاده شوند:
- یک جایگاه تبلیغاتی همراه
<div>با اندازه مورد نیاز در صفحه ایجاد کنید. - در کنترلر رویداد خود برای رویداد STARTED ، شی
Adرا با فراخوانیgetAd()بازیابی کنید. - از
getCompanionAds()برای دریافت لیستی از تبلیغات همراه استفاده کنید که هم با اندازه جایگاه آگهی همراه و همCompanionAdSelectionSettingsمطابقت دارند و دارای همان شماره دنباله ای با خلاقیت اصلی هستند. خلاقیت‌های دارای صفت دنباله از دست رفته به عنوان دارای دنباله شماره 0 در نظر گرفته می‌شوند. - محتوا را از یک نمونه
CompanionAdدریافت کنید و آن را به عنوان HTMl داخلی آن جایگاه تبلیغاتی<div>تنظیم کنید.
کد نمونه
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
نمایش تبلیغات همراه روان
IMA اکنون از تبلیغات همراه روان پشتیبانی می کند. این تبلیغات همراه می توانند اندازه آنها را تغییر دهند تا با اندازه جایگاه تبلیغات مطابقت داشته باشد. آنها 100٪ از عرض div والد را پر می کنند، سپس اندازه ارتفاع خود را متناسب با محتوای همراه تغییر می دهند. آنها با استفاده از اندازه همراه Fluid در Ad Manager تنظیم می شوند. برای اینکه این مقدار را کجا تنظیم کنید، تصویر زیر را ببینید.
همراهان مایع GPT
هنگام استفاده از همراهان GPT، می توانید با به روز رسانی پارامتر دوم متد defineSlot() یک اسلات همراه سیال را اعلام کنید.
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
Ad API مایع همراهان
هنگام استفاده از Ad API برای تبلیغات همراه، می‌توانید با به‌روزرسانی google.ima.CompanionAdSelectionSettings.sizeCriteria به مقدار SELECT_FLUID ، یک شکاف همراه روان اعلام کنید.
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>