Dodawanie obsługi reklam towarzyszących

Wybierz platformę: HTML5 Android iOS

Możesz powiązać boksy reklamowe HTML na stronie z boksami reklamowymi wideo lub nakładkami reklamowymi. Taka relacja między powiązanymi boksami reklamowymi jest nazywana relacją nadrzędny-towarzyszący.

Oprócz żądania reklam nadrzędnych wideo i nakładkowych możesz używać pakietu IMA SDK do wyświetlania towarzyszących reklam HTML. Te reklamy są wyświetlane w środowisku HTML.

Używanie reklam towarzyszących

Aby używać reklam towarzyszących, wykonaj te czynności:

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. Do każdej reklamy nadrzędnej możesz wyświetlać maksymalnie 6 reklam towarzyszących. Ta technika, w której jeden kupujący kontroluje wszystkie reklamy na stronie, jest też nazywana wyświetlaniem reklam na wyłączność.

2. Poproś o reklamy towarzyszące

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

3. Wyświetl reklamy towarzyszące

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

• Automatycznie za pomocą tagu wydawcy Google (GPT).

  Jeśli do wdrożenia reklam towarzyszących używasz tagu GPT, będą one wyświetlane automatycznie, o ile na stronie HTML są zadeklarowane boksy reklam towarzyszących i te reklamy są zarejestrowane w interfejsie API (czyli identyfikator div w JavaScript i HTML musi się zgadzać). Oto niektóre korzyści używania tagu GPT:

  • Rozpoznawanie boksów reklam towarzyszących.
  • Reklamy zapasowe towarzyszące z sieci wydawcy, jeśli odpowiedź VAST zawiera mniej reklam towarzyszących niż zdefiniowanych boksów na stronie HTML.
  • Automatyczne wypełnianie reklam towarzyszących, jeśli brakuje reklamy wideo.
  • Wstępnie wczytane boksy reklam towarzyszących w przypadku odtwarzaczy wideo typu „kliknij, aby odtworzyć”.
  • Automatyczne renderowanie reklam 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 towarzyszących reklam HTML w Twojej witrynie. Zalecamy, aby większość wydawców korzystała z tagu GPT. Pakiet SDK HTML5 rozpoznaje boksy GPT, jeśli tag GPT jest wczytany na głównej stronie (a nie w elemencie iframe). Więcej informacji o używaniu tagu GPT z pakietem IMA SDK znajdziesz w dokumentacji tagu GPT.

Uwaga: gdy do wyświetlania reklam używasz pakietu Google Interactive Media Ads SDK, dane, które są 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. Aby zachować zgodność z wymaganiami dotyczącymi ujawniania informacji o zbieraniu i wykorzystywaniu danych, musisz poinformować o tym swoich użytkowników.

Jeśli pakiet SDK HTML5 jest hostowany w elemencie iframe

Jeśli spełniasz oba te kryteria, musisz uwzględnić dodatkowy skrypt proxy, aby reklamy towarzyszące GPT wyświetlały się prawidłowo:

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

Aby reklamy 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, który wczytuje pakiet SDK, nie powinien być wczytany żaden tag GPT.
• Tag GPT musi być wczytany na stronie głównej, a nie w innym elemencie iframe.
• Skrypt proxy musi być wczytany w tej samej ramce co tag GPT (czyli na stronie głównej).

Deklarowanie boksów reklam towarzyszących w HTML

Z tej sekcji dowiesz się, jak deklarować reklamy towarzyszące w HTML za pomocą tagu GPT, oraz znajdziesz przykładowy kod dla różnych scenariuszy. W przypadku pakietu SDK HTML5 musisz dodać do strony HTML kod JavaScript i zadeklarować boksy reklam towarzyszących.

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

• Przykład 1. Podstawowe wdrożenie boksu reklamowego
• Przykład 2. Dynamiczne wdrożenie boksu reklamowego
• Przykład 3. Wstępnie wczytane boksy reklamowe

Przykład 1. Podstawowe wdrożenie boksu reklamowego

Poniższy przykładowy kod pokazuje, jak uwzględnić plik gpt.js na stronie HTML i zadeklarować boks reklamowy. Zadeklarowany boks reklamowy ma rozmiar 728 x 90 pikseli. Tag GPT próbuje wypełnić boks dowolnymi 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ć w dowolnym miejscu na stronie, w którym zostanie wywołana. Ponieważ boksy są boksami reklam towarzyszących, reklamy nie są wyświetlane od razu. Zamiast tego pojawiają 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

