Dodawanie obsługi reklam towarzyszących

Wybierz platformę: HTML5 Android iOS

Możesz powiązać boks na reklamy HTML na stronie z boksem na reklamy wideo lub nakładkowe. Ta relacja między powiązanymi miejscami na reklamy jest nazywana relacją nadrzędne-towarzyszące.

Oprócz wysyłania żądań głównych reklam wideo i reklam w formie nakładki możesz używać pakietu IMA SDK do wyświetlania towarzyszących reklam HTML. Te reklamy wyświetlają się w środowisku HTML.

Korzystanie z reklam towarzyszących

Aby korzystać z reklam towarzyszących, wykonaj te czynności:

1. Rezerwowanie reklam towarzyszących

Najpierw musisz zarezerwować reklamy towarzyszące, które chcesz wyświetlać z reklamami głównymi. 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ż znana jako reklamy na wyłączność.

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:

• Automatycznieza pomocą tagu wydawcy Google (GPT).

  Jeśli do implementacji reklam towarzyszących używasz GPT, będą one wyświetlane automatycznie, o ile na stronie HTML zadeklarowane są boksy reklam towarzyszących, a reklamy te są zarejestrowane w interfejsie API (tzn. identyfikator div w JavaScript i HTML musi być zgodny). Oto niektóre zalety korzystania z tagów GPT:

  • Rozpoznawanie boksów reklam towarzyszących.
  • Reklamy towarzyszące z sieci wydawcy, jeśli odpowiedź VAST zawiera mniej reklam towarzyszących od liczby zdefiniowanych boksów na stronie HTML.
  • Automatyczne wypełnianie reklamą towarzyszącą, jeśli brakuje reklamy wideo.
  • Wstępnie wczytane boksy reklam towarzyszących w odtwarzaczach 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 w Twojej witrynie reklam towarzyszących w formacie HTML. Większości wydawców zalecamy korzystanie z GPT. Pakiet SDK HTML5 rozpoznaje miejsca na reklamy GPT, jeśli tag GPT jest wczytany na głównej stronie internetowej (nie w ramce IFrame). Więcej informacji o korzystaniu z GPT z pakietem IMA SDK znajdziesz w dokumentacji GPT.

Uwaga: gdy do wyświetlania reklam używasz pakietu SDK do interaktywnych reklam wideo Google, dane przekazywane do serwera reklam mogą zawierać informacje o tym, czy użytkownik wszedł w interakcję ze stroną, na której wyświetlano reklamy. Aby spełnić wymagania dotyczące ujawniania informacji o zbieraniu i wykorzystywaniu danych, które wynikają z Twojej umowy z Google, musisz poinformować o tym 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. Załaduj pakiet SDK HTML5 w elemencie iframe.
2. Załaduj GPT na głównej stronie internetowej (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ć wczytywany GPT.
• GPT musi być wczytywany na stronie głównej, a nie w innym elemencie iframe.
• Skrypt proxy musi być ładowany w tej samej ramce co GPT (czyli na stronie głównej).

Deklarowanie boksów reklamowych komponentów dodatkowych w HTML

Z tej sekcji dowiesz się, jak deklarować reklamy towarzyszące w HTML-u za pomocą tagu GPT. Znajdziesz tu też przykładowy kod dla różnych scenariuszy. W przypadku pakietu SDK HTML5 musisz dodać do strony HTML kod JavaScript i zadeklarować miejsca na reklamy towarzyszące.

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

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

Przykład 1. Podstawowa implementacja boksu reklamowego

Poniższy przykładowy kod pokazuje, jak uwzględnić 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 reklamowy 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, w którym jest wywoływana. Ponieważ boksy są boksami towarzyszącymi, reklamy nie są wyświetlane od razu. Zamiast tego wyświetlają się one 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 codepenie.

Przykład 2. Wdrażanie dynamicznego boksu reklamowego

Czasami liczba boksów reklamowych na stronie jest znana dopiero po wyrenderowaniu treści strony. Poniższy przykładowy kod pokazuje, jak definiować miejsca na reklamy podczas renderowania strony. Ten przykład jest identyczny z przykładem 1, z tą różnicą, że rejestruje miejsca na reklamy w miejscach, w których są one faktycznie wyświetlane.

Uwaga: gdy odtwarzacz wideo ma wyświetlić reklamy, prosi o miejsca na reklamy. 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 reklamy. Reklamy towarzyszące są zwykle wysyłane razem z reklamą wideo. To żądanie może wystąpić po załadowaniu strony. Na przykład reklama towarzysząca może wczytywać się dopiero po kliknięciu przez użytkownika reklamy wideo odtwarzanej po kliknięciu. W takim przypadku musisz mieć możliwość wysłania żądania zwykłej reklamy, która wypełni boks reklamy, zanim zostanie wysłane żądanie reklamy towarzyszącej. Aby obsługiwać ten przypadek użycia, możesz wyświetlać standardowe reklamy internetowe w boksie towarzyszącym. Sprawdź, czy reklamy internetowe są kierowane na boksy reklam towarzyszących. Na boksy towarzyszące możesz kierować reklamy w taki sam sposób jak na standardowe boksy reklamowe w internecie.

Uwaga: poniższy przykładowy kod jest dokładnie taki sam jak kod podany w przykładzie 1, z wyjątkiem sekcji, która jest pogrubiona. W tym przypadku podajesz sieć reklamową i ścieżkę jednostki reklamy wstępnie wczytywanej 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

Poniżej znajdziesz działającą implementację w CodePen.

Korzystanie z reklam towarzyszących w interfejsie Ad API

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

Wyświetlanie reklam towarzyszących

Aby wyświetlać reklamy towarzyszące, najpierw uzyskaj odwołanie do obiektu Ad za pomocą dowolnego zdarzenia AdEvent wysyłanego z AdsManager. Zalecamy używanie zdarzenia AdEvent.STARTED, ponieważ wyświetlanie reklam towarzyszących powinno zbiegać się z wyświetlaniem reklamy głównej.

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

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

1. Utwórz na stronie boks reklamy towarzyszącej<div> o wymaganym rozmiarze.
2. W procedurze obsługi zdarzenia STARTED pobierz obiekt Ad za pomocą wywołania getAd().
3. Użyj getCompanionAds() aby uzyskać listę reklam towarzyszących, które pasują zarówno do rozmiaru boksu reklamowego reklamy towarzyszącej, jak i do CompanionAdSelectionSettings oraz mają ten sam numer sekwencji co kreacja nadrzędna. Kreacje bez atrybutu sekwencji są traktowane tak, jakby miały numer sekwencji 0.
4. Pobierz treść z instancji CompanionAd i ustaw ją jako wewnętrzny kod HTML elementu <div> w tym miejscu na reklamę.

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. Zajmują 100% szerokości kontenera div nadrzędnego, a następnie zmieniają wysokość, aby dopasować się do treści reklamy towarzyszącej. Ustawia się je za pomocą Fluidrozmiaru reklamy towarzyszącej w usłudze Ad Manager. Na ilustracji poniżej pokazujemy, gdzie ustawić tę wartość.

Elastyczne reklamy towarzyszące GPT

W przypadku reklam towarzyszących GPT możesz zadeklarować elastyczny boks reklamy towarzyszącej, 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 w interfejsie Ad API

Jeśli używasz interfejsu Ad API do reklam towarzyszących, możesz zadeklarować elastyczny slot na reklamę towarzyszącą, aktualizują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>