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

Reklamy towarzyszące

Możesz powiązać boksy reklam HTML na stronie z boksami na reklamy wideo lub nakładki. Ten związek między powiązanymi slotami reklamowymi nazywa się relacją nadrzędna–towarzysząca.

Oprócz żądania głównych reklam wideo i nakładek możesz używać pakietu IMA SDK do wyświetlania reklam HTML towarzyszących. Reklamy te wyświetlają się w środowisku HTML.

Korzystanie z reklam towarzyszących

Aby korzystać z reklam towarzyszących:

1. Rezerwowanie reklam towarzyszących

Najpierw musisz zarezerwować reklamy towarzyszące, które chcesz wyświetlać razem z reklamami głównymi. Reklamy towarzyszące możesz trafikować w usłudze Ad Manager. Możesz wyświetlać maksymalnie 6 reklam towarzyszących na reklamę nadrzędną. Ta technika, w której jeden kupujący kontroluje wszystkie reklamy na stronie, jest też nazywana reklamą na wyłączność.

2. Prośba o reklamy towarzyszące

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:

Automatycznie za pomocą tagu wydawcy Google (GPT)
Jeśli do implementacji reklam towarzyszących używasz tagu wydawcy Google (GPT), będą się one wyświetlać automatycznie, o ile na stronie HTML są zadeklarowane boksy reklam towarzyszących, a reklamy te są zarejestrowane w interfejsie API (czyli identyfikatory div w języku JavaScript i HTML muszą być takie same). Oto niektóre z korzyści z używania tagów GPT:
- Rozpoznawanie boksów reklam towarzyszących
- Reklamy towarzyszące jako reklamy zapasowe z sieci wydawcy, jeśli odpowiedź VAST zawiera mniej reklam towarzyszących od liczby boksów reklamowych zdefiniowanych na stronie HTML
- automatyczne wypełnianie towarzyszące, jeśli brakuje reklamy wideo;
- Wstępnie załadowane boksy reklam towarzyszących w odtwarzaczach wideo typu „kliknij, aby odtworzyć”
- Automatyczne renderowanie towarzyszące, w tym HTMLResource i iFrameResource
Ręcznie za pomocą interfejsu Ad API.

Korzystanie z reklam towarzyszących z tagiem wydawcy Google

Tag wydawcy Google (GPT) automatyzuje wyświetlanie w Twojej witrynie reklam towarzyszących HTML. Większość wydawców zalecamy korzystanie z GPT. Pakiet HTML5 SDK rozpoznaje boksy GPT, jeśli tag GPT jest załadowany na głównej stronie internetowej (a nie w ramce IFrame). Więcej informacji o korzystaniu z GPT w pakiecie IMA SDK znajdziesz w dokumentacji GPT.

Jeśli hostujesz pakiet HTML5 SDK w elemencie iframe

Jeśli spełniasz oba te kryteria, musisz uwzględnić dodatkowy skrypt proxy, aby towarzysze GPT były wyświetlane prawidłowo:

Załaduj pakiet HTML5 SDK w ramce IFrame.
Załaduj GPT na głównej stronie internetowej (poza elementem iframe).

Aby w tym scenariuszu wyświetlić towarzyszy, przed załadowaniem pakietu SDK musisz załadować skrypt proxy GPT:

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

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

W elementach iframe wczytujących pakiet SDK nie powinno być wczytywanego GPT.
Kod GPT musi być ładowany na stronie głównej, a nie w innym elemencie IFrame.
Skrypt proxy musi być wczytany w ramce tagu GPT (czyli na stronie głównej).

Deklarowanie miejsc na reklamy towarzyszące w kodzie HTML

W tej sekcji wyjaśniamy, jak deklarować reklamy towarzyszące w kodzie HTML za pomocą GPT, oraz przedstawiamy przykładowy kod na potrzeby różnych scenariuszy. W przypadku pakietu HTML5 SDK musisz dodać kod JavaScript do strony HTML i zadeklarować miejsca na reklamy towarzyszące.

Uwaga: w każdym z następujących przykładów pamiętaj, aby w wywołaniu metody googletag.defineSlot podać prawidłową wartość parametru network i unit-path (znajdującego się w tagu <head> lub <body>, w zależności od przykładu, którego używasz).

Przykład 1. Podstawowe wdrożenie boksu reklamowego
Przykład 2. Wdrażanie dynamicznego miejsca na reklamę
Przykład 3. Wstępnie załadowane miejsca na reklamę

Przykład 1. Podstawowa implementacja boksu reklamowego

Poniższy przykładowy kod pokazuje, jak umieścić plik gpt.js na stronie HTML i zadeklarować miejsce na reklamę. Zadeklarowany boks reklamowy ma wymiary 728 x 90 pikseli. GPT próbuje wypełnić boks dowolnymi reklamami towarzyszącymi zwróconymi w odpowiedzi VAST, które pasują do tego rozmiaru. Po zadeklarowaniu miejsc na reklamy funkcja googletag.display() może je renderować w dowolnym miejscu na stronie. Ponieważ są to boksy reklamowe towarzyszące, reklamy nie są wyświetlane natychmiast. Zamiast tego wyświetlają się 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