Działającą implementację znajdziesz w tym codepen.

Przykład 2. Wdrożenie dynamicznej reklamy

Czasami możesz nie wiedzieć, ile boksów reklamowych masz na stronie, dopóki nie zostanie wyrenderowana jej zawartość. Poniższy przykładowy kod pokazuje, jak definiować boksy reklamowe podczas renderowania strony. Ten przykład jest identyczny z przykładem 1 z tą różnicą, że rejestruje boksy reklamowe w miejscach, w których są faktycznie wyświetlane.

Uwaga: gdy odtwarzacz wideo 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

Działającą implementację znajdziesz w tym kodzie.

Przykład 3. Wstępnie wczytane boksy reklamowe

W niektórych przypadkach może być konieczne wyświetlenie czegoś w boksie reklamowym, zanim zostanie wysłane żądanie reklamy towarzyszącej. Reklamy towarzyszące są zwykle żądane razem z reklamą wideo. To żądanie może nastąpić po wczytaniu strony. 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ść wysłania żądania zwykłej reklamy, aby wypełnić boks reklamowy, zanim zostanie wysłane żądanie reklamy towarzyszącej. Aby obsługiwać ten przypadek użycia, możesz wyświetlać standardowe reklamy internetowe w boksie reklamy towarzyszącej. Upewnij się, że reklamy internetowe są kierowane na boksy reklam towarzyszących. Możesz kierować reklamy na boksy reklam towarzyszących w taki sam sposób jak na standardowe boksy reklam internetowych.

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

Oto przykład opisanej 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

Działającą implementację znajdziesz w tym codepen.

Używanie reklam towarzyszących z interfejsem Ad API

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

Wyświetl reklamy towarzyszące

Aby wyświetlać reklamy towarzyszące, najpierw uzyskaj odniesienie do obiektu Ad za pomocą dowolnego z zdarzeń AdEvent wysyłanych z AdsManager. Zalecamy używanie zdarzenia AdEvent.STARTED, ponieważ wyświetlanie reklam towarzyszących powinno zbiegać się z wyświetlaniem reklamy nadrzędnej.

Następnie użyj tego obiektu Ad, aby wywołać getCompanionAds() i uzyskać tablicę obiektów CompanionAd. Możesz tu określić CompanionAdSelectionSettings, które pozwalają ustawić filtry reklam towarzyszących według typu kreacji, procentu dopasowania, typu zasobu i kryteriów rozmiaru. Więcej informacji o tych ustawieniach znajdziesz w dokumentacji interfejsu IMA CompanionAdSelectionSettings API.

Obiekty CompanionAd zwracane przez getCompanionAds można teraz wykorzystać do wyświetlania reklam towarzyszących na stronie zgodnie z tymi wytycznymi:

1. Utwórz na stronie boks reklam towarzyszących <div> o wymaganym rozmiarze.
2. W module obsługi zdarzeń STARTED pobierz obiekt Ad wywołując getAd().
3. Użyj getCompanionAds() , aby uzyskać listę reklam towarzyszących, które pasują zarówno do rozmiaru boksu reklam towarzyszących, jak i do CompanionAdSelectionSettings , oraz mają ten sam numer sekwencji co kreacja nadrzędna. Kreacje bez atrybutu sekwencji są traktowane jako mające numer sekwencji 0.
4. Pobierz treść z CompanionAd instancji i ustaw ją jako wewnętrzny kod HTML elementu <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>

Wyświetlanie elastycznych reklam towarzyszących

Pakiet IMA obsługuje teraz elastyczne reklamy towarzyszące. Te reklamy towarzyszące mogą zmieniać rozmiar, aby dopasować się do rozmiaru boksu reklamowego. Wypełniają one 100% szerokości elementu nadrzędnego div, a następnie zmieniają wysokość, aby dopasować się do treści reklamy towarzyszącej. Ustawia się je za pomocą rozmiaru reklamy towarzyszącej Fluid w usłudze Ad Manager. Na tym obrazie zobaczysz, gdzie ustawić tę wartość.

Elastyczne reklamy towarzyszące GPT

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

Elastyczne reklamy towarzyszące interfejsu Ad API

Gdy używasz interfejsu Ad API do wyświetlania reklam towarzyszących, możesz zadeklarować elastyczny boks reklam towarzyszących aktualizując 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>