Reklamy towarzyszące

Boksy reklamowe HTML na stronie możesz powiązać z boksami reklamowymi wideo lub z nakładkami. Ta relacja między powiązanymi boksami reklamowymi jest nazywana relacją nadrzędna-towarzysząca.

Poza wysyłaniem żądań reklam wideo i nakładek nadrzędnych możesz używać pakietu IMA SDK do wyświetlania towarzyszących reklam HTML. Reklamy te wyświetlają się w środowisku HTML.

Użyj reklam towarzyszących

Aby używać reklam towarzyszących:

1. Zarezerwuj reklamy towarzyszące

Najpierw musisz zarezerwować reklamy towarzyszące, które chcesz wyświetlać razem z reklamami nadrzędnymi. Reklamy towarzyszące można trafikować w usłudze Ad Manager. W przypadku każdej reklamy nadrzędnej możesz wyświetlić maksymalnie 6 reklam towarzyszących. Ta technika, gdy jeden kupujący kontroluje wszystkie reklamy na stronie, jest też nazywana roadblockingiem.

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

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

3. Reklamy towarzyszące w sieci reklamowej

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

• Automatyczne przy użyciu tagu wydawcy Google (GPT)
  Jeśli do implementacji reklam towarzyszących używasz tagów GPT, reklamy towarzyszące są wyświetlane automatycznie, o ile na stronie HTML zadeklarowano boksy reklam towarzyszących i reklamy te są zarejestrowane przez interfejs API (czyli identyfikatory div w kodzie JavaScript i HTML muszą być takie same). Oto kilka korzyści z używania tagów GPT:
  • Informacje o boksach towarzyszących
  • Zapasowa reklama towarzysząca z sieci wydawcy, jeśli odpowiedź VAST zawiera mniej reklam towarzyszących od liczby zdefiniowanych boksów na stronie HTML.
  • Autouzupełnianie reklamy towarzyszącej w przypadku braku reklamy wideo
  • Wstępnie wczytane boksy reklam towarzyszących w odtwarzaczach wideo typu „kliknij, aby odtworzyć”
  • Automatyczne renderowanie elementów towarzyszących, w tym HTMLResource i iFrameResource
• Ręcznie za pomocą interfejsu Ad API.

Używanie reklam towarzyszących z tagiem wydawcy Google

Tag wydawcy Google (GPT) automatyzuje wyświetlanie reklam towarzyszących HTML w witrynie. Zalecamy, aby większość wydawców korzystała z tagu GPT. Pakiet SDK HTML5 rozpoznaje boksy GPT, gdy zostanie wczytany na głównej stronie internetowej (nie w elemencie iframe). Więcej szczegółowych informacji o używaniu GPT z pakietem IMA SDK znajdziesz w dokumentacji GPT.

Uwaga: jeśli do wyświetlania reklam używasz pakietu Google Interactive Media Ads SDK, dane przesyłane z powrotem do serwera reklam mogą zawierać informacje o tym, czy użytkownik wszedł w interakcję ze stroną, na której wyświetliły się reklamy. Poinformuj o tym użytkowników witryny, aby zachować zgodność z wymogiem zamieszczenia w umowie z Google wymagania dotyczącego zbierania i wykorzystywania danych.

Jeśli hostujesz pakiet HTML5 SDK w elemencie iframe

Jeśli spełniasz oba te warunki, musisz dołączyć dodatkowy skrypt proxy, aby Twoje towarzyszące tagi GPT wyświetlały się prawidłowo:

1. Wczytaj pakiet SDK HTML5 w elemencie iframe.
2. Wczytywanie tagu GPT na głównej stronie internetowej (poza elementem IFrame).

Aby kreacje towarzyszące wyświetlały się w takiej sytuacji, przed wczytaniem pakietu SDK musisz wczytać skrypt serwera 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 elemencie iframe nie powinien być ładowany tag GPT.
• Tag GPT musi być ładowany na górze strony, a nie w innym elemencie iframe.
• Skrypt serwera proxy musi być wczytywany w tej samej ramce co tag GPT (czyli na stronie głównej).

Deklarowanie boksów reklam towarzyszących w kodzie HTML

W tej sekcji wyjaśniamy, jak definiować reklamy towarzyszące w języku HTML za pomocą tagów wydawcy Google, oraz przedstawiamy przykładowy kod na potrzeby różnych scenariuszy. W przypadku pakietu SDK HTML5 musisz dodać do strony HTML trochę JavaScriptu i zadeklarować boksy reklam towarzyszących.

Uwaga: w każdym z tych przykładów musisz podać prawidłowe network i unit-path w wywołaniu metody googletag.defineSlot (w tagu <head> lub <body>, w zależności od konkretnego przykładu).

• Przykład 1. Podstawowa implementacja boksu reklamowego
• Przykład 2. Implementacja dynamicznego boksu reklamowego
• Przykład 3. Wstępnie załadowane boksy reklamowe

Przykład 1. Podstawowa implementacja boksu reklamowego

