Ta strona została przetłumaczona przez Cloud Translation API.

Reklamy towarzyszące

Możesz powiązać boksy reklamowe HTML na stronie z reklamami wideo lub nakładek reklamowych. Odwołuje się do tej relacji między powiązanymi boksami reklamowymi jako relacji nadrzędne-towarzyszące.

Oprócz żądania reklam wideo i nakładek reklam nadrzędnych możesz używać pakietu IMA SDK do wyświetlania dodatkowych reklam HTML. Te reklamy wyświetlają się w kodzie HTML dla środowiska.

Używanie reklam towarzyszących

Aby używać reklam towarzyszących:

1. Zarezerwuj reklamy towarzyszące

Musisz najpierw zarezerwować reklamy towarzyszące, które chcesz wyświetlać razem reklam nadrzędnych. Reklamy towarzyszące mogą być trafikowanych w usłudze Ad Manager. W każdej reklamie nadrzędnej możesz wyświetlać maksymalnie 6 reklam towarzyszących. Ta technika, gdy jeden kupujący kontroluje wszystkie reklamy na stronie, jest też stosowany znane jako roadblocking.

2. Wysyłanie żądań reklam towarzyszących

Domyślnie reklamy towarzyszące są włączone w przypadku każdego żądania reklamy.

3. Wyświetlanie reklam towarzyszących

Reklamy towarzyszące można renderować na 2 sposoby:

Automatyczne za pomocą tagu wydawcy Google (GPT)
Jeśli do implementacji reklam towarzyszących używasz tagów GPT, wyświetlane automatycznie, o ile zostały zadeklarowane boksy reklam towarzyszących na stronie HTML, które są rejestrowane przez interfejs API (czyli element div w kodzie JavaScript i HTML muszą być takie same). Niektóre korzyści z używania GPT to:
- Rozpoznawanie boksów towarzyszących
- Zapasowe reklamy towarzyszące z sieci wydawcy, jeśli VAST odpowiedź zawiera mniej reklam towarzyszących niż jest zdefiniowanych boksów na stronie HTML
- Autouzupełnianie kreacji towarzyszącej w przypadku braku reklamy wideo
- Wstępnie załadowane boksy reklam towarzyszących do odtwarzaczy wideo typu „kliknij, aby odtworzyć”
- Zautomatyzowane renderowanie kreacji towarzyszących, w tym HTMLResource i iFrameResource
Ręcznie przy użyciu interfejsu Ad API.

Używanie reklam towarzyszących z tagiem wydawcy Google

Tag wydawcy Google (GPT) automatyzuje wyświetlanie kodu HTML reklam towarzyszących w Twojej witrynie. Większości wydawców zalecamy używanie GPT. Pakiet SDK HTML5 rozpoznaje boksy GPT, jeśli na stronie głównej został wczytany tag GPT (nie w elemencie iframe). Więcej informacji o używaniu GPT z zastosowaniem tagu GPT IMA SDK w dokumentacji GPT.

Jeśli pakiet SDK HTML5 jest hostowany w elemencie iframe

Jeśli spełniasz oba poniższe kryteria, musisz dodać atrybut skrypt proxy, by kreacje towarzyszące GPT wyświetlały się prawidłowo:

Wczytaj pakiet SDK HTML5 w elemencie iframe.
Wczytaj tag GPT na głównej stronie internetowej (poza elementem iframe).

Aby kreacje towarzyszące wyświetlały się w tym scenariuszu, musisz wczytać Skrypt proxy GPT przed wczytaniem pakietu SDK:

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

Ważne kwestie, o których należy pamiętać:

W elemencie iframe wczytującym SDK nie powinno być wczytanego tagu GPT.
Tag GPT musi być ładowany na górze strony, a nie w innym elemencie iframe.
Skrypt proxy musi być ładowany w tej samej ramce co tag GPT (czyli na stronie głównej).

Deklarowanie boksów reklam towarzyszących w kodzie HTML

Z tej sekcji dowiesz się, jak deklarować reklamy towarzyszące w kodzie HTML za pomocą tagów GPT i zawiera przykładowy kod na potrzeby różnych scenariuszy. W przypadku pakietu SDK HTML5 Musisz dodać do strony HTML kod JavaScript i zadeklarować reklamę towarzyszącą przedziały czasu.

Uwaga: pamiętaj, aby w każdym z poniższych przykładów podaj prawidłowe network i unit-path w funkcji Wywołanie metody googletag.defineSlot (znajdujące się w sekcji <head> lub <body> w zależności od używanego przykładu).

Przykład 1. Podstawowa implementacja boksu reklamowego
Przykład 2. Implementacja dynamicznych boksów reklamowych
Przykład 3. Wstępnie wczytane boksy reklamowe

Przykład 1. Podstawowa implementacja boksu reklamowego

Poniższy przykładowy kod pokazuje, jak umieścić plik gpt.js na stronie HTML zadeklarować boks reklamowy. Zadeklarowany boks reklamowy ma wymiary 728 x 90 pikseli. GPT próbuje wypełnić boks wartością wszystkie reklamy towarzyszące zwrócone w odpowiedzi VAST, które pasują do tego rozmiaru. Po wypełnieniu boksów reklamowych zadeklarowane, funkcja googletag.display() może je renderować wszędzie tam, gdzie jest wywoływana stronę. Boksy są boksami towarzyszącymi, więc reklamy nie są wyświetlane od razu. Zamiast tego są wyświetlane obok nadrzędnej reklamy wideo.

Oto przykład implementacji:

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

Wypróbuj

Widać poniżej działającą implementację.

Przykład 2. Implementacja dynamicznych boksów reklamowych

Czasem nawet nie wiesz, ile boksów reklamowych masz na stronie, treść strony jest renderowana. Poniższy przykładowy kod pokazuje, jak zdefiniować boksy reklamowe podczas renderowania strony. Ten przykład jest identyczny z podanym adresem Przykład 1, tyle że rejestruje reklamę w boksach, w których są wyświetlane.

Uwaga: gdy odtwarzacz ma wyświetlić reklamy, prosi o podanie przedziały czasu. Upewnij się, że boksy są zdefiniowane, zanim odtwarzacz wyświetli reklamy.

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

Wypróbuj

Poniżej znajdziesz działający kod.

Przykład 3. Wstępnie wczytane boksy reklamowe

W niektórych przypadkach trzeba wyświetlić coś w boksie reklamowym, zanim żądanie reklamy towarzyszącej. Żądania reklam towarzyszących są zwykle wysyłane razem za pomocą reklamy wideo. To żądanie może wystąpić, gdy strona . Na przykład reklama towarzysząca może się wczytać dopiero wtedy, gdy użytkownik kliknie film typu „kliknij, aby odtworzyć”. W takim przypadku musisz mieć możliwość zwykłej reklamy, która wypełni boks reklamowy przed wysłaniem żądania reklamy towarzyszącej. Do obsługuje ten przypadek użycia, możesz wyświetlać standardowe reklamy internetowe w sekcji boks towarzyszący. Upewnij się, że reklamy internetowe są kierowane na boksy towarzyszące. Możesz kierować reklamy na boksy towarzyszące w ten sam sposób standardowych boksów reklamowych.

Uwaga: ten przykładowy kod jest dokładnie taki sam tak jak w przykładzie 1. z wyjątkiem sekcji, która jest pogrubiona. W tym podaj sieć reklamową i ścieżkę jednostki wstępnie wczytanej reklamy. zamiast jednostki reklamowej wideo.

Oto przykład opisywanego przed chwilą przykładu:

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

Wypróbuj

Poniżej znajdziesz kod przedstawiający działającą implementację.

Używanie reklam towarzyszących za pomocą interfejsu Ad API

Z tej sekcji dowiesz się, jak wyświetlać reklamy towarzyszące za pomocą interfejsu API Ad.

Wyświetlanie reklam towarzyszących

Aby wyświetlać reklamy towarzyszące, musisz najpierw uzyskać odniesienie do obiektu Ad za pomocą dowolnego ze zdarzeń AdEvent wysyłanych z AdsManager. Zalecamy używanie zdarzenia AdEvent.STARTED, ponieważ reklamy towarzyszące powinny pokrywać się z reklamą nadrzędną.

Następnie użyj tego obiektu Ad do wywołania metody getCompanionAds() pobrać tablicę obiektów CompanionAd. Tutaj możesz użyć opcji określając CompanionAdSelectionSettings, co umożliwia ustawić filtry reklam towarzyszących dla typu kreacji, bliskiego procentu dopasowania, typu zasobu i kryteriów rozmiaru. Więcej informacji o tych ustawieniach znajdziesz w artykule Dokumentacja interfejsu API HTML5.

Obiekty CompanionAd zwrócone przez getCompanionAds można go teraz używać do wyświetlania reklam towarzyszących na stronie, stosując się do następujących wskazówek:

Utwórz boks reklamy towarzyszącej <div> o wymaganym rozmiarze na stronie.
W module obsługi zdarzeń dla STARTED, pobierz wartość Ad obiekt przez wywołanie getAd()
Użyj formatu getCompanionAds(), aby uzyskać listę reklam towarzyszących, pasują zarówno do rozmiaru boksu reklamy towarzyszącej, . CompanionAdSelectionSettings i mają ten sam numer sekwencyjny jako kreacji nadrzędnej. Kreacje bez atrybutu sekwencji są jest traktowany jako numer sekwencyjny 0.
Pobierz treści z CompanionAd i ustaw ją jako wewnętrzną stronę HTMl tego boksu reklamowego <div>

Przykładowy kod

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

Wyświetlanie elastycznych reklam towarzyszących

IMA obsługuje teraz elastyczne reklamy towarzyszące. Te reklamy towarzyszące mogą zmieniać rozmiar do rozmiaru boksu reklamowego. Wypełniają one 100% szerokości nadrzędnego elementu div, a następnie zmieniają rozmiar do zawartości kreacji towarzyszącej. Są one ustawiane na podstawie Fluid rozmiaru kreacji towarzyszącej w usłudze Ad Manager. W poniższej ilustracji pokazujemy, gdzie ustawić tę wartość.

Obraz przedstawiający ustawienia reklamy towarzyszącej w usłudze Ad Manager. Wyróżnia opcję rozmiarów kreacji towarzyszących.

Elastyczna reklama towarzysząca GPT

Jeśli używasz kreacji towarzyszących GPT, możesz zadeklarować elastyczny boks towarzyszący, aktualizując tag Drugi parametr metody 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>

Elastyczne reklamy towarzyszące interfejsu Ad API

Jeśli używasz interfejsu Ad API na potrzeby reklam towarzyszących, możesz zadeklarować elastyczny boks towarzyszący, aktualizując google.ima.CompanionAdSelectionSettings.sizeCriteria na wartość 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>