برای گفتگو و ارائه بازخورد در مورد محصولات ما، به کانال رسمی Ad Manager Discord در سرور انجمن تبلیغات و اندازه‌گیری Google بپیوندید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

پشتیبانی از تبلیغات همراه را اضافه کنید

پلتفرم مورد نظر را انتخاب کنید: HTML5 اندروید iOS

شاید بخواهید جایگاه‌های تبلیغاتی HTML درون‌صفحه‌ای خود را با جایگاه‌های تبلیغاتی ویدیویی یا پوششی مرتبط کنید. این رابطه بین جایگاه‌های تبلیغاتی مرتبط، رابطه‌ی استاد-همراه نامیده می‌شود.

علاوه بر درخواست تبلیغات اصلی ویدیویی و همپوشانی، می‌توانید از IMA SDK برای نمایش تبلیغات HTML همراه استفاده کنید. این تبلیغات در یک محیط HTML نمایش داده می‌شوند.

از تبلیغات همراه استفاده کنید

برای استفاده از تبلیغات همراه، مراحل زیر را انجام دهید:

۱. تبلیغات همراه خود را رزرو کنید

ابتدا باید تبلیغات همراه را که می‌خواهید با تبلیغات اصلی خود نمایش دهید، رزرو کنید. تبلیغات همراه را می‌توان در Ad Manager نمایش داد . می‌توانید تا شش تبلیغ همراه را برای هر تبلیغ اصلی ارائه دهید. این تکنیک، زمانی که یک خریدار واحد تمام تبلیغات روی صفحه را کنترل می‌کند، به عنوان مسدود کردن جاده نیز شناخته می‌شود.

۲. درخواست تبلیغات همراه خود را بدهید

به طور پیش‌فرض، تبلیغات همراه برای هر درخواست تبلیغ فعال می‌شوند.

۳. نمایش تبلیغات همراه

دو روش برای نمایش تبلیغات همراه وجود دارد:

به طور خودکار با استفاده از برچسب ناشر گوگل (GPT) .
اگر از GPT برای پیاده‌سازی تبلیغات همراه خود استفاده می‌کنید، مادامی که جایگاه‌های تبلیغات همراه در صفحه HTML اعلام شده باشند و این تبلیغات در API ثبت شده باشند (یعنی شناسه div در جاوا اسکریپت و HTML باید مطابقت داشته باشد)، این تبلیغات به طور خودکار نمایش داده می‌شوند. برخی از مزایای استفاده از GPT عبارتند از:
- آگاهی از اسلات همراه.
- اگر پاسخ VAST حاوی تبلیغات همراه کمتری نسبت به تعداد اسلات‌های تعریف‌شده در صفحه HTML باشد، از شبکه ناشر، تبلیغات همراه را جایگزین کنید.
- تکمیل خودکار همراه در صورت عدم وجود تبلیغ ویدیویی.
- جایگاه‌های تبلیغاتی همراه از پیش بارگذاری شده برای پخش‌کننده‌های ویدیویی با کلیک.
- رندرینگ همراه خودکار، شامل HTMLResource و iFrameResource .
با استفاده دستی از Ad API .

از تبلیغات همراه با برچسب ناشر گوگل استفاده کنید

تگ ناشر گوگل (GPT) نمایش تبلیغات همراه HTML را در سایت شما خودکار می‌کند. ما توصیه می‌کنیم که اکثر ناشران از GPT استفاده کنند. اگر GPT در صفحه وب اصلی بارگذاری شده باشد (نه در IFrame)، SDK HTML5 اسلات‌های GPT را تشخیص می‌دهد. می‌توانید اطلاعات دقیق‌تر در مورد استفاده از GPT با IMA SDK را در اسناد GPT بیابید.

اگر HTML5 SDK را درون یک IFrame میزبانی می‌کنید

اگر هر دو معیار زیر را دارید، برای نمایش صحیح همراهان GPT خود، باید یک اسکریپت پروکسی اضافی اضافه کنید:

کیت توسعه نرم‌افزار HTML5 را در یک IFrame بارگذاری کنید.
GPT را در صفحه وب اصلی (خارج از IFrame) بارگذاری کنید.

برای اینکه همراهان شما در این سناریو نمایش داده شوند، باید قبل از بارگذاری SDK، اسکریپت پروکسی GPT را بارگذاری کنید:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

نکات مهمی که باید در نظر داشته باشید:

نباید هیچ فایل GPT درون IFrame که SDK را بارگذاری می‌کند، بارگذاری شده باشد.
GPT باید در صفحه بالا بارگذاری شود، نه در IFrame دیگری.
اسکریپت پروکسی باید در همان فریم GPT (یعنی در صفحه اصلی) بارگذاری شود.

اعلام جایگاه‌های تبلیغاتی همراه در HTML

این بخش نحوه تعریف تبلیغات همراه در HTML با استفاده از GPT را توضیح می‌دهد و نمونه کدی برای سناریوهای مختلف ارائه می‌دهد. برای HTML5 SDK، باید مقداری جاوا اسکریپت به صفحه HTML خود اضافه کنید و جایگاه‌های تبلیغات همراه را تعریف کنید.

مثال ۱: پیاده‌سازی اولیه جایگاه تبلیغاتی
مثال ۲: پیاده‌سازی جایگاه تبلیغاتی پویا
مثال ۳: جایگاه‌های تبلیغاتی از پیش بارگذاری شده

مثال ۱: پیاده‌سازی اولیه جایگاه تبلیغاتی

کد نمونه زیر نحوه گنجاندن فایل 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>

امتحانش کن.

برای پیاده‌سازی عملی می‌توانید به codepen زیر مراجعه کنید.

مثال ۲: پیاده‌سازی جایگاه تبلیغاتی پویا