Poniższy przykładowy kod pokazuje, jak umieścić plik gpt.js na stronie HTML i zadeklarować boks reklamowy. Zadeklarowany boks reklamowy ma wymiary 728 x 90 pikseli. GPT próbuje wypełnić boks wszelkimi reklamami towarzyszącymi zwróconymi w odpowiedzi VAST, które pasują do tego rozmiaru. Po zadeklarowaniu boksów reklamowych funkcja googletag.display() może je renderować, gdziekolwiek zostanie wywołana na stronie. Są to boksy towarzyszące, więc reklamy nie są wyświetlane od razu. Zamiast tego pojawiają się obok głównej 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

Poniżej znajdziesz kod z działającą implementacją.

Przykład 2. Implementacja dynamicznego boksu reklamowego

Czasami do czasu wyrenderowania jej zawartości nie wiadomo, ile boksów reklamowych znajduje się na stronie. Poniższy przykładowy kod pokazuje, jak zdefiniować boksy reklamowe podczas renderowania strony. Ten przykład jest identyczny z przykładem 1 z tą różnicą, że rejestruje boksy reklamowe, w których są rzeczywiście wyświetlane.

Uwaga: gdy odtwarzacz ma wyświetlić reklamy, prosi o boksy. 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 kod działającej implementacji.

Przykład 3: wstępnie wczytane boksy reklamowe

W niektórych przypadkach przed wysłaniem żądania reklamy towarzyszącej może być konieczne wyświetlenie czegoś w boksie reklamowym. Reklamy towarzyszące są zwykle zgłaszane w połączeniu z reklamą wideo. To żądanie może wystąpić po wczytaniu strony. Na przykład reklama towarzysząca może wczytać się dopiero wtedy, gdy użytkownik kliknie film typu „kliknij, aby odtworzyć”. W takiej sytuacji musisz mieć możliwość wysłania żądania reklamy towarzyszącej, która ma wypełnić boks reklamowy. Aby umożliwić obsługę tego przypadku użycia, w boksie towarzyszącym możesz wyświetlać standardowe reklamy internetowe. Upewnij się, że reklamy internetowe są kierowane na boksy towarzyszące. Możesz kierować reklamy na boksy towarzyszące tak samo jak w przypadku standardowych boksów reklamowych w internecie.

Uwaga: poniższy przykładowy kod jest taki sam jak w przykładzie 1 z wyjątkiem sekcji, która jest pogrubiona. W takim przypadku zamiast jednostki reklamy wideo podajesz ścieżkę wstępnego wczytywania reklamy i ścieżkę jednostki.

Oto przykład opisywanej właśnie 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

Aby zobaczyć działającą implementację, możesz zobaczyć ten skrypt w postaci kodu.

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.

Reklamy towarzyszące w sieci reklamowej

Aby wyświetlać reklamy towarzyszące, musisz najpierw uzyskać odwołanie do obiektu Ad za pomocą dowolnego zdarzenia AdEvent przesłanego z metody AdsManager. Zalecamy użycie zdarzenia AdEvent.STARTED, ponieważ wyświetlanie reklam towarzyszących powinno odbywać się jednocześnie z wyświetlaniem reklamy nadrzędnej.

Następnie użyj tego obiektu Ad do wywołania getCompanionAds() w celu uzyskania tablicy obiektów CompanionAd. Możesz tu określić właściwość CompanionAdSelectionSettings, która pozwala ustawiać filtry reklam towarzyszących według typu kreacji, odsetka dopasowania bliskiego, typu zasobu i kryteriów rozmiaru. Więcej informacji o tych ustawieniach znajdziesz w dokumentacji interfejsu API HTML5.

Obiekty CompanionAd zwrócone przez getCompanionAds mogą teraz być używane do wyświetlania reklam towarzyszących na stronie z uwzględnieniem tych wskazówek:

1. Utwórz na stronie boks reklamy towarzyszącej <div> o wymaganym rozmiarze.
2. W module obsługi zdarzeń zdarzenia STARTED pobierz obiekt Ad, wywołując metodę getAd().
3. Użyj parametru getCompanionAds(), aby uzyskać listę reklam towarzyszących, które pasują do rozmiaru boksu reklamy towarzyszącej i CompanionAdSelectionSettings oraz mają ten sam numer sekwencyjny co kreacja nadrzędna. Kreacje z brakującym atrybutem „sekwencja” są traktowane jako o numerze sekwencji 0.
4. Pobierz zawartość z instancji CompanionAd i ustaw ją jako wewnętrzny blok HTMl <div> tego boksu reklamowego.

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>

Displayowe elastyczne reklamy towarzyszące

Pakiet IMA obsługuje teraz elastyczne reklamy towarzyszące. Mogą zmieniać rozmiar, dopasowując się do rozmiaru boksu reklamowego. Wypełniają 100% szerokości nadrzędnego elementu div, a potem zmieniają wysokość, by pasowała do zawartości kreacji towarzyszącej. Aby je ustawić, użyj rozmiaru kreacji towarzyszącej Fluid w usłudze Ad Manager. Na ilustracji poniżej pokazujemy, gdzie ustawić tę wartość.

Płynne kreacje towarzyszące GPT

Gdy używasz elementów towarzyszących GPT, możesz zadeklarować elastyczny boks towarzyszący, 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>

Płynne reklamy towarzyszące interfejsu API reklam

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