Przykłady zaawansowanych tagów wydawcy Google

W tym artykule znajdziesz przykłady zaawansowanych tagów wydawcy Google (GPT) używanych na komputerach i urządzeniach mobilnych.

Więcej dowiesz się z przewodnika po interfejsie API tagów wydawcy Google. Informacje o podstawowej implementacji tagów GPT zawiera artykuł Przykładowe tagi wydawcy Google.

W przedstawionych przykładach są używane testowe konfiguracje sieci, boksów reklamowych i kierowania. Własną implementację musisz dostosować do swojej sieci i konfiguracji.

Nie otwieraj ani nie zmieniaj obiektów utworzonych przez GPT (także elementów renderowanych przez GPT) w zakresie wykraczającym poza zmiany opisane w naszej dokumentacji interfejsu API GPT.

Elementy wewnętrzne GPT często się zmieniają, a nieudokumentowane właściwości mogą zostać usunięte bez ostrzeżenia. Jeśli kod opiera się na takich elementach wewnętrznych, w każdej chwili może dojść do jego uszkodzenia.

Tagowanie stron z nieskończoną ilością treści

Za pomocą tagów wydawcy Google możesz dynamicznie generować nowe treści reklamowe.

Wykluczenia kategorii i reklamy na wyłączność są uwzględniane tylko w przypadku reklam wyświetlanych w odpowiedzi na to samo żądanie architektury z pojedynczym żądaniem. Uwzględnianie wielu wywołań architektury z pojedynczym żądaniem w jednym wczytywaniu strony może spowodować wyświetlenie na niej reklam konkurencyjnych.

Poniżej znajdziesz przykład pełnego kodu, który można zastosować do zaimplementowania tagów przy nieskończonej ilości treści na stronie. Przykład zawiera przycisk u dołu strony, który dynamicznie generuje nową treść.

Przykładowa implementacja
<html>
<head>
<title>Przykład przewijania w nieskończoność</title>

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
    window.googletag = window.googletag || {cmd: []};
</script>

<script>

var adslot0;

 googletag.cmd.push(function() {

   // Deklarujemy wszystkie boksy obecne od początku na stronie.
   adslot0 = googletag.defineSlot('/6355419/Travel', [728, 90], 'leaderboard').
       setTargeting("test","infinitescroll").
       addService(googletag.pubads());

   // Nieskończone przewijanie wymaga architektury SRA.
   googletag.pubads().enableSingleRequest();

   // Wyłączamy wczytywanie początkowe, do pobierania reklam użyjemy funkcji refresh().
   // Wywołanie tej funkcji oznacza, że wywołania funkcji display()
   // rejestrują boks jako gotowy, ale nie pobierają do niego reklam.
   googletag.pubads().disableInitialLoad();

   // Włączamy usługi.
   googletag.enableServices();
 });

 // Funkcja, która generuje unikalne nazwy boksów.
 var nextSlotId = 1;
 function generateNextSlotName() {
   var id = nextSlotId++;
   return 'adslot' + id;
 }

 // Funkcja, która dodaje treści do strony i naśladuje rzeczywiste
 // nieskończone przewijanie, ale znacznie upraszcza je od strony kodu.
 function moreContent() {

   // Generujemy nazwę następnego boksu.
   var slotName = generateNextSlotName();

   // Tworzymy element div z boksem.
   var slotDiv = document.createElement('div');
   slotDiv.id = slotName; // Identyfikator musi być taki sam jak nazwa boksu.
   document.body.appendChild(slotDiv);

   // Tworzymy i dodajemy atrapę treści 1.
   var h1=document.createElement("H2")
   var text1=document.createTextNode("Dynamic Fake Content 1");
   h1.appendChild(text1);
   document.body.appendChild(h1);

   // Tworzymy i dodajemy atrapę treści 2.
   var h2=document.createElement("H2")
   var text2=document.createTextNode("Dynamic Fake Content 2");
   h2.appendChild(text2);
   document.body.appendChild(h2);

   // Definiujemy sam boks, wywołujemy funkcję display(), 
   // by zarejestrować element div, oraz funkcję refresh(), by pobrać reklamę.
   googletag.cmd.push(function() {
     var slot = googletag.defineSlot('/6355419/Travel', [728, 90], slotName).
         setTargeting("test","infinitescroll").
         addService(googletag.pubads());

     // Funkcję display trzeba wywołać po dodaniu
     // elementu div z boksem do strony i przed funkcją refresh.
     googletag.display(slotName);
     googletag.pubads().refresh([slot]);
   });
 }