گاهی اوقات ممکن است تا زمانی که محتوای صفحه رندر نشده باشد، ندانید که چند جایگاه تبلیغاتی در صفحه دارید. کد نمونه زیر نحوه تعریف جایگاه‌های تبلیغاتی را هنگام رندر شدن صفحه نشان می‌دهد. این مثال مشابه مثال ۱ است، با این تفاوت که جایگاه‌های تبلیغاتی را در جایی که واقعاً نمایش داده می‌شوند، ثبت می‌کند.

<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>

امتحانش کن.

برای پیاده‌سازی عملی می‌توانید کد زیر را مشاهده کنید.

مثال ۳: جایگاه‌های تبلیغاتی از پیش بارگذاری شده

در موارد خاص، ممکن است لازم باشد قبل از درخواست تبلیغ همراه، چیزی را در جایگاه تبلیغ نمایش دهید. تبلیغات همراه معمولاً همراه با یک تبلیغ ویدیویی درخواست می‌شوند. این درخواست می‌تواند پس از بارگذاری صفحه رخ دهد. به عنوان مثال، یک تبلیغ همراه ممکن است فقط پس از کلیک کاربر روی یک ویدیوی کلیک-برای-پخش بارگذاری شود. در چنین حالتی، شما به قابلیتی نیاز دارید که بتوانید قبل از درخواست تبلیغ همراه، یک تبلیغ معمولی را برای پر کردن جایگاه تبلیغ درخواست کنید. برای پشتیبانی از این مورد استفاده، می‌توانید تبلیغات وب استاندارد را در جایگاه همراه نمایش دهید. مطمئن شوید که تبلیغات وب به جایگاه‌های همراه هدایت می‌شوند. می‌توانید جایگاه‌های همراه را به همان روشی که جایگاه‌های تبلیغ وب استاندارد را هدایت می‌کنید، هدف قرار دهید.

در اینجا مثالی از پیاده‌سازی که توضیح داده شد، آورده شده است:

<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>

امتحانش کن.

برای پیاده‌سازی عملی می‌توانید به code-pen زیر مراجعه کنید.

از تبلیغات همراه با Ad API استفاده کنید

این بخش نحوه نمایش تبلیغات همراه با استفاده از Ad API را شرح می‌دهد.

نمایش تبلیغات همراه

برای نمایش تبلیغات همراه، ابتدا از طریق هر یک از رویدادهای AdEvent که از AdsManager ارسال می‌شوند، به یک شیء Ad ارجاع دهید. توصیه می‌کنیم از رویداد AdEvent.STARTED استفاده کنید، زیرا نمایش تبلیغات همراه باید همزمان با نمایش تبلیغ اصلی باشد.

در مرحله بعد، از این شیء Ad برای فراخوانی getCompanionAds() برای دریافت آرایه‌ای از اشیاء CompanionAd استفاده کنید. در اینجا می‌توانید CompanionAdSelectionSettings را مشخص کنید که به شما امکان می‌دهد فیلترهایی را روی تبلیغات همراه برای نوع خلاقانه، درصد تقریبی تطابق، نوع منبع و معیارهای اندازه تنظیم کنید. برای اطلاعات بیشتر در مورد این تنظیمات، به مستندات API CompanionAdSelectionSettings در IMA مراجعه کنید.

اشیاء CompanionAd که توسط getCompanionAds برگردانده می‌شوند، اکنون می‌توانند برای نمایش تبلیغات همراه در صفحه با استفاده از این دستورالعمل‌ها استفاده شوند:

یک جایگاه تبلیغاتی همراه <div> با اندازه مورد نیاز در صفحه ایجاد کنید.
در کنترل‌کننده‌ی رویداد خود برای رویداد STARTED ، شیء Ad را با فراخوانی getAd() بازیابی کنید.
از getCompanionAds() برای دریافت لیستی از تبلیغات همراه که هم با اندازه جایگاه تبلیغ همراه و هم CompanionAdSelectionSettings مطابقت دارند و شماره ترتیب یکسانی با آگهی اصلی دارند، استفاده کنید. آگهی‌هایی که ویژگی ترتیب آنها وجود ندارد، به عنوان آگهی‌هایی با شماره ترتیب ۰ در نظر گرفته می‌شوند.
محتوا را از یک نمونه 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 اکنون از تبلیغات همراه سیال پشتیبانی می‌کند. این تبلیغات همراه می‌توانند تغییر اندازه دهند تا با اندازه جایگاه تبلیغ مطابقت داشته باشند. آن‌ها ۱۰۰٪ عرض 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>

همراهان سیال 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>

پشتیبانی از تبلیغات همراه را اضافه کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

از تبلیغات همراه استفاده کنید

۱. تبلیغات همراه خود را رزرو کنید

۲. درخواست تبلیغات همراه خود را بدهید

۳. نمایش تبلیغات همراه

از تبلیغات همراه با برچسب ناشر گوگل استفاده کنید

اگر HTML5 SDK را درون یک IFrame میزبانی می‌کنید

اعلام جایگاه‌های تبلیغاتی همراه در HTML

مثال ۱: پیاده‌سازی اولیه جایگاه تبلیغاتی

امتحانش کن.

مثال ۲: پیاده‌سازی جایگاه تبلیغاتی پویا

امتحانش کن.

مثال ۳: جایگاه‌های تبلیغاتی از پیش بارگذاری شده

امتحانش کن.

از تبلیغات همراه با Ad API استفاده کنید

نمایش تبلیغات همراه

کد نمونه

نمایش تبلیغات همراه با مایعات

مایعات همراه GPT

همراهان سیال API Ad

پشتیبانی از تبلیغات همراه را اضافه کنید