Aby zobaczyć działającą implementację, otwórz ten kodpen.

Przykład 2. Dynamiczna implementacja boksu reklamowego

Czasami nie wiesz, ile masz boksów reklamowych na stronie, dopóki nie zostanie wyrenderowana zawartość strony. Poniższy przykładowy kod pokazuje, jak definiować miejsca na reklamy podczas renderowania strony. Ten przykład jest identyczny jak Przykład 1, z tym wyjątkiem, że rejestruje miejsca reklamowe, w których reklamy są faktycznie wyświetlane.

Uwaga: gdy odtwarzacz wideo ma wyświetlić reklamy, prosi o zarezerwowanie slotów. Upewnij się, że boksy są zdefiniowane, zanim odtwarzacz zacznie wyświetlać 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 załadowane boksy reklamowe

W niektórych przypadkach przed wysłaniem żądania reklamy towarzyszącej może być konieczne wyświetlenie czegoś w miejscu na reklamę. Reklamy towarzyszące są zwykle żądane razem z reklamą wideo. To żądanie może zostać wysłane po załadowaniu strony. Na przykład reklama towarzysząca może wczytać się dopiero po kliknięciu przez użytkownika filmu typu „kliknij, aby odtworzyć”. W takim przypadku musisz mieć możliwość wysłania żądania wyświetlenia zwykłej reklamy, aby wypełnić boks reklamy przed wysłaniem żądania reklamy towarzyszącej. Aby obsługiwać ten przypadek użycia, możesz wyświetlać standardowe reklamy internetowe w boksie towarzyszącym. Upewnij się, że reklamy internetowe są kierowane na boksy reklam towarzyszących. Możesz kierować reklamy na boksy towarzyszące tak samo jak na standardowe boksy reklamowe w internecie.

Uwaga: poniższy przykładowy kod jest dokładnie taki sam jak w przykładzie 1, z wyjątkiem sekcji wyróżnionej pogrubieniem. W tym przypadku podajesz sieć reklamową i ścieżkę jednostki reklamowej reklamy wstępnej zamiast jednostki reklamy wideo.

Oto przykład implementacji:

<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 działający kod.

Korzystanie z reklam towarzyszących w interfejsie Ad API

W tej sekcji opisaliśmy, jak wyświetlać reklamy towarzyszące za pomocą interfejsu API Ad.

Wyświetlanie reklam towarzyszących

Aby wyświetlać reklamy towarzyszące, najpierw uzyskaj odwołanie do obiektu Ad za pomocą dowolnego z wydarzeń AdEvent wysłanych z poziomu AdsManager. Zalecamy użycie zdarzenia AdEvent.STARTED, ponieważ wyświetlanie reklam towarzyszących powinno się pokrywać z wyświetlaniem reklamy głównej.

Następnie użyj obiektu Ad do wywołania metody getCompanionAds(), aby uzyskać tablicę obiektów CompanionAd. Możesz tu określić CompanionAdSelectionSettings, co pozwoli Ci ustawić filtry kreacji towarzyszących dotyczące typu kreacji, procentu dopasowania, typu zasobu i kryteriów rozmiaru. Więcej informacji o tych ustawieniach znajdziesz w dokumentacji interfejsu API HTML5.

Obiekty CompanionAd zwracane przez funkcję getCompanionAdsmożna teraz używać do wyświetlania reklam towarzyszących na stronie zgodnie z tymi wytycznymi:

Utwórz na stronie towarzyszący boks reklamowy <div> o wymaganym rozmiarze.
W obiekcie funkcji obsługi zdarzenia STARTED pobierz obiekt Ad, wywołując funkcję getAd().
Użyj getCompanionAds(), aby uzyskać listę reklam towarzyszących, które pasują do rozmiaru boksu reklamy towarzyszącej i CompanionAdSelectionSettings oraz mają ten sam numer sekwencji co kreacja nadrzędna. Kreacje, w których brakuje atrybutu sekwencji, są traktowane tak, jakby miały numer sekwencji 0.
Pobierz zawartość z CompanionAd i ustaw ją jako wewnętrzny kod HTML w miejscu docelowym reklamy <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. Rozmiar tych reklam może się zmieniać, aby pasował do rozmiaru boksu reklamowego. Wypełniają one 100% szerokości kontenera nadrzędnego, a następnie zmieniają wysokość, aby dopasować ją do treści towarzyszących. Są one ustawiane za pomocą parametru Fluid w Ad Managerze. Aby dowiedzieć się, gdzie ustawić tę wartość, zobacz poniższy obraz.

Ilustracja pokazująca ustawienia reklam towarzyszących w usłudze Ad Manager Wyróżnia opcję rozmiarów kreacji towarzyszących.

Towarzyszące płynne tagi GPT

Jeśli używasz reklam towarzyszących GPT, możesz zadeklarować elastyczny boks reklam towarzyszących, aktualizując 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>

Fluid Companions w interfejsie Ad API

Gdy używasz interfejsu Ad API do reklam towarzyszących, możesz zadeklarować elastyczny boks reklamy towarzyszącej, zmieniając wartość google.ima.CompanionAdSelectionSettings.SizeCriteria na 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>