</script>

<style>
 body > div {
	margin-bottom: 1em;
	border: solid 1px black;
	width: 728px
 }
 body > img {
	margin-bottom: 1em;
	display: block
 }
 body > button {
	position: fixed;
	bottom: 10px;
 }
</style>
</head>

<body>
 <h1>Strona testowa z tagiem GPT – nieskończone przewijanie</h1>

 <!-- Pierwsza atrapa treści -->
 <text>
 <h2> Początkowa atrapa treści </h2>
 </text>

 <!-- Pierwsza reklama -->
 <div id="leaderboard"> 
     <script>
        // Wywołujemy funkcję display(), by zarejestrować boks jako gotowy,
        // oraz funkcję refresh(), by pobrać reklamę.
        googletag.cmd.push(function() {
          googletag.display('leaderboard');
          googletag.pubads().refresh([adslot0]);
        });
     </script> 
 </div>

 <!-- Inne początkowe atrapy treści -->
 <text>
  <h2> Początkowa atrapa treści 1 </h2>
  <h2> Początkowa atrapa treści 2 </h2>
 </text>

 <!-- Przycisk dynamicznie wczytujący więcej treści. -->
 <button onclick="moreContent()">Więcej treści</button>

</body>
</html>

Odświeżanie konkretnych boksów reklamowych

Możesz użyć funkcji odświeżania asynchronicznego tagu wydawcy Google do dynamicznego ponownego ładowania reklam bez odświeżania całej treści strony.

Aby włączyć konkurowanie zasobów reklamowych w Ad Exchange zgodnie z zasadami Google, musisz zadeklarować, które z Twoich zasobów reklamowych są odświeżane.

Aby zaimplementować tę funkcję, musisz wygenerować asynchroniczny tag GPT i wprowadzić pewne zmiany. W tej przykładowej implementacji pokazano dwa boksy reklamowe i odpowiednie przyciski umieszczające w boksach nowe reklamy.

Przykładowa implementacja
<html>
<head>
<title>Szkolenie z tagów GPT – odświeżanie boksów</title>

<script> 

 // Wczytujemy tag GPT asynchronicznie.
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   gads.type = 'text/javascript';
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//securepubads.g.doubleclick.net/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>

<script>

 // Boksy GPT
 var gptAdSlots = [];

 googletag.cmd.push(function() {

  // Definiujemy pierwszy boks.
  gptAdSlots[0] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard0').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Definiujemy drugi boks.
  gptAdSlots[1] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard1').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Konfigurujemy architekturę SRA.
  googletag.pubads().enableSingleRequest();

  // Zaczynamy pobieranie reklamy.
  googletag.enableServices();
 });

 // Funkcja przycisku, który odświeża pierwszy boks.
 var refreshFirstSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0]]);
   });
 };

 // Funkcja przycisku, który odświeża drugi boks.
 var refreshSecondSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[1]]);
   });
 };

 // Funkcja przycisku, który odświeża oba boksy.
 var refreshBothSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
   });
 };

 // Funkcja przycisku, który czyści wszystkie boksy.
 var clearAllSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().clear();
   });
 };
</script>
</head>

<body>
 <div>
  <h1>Szkolenie z tagów GPT – odświeżanie boksów</h1>
  <div id='leaderboard0' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard0');
          });
     </script> 
  </div>

  <div id='leaderboard1' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard1');
          });
     </script> 
  </div>
 </div>

 <div> 
  <!-- Odświeżenie pierwszego boksu -->
  <button onclick="refreshFirstSlot();">Odśwież górną reklamę</button>

  <!-- Odświeżenie drugiego boksu -->
  <button onclick="refreshSecondSlot();">Odśwież dolną reklamę</button>

  <!-- Odświeżenie obu boksów -->
  <button onclick="refreshBothSlots();">Odśwież obie reklamy</button>

  <!-- Czyszczenie boksów -->
  <button onclick="clearAllSlots();">Wyczyść reklamy</button>
 </div>

</body>
</html>

Ręczne testowanie funkcji refresh()

Aby ręcznie przetestować funkcję refresh(), możesz tymczasowo dodać do swojej strony przycisk odśwież. W tym celu wklej poniższy fragment kodu bezpośrednio przed tagiem </body>. Po kliknięciu przycisku wszystkie boksy reklamowe na stronie zostaną odświeżone, ale sama strona nie.

<form onsubmit="googletag.pubads().refresh();return false;">
  <input type="submit" value="refresh" />
</form>
 

Więcej informacji o sposobie działania funkcji odświeżania w GPT znajdziesz w Przewodniku po interfejsie API tagów wydawcy Google.

Tagowanie w przypadku elastycznego projektowania stron

Używając tagów wydawcy Google, możesz pisać kod zgodny z zasadami elastycznego projektowania stron. Poniżej znajdziesz przykład pełnego kodu implementującego te zasady. Aby przetestować działanie elastycznego projektu z przykładu, zmień rozmiar okna i odśwież stronę.

W tym przykładzie elastyczne reklamy z tagami GPT nie zmieniają rozmiaru, gdy zmienia się rozmiar przeglądarki. Możesz dodać własny kod, by odświeżać boksy reklamowe przy zmianie rozmiaru.

Przykładowa implementacja
<html>
<head>
<title>Szkolenie z tagów GPT – elastyczna strona testowa</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
    window.googletag = window.googletag || {cmd: []};
</script>
<script>

 // Boksy GPT
 var gptAdSlots = [];
 googletag.cmd.push(function() {

   // Definiujemy obiekt mapowania rozmiaru. Pierwszy parametr funkcji addSize
   // to rozmiar widocznego obszaru, a drugi – lista dozwolonych rozmiarów reklam.
   var mapping = googletag.sizeMapping().

   // Mała reklama
   addSize([100, 100], [88, 31]). 

   // Dwa typowe formaty banerów na urządzenia mobilne
   addSize([320, 400], [[320, 50], [300, 50]]). 
		
   // Ta sama szerokość co poprzednio, ale większa wysokość
   addSize([320, 700], [300, 250]).

   // Orientacja pozioma na tablecie
   addSize([750, 200], [728, 90]). 

   // Komputer
   addSize([1050, 200], [1024, 120]).build();

   // Definiujemy boks z tagiem GPT.
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot').
       defineSizeMapping(mapping).
       addService(googletag.pubads());
   googletag.pubads().setTargeting("test","responsive");

   // Zaczynamy pobierać reklamę.
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>Szkolenie z tagów GPT – elastyczna strona testowa</h1>

<div id="ad-slot"> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

<p><span>Elastyczne reklamy z tagami GPT nie zmieniają rozmiaru, gdy zmienia się rozmiar przeglądarki.
  Możesz dodać własny kod, by odświeżać boksy reklamowe przy zmianie rozmiaru.
  Aby sprawdzić możliwości elastycznego projektu, zmień rozmiar okna i odśwież stronę.</span></p>

</body>
</html>

Dowiedz się więcej o tworzeniu reklam elastycznych.

Dodawanie tagów na potrzeby reklam o rozmiarze elastycznym

Tag wydawcy Google można skonfigurować tak, by wyświetlał reklamę natywną o niestandardowym rozmiarze „elastycznym”. W takim przypadku boks reklamowy będzie miał szerokość swojego kontenera nadrzędnego, a jego wysokość będzie się zmieniała tak, by pomieścić zawartość kreacji natywnej. Poniżej znajdziesz przykład pełnego kodu, który pozwala zaimplementować tę funkcję.

Przykładowa implementacja

Jeśli dodajesz rozmiar „elastyczny” do istniejącego tagu wydawcy Google, pamiętaj, by jako żądany rozmiar dodać parametr „fluid”. Na przykład:

.addSize([640, 480], 'fluid')

<html>
<head>
<title>Szkolenie z tagów GPT – reklamy natywne i rozmiar elastyczny</title>
<script>
 // Wczytujemy tag GPT asynchronicznie.
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//securepubads.g.doubleclick.net/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>
<script>

 // Boksy GPT
 var gptAdSlots = [];
 googletag.cmd.push(function() {


   // Definiujemy boks GPT.
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot').
       addService(googletag.pubads());

   // Zaczynamy pobierać reklamę.
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>Szkolenie z tagów GPT – natywna strona testowa</h1>

<div id="ad-slot" style=”width:600px;”> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

</body>
</html>

Dowiedz się więcej o reklamach natywnych.

Żądanie i renderowanie reklam zależne od zdarzeń

Za pomocą tagów wydawcy Google możesz wysyłać żądania reklam na podstawie zdarzeń. Możesz na przykład określić, że reklama ma się wyświetlać, gdy użytkownik kliknie przycisk.

Przykładowa implementacja
<html>
  <head>
    <meta charset="utf-8">
    <title>Żądanie i renderowanie reklam zależne od zdarzeń</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      (window.googletag || (googletag = {cmd: []})).cmd.push(function() {
        googletag
            .defineSlot('/6075/gpttraining', [300, 250], 'div-for-slot')
            .addService(googletag.pubads());
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px;">
      <script>
        googletag.cmd.push(function() {
          // Ta funkcja tylko rejestruje boks.
          // Reklama zostanie pobrana dopiero po wywołaniu funkcji refresh.
          googletag.display('div-for-slot');
        });
      </script>
    </div>
    <button
        onclick="
          googletag.cmd.push(function() {
            googletag.pubads().refresh();
          });
          this.parentNode.removeChild(this);
        ">
      Show Ad
    </button>
  </body>
</html>

Leniwe ładowanie

Leniwe ładowanie umożliwia szybsze wczytywanie stron, zmniejsza zużycie zasobów i rywalizację o nie oraz podnosi współczynnik widoczności dzięki wstrzymaniu żądania i wyświetlania reklam, dopóki te nie znajdą się w pobliżu obszaru widocznego dla użytkownika.

W przypadku leniwego ładowania w architekturze SRA wywołanie reklamy i wszystkich pozostałych boksów reklamowych następuje wtedy, gdy pierwszy boks reklamowy znajdzie się w widocznym obszarze określonym przez parametr fetchMarginPercent. Spowoduje to rozbieżności między liczbą pobranych wyświetleń i wyświetleń w Widoku aktywnym.

Leniwe ładowanie nie jest obecnie w pełni zgodne z metodą collapseEmptyDivs().

Przykładowa implementacja
<html>
<head>
<script>var googletag = window.googletag || {cmd: []};</script>
<script async src="//securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
googletag.cmd.push(function() {
  googletag.defineSlot('/1234567/sports', [728,90], 'div-1').
    addService(googletag.pubads());
  googletag.defineSlot('/1234567/news', 'fluid', 'div-2').
    addService(googletag.pubads());
  googletag.defineSlot('/1234567/weather', [160, 600], 'div-3').
    addService(googletag.pubads());

  // Some examples of ways to enable below. Normally, only one of these
  // methods should be used.

  // A) Enable with defaults.
  googletag.pubads().enableLazyLoad();

  // B) Enable without lazy fetching. Additional calls override previous
  // ones.
  googletag.pubads().enableLazyLoad({fetchMarginPercent: -1});

  // C) Enable lazy loading with...
  googletag.pubads().enableLazyLoad({
    fetchMarginPercent: 500,  // Fetch slots within 5 viewports.
    renderMarginPercent: 200,  // Render slots within 2 viewports.
    mobileScaling: 2.0  // Double the above values on mobile.
  });

  googletag.enableServices();
});
</script>
</head>
<body>

<!-- 
     As defined by lazy load settings, initially Slot 1 will be fetched and
     rendered on mobile and desktop. Slot 2 will be fetched, on mobile and
     desktop, but will not be rendered on desktop. Slot 3 will not be fetched
     or rendered on mobile and desktop.
-->

<div id="div-1">
  <script>
    googletag.cmd.push(function() {googletag.display('div-1');});
  </script>
</div>

<!-- 3 viewport tall div to place next slot 3 viewports away. -->
<div style="height:300vh"></div>
<div id="div-2">
  <script>
    googletag.cmd.push(function() {googletag.display('div-2');});
  </script>
</div>

<!-- 9 viewport tall div to place next slot 12 viewports away. -->
<div style="height:900vh"></div>
<div id="div-3">
  <script>
    googletag.cmd.push(function() {googletag.display('div-3');});
  </script>
</div>
</body>
</html>
Dowiedz się więcej o leniwym ładowaniu.

Kontrola zachowania kontenera SafeFrame przy użyciu tagów GPT

Tagi GPT umożliwiają precyzyjną kontrolę zachowania kontenera SafeFrame przez metodę setSafeFrameConfig. Traktuje ona obiekt JSON jako dane wejściowe i pozwala skonfigurować określone zachowania kontenerów SafeFrame utworzonych przez tagi GPT.

Ta metoda wpływa tylko na zachowanie reklam renderowanych w SafeFrame. Nie określa ona, czy dana reklama jest renderowana w SafeFrame – jest to zależne od typu kreacji oraz ustawień SafeFrame.

Aby zminimalizować szanse na wyświetlanie złośliwych kreacji, zalecamy, by zawsze, gdy jest to możliwe, mieć włączoną funkcję SafeFrame w połączeniu z dostępnym w języku HTML5 atrybutem sandbox. Pozwoli to zapobiec nawigacji na najwyższym poziomie. Możesz użyć parametru setForceSafeFrame w interfejsie API GPT, by wymusić renderowanie w SafeFrame reklam z określonego boksu.

Metoda setSafeFrameConfig zwraca wartość logiczną określającą, czy ustawienia konfiguracyjne zostały prawidłowo przeanalizowane.

Szczegóły dotyczące obiektu konfiguracji

Jako dane wejściowe obiekt konfiguracji przyjmuje prosty obiekt JSON zawierający mapę kluczy i wartości (prawidłowe wartości są opisane poniżej).

Wszystkie pozostałe klucze są ignorowane. Jeśli wykryte zostaną wartości inne niż true/false, konfiguracja zostanie odrzucona i wystąpi błąd.

Nazwa klucza Opis Prawidłowe wartości
allowOverlayExpansion Kreacje mogą się rozwijać, używając trybu Overlay (nakładka) w interfejsie API SafeFrame. Rozwinięta kreacja zakrywa zawartość pozostałej części strony. true
false
allowPushExpansion Kreacje mogą się rozwijać, używając trybu Push (przesuwanie) w interfejsie API SafeFrame. Rozwinięta kreacja przesuwa do dołu zawartość pozostałej części strony. true
fałsz
sandbox Tworzy instancję kontenera SafeFrame z ustawionym atrybutem sandbox, by uniemożliwić nawigację na najwyższym poziomie. Jeśli używasz tego atrybutu, upewnij się, że kliknięcia reklamy nie powodują nawigacji z bieżącej strony, lecz otwierają stronę docelową w nowej karcie. Maksymalizuje to zgodność reklam w różnych przeglądarkach z różną obsługą trybu piaskownicy.
 
Działa tylko w przeglądarkach, które obsługują nowy, dostępny w języku HTML5 atrybut sandbox w elementach iframe.

Ustawienie tego klucza blokuje reklamy używające wtyczek (np. Flasha) i może spowodować nieprawidłowe wyświetlanie reklam lub stron docelowych w określonych przeglądarkach, szczególnie na komputerze.
true
Przykładowa implementacja
Przykład Opis
googletag.pubads().setSafeFrameConfig({sandbox: true}); Wszystkie reklamy na stronie wyrenderowanej w SafeFrame będą używać atrybutu sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
W SafeFrame z ustawionym atrybutem sandbox zostanie wyrenderowany tylko boks slot1. Nie ma to wpływu na inne boksy reklamowe.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z nakładką.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z nakładką. Ustawia też atrybut sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z przesuwaniem.

Więcej informacji o renderowaniu kreacji przy użyciu SafeFrame.

Czy to było pomocne?
Jak możemy ją poprawić?