Geavanceerde voorbeelden van Google-uitgeverstags

Dit artikel geeft geavanceerde voorbeelden van Google-uitgeverstags voor desktop- en mobiele implementaties.

U kunt meer informatie vinden in de Referentiehandleiding API Google-uitgeverstag. U kunt ook informatie over algemene GPT-implementatie vinden in het artikel Voorbeeld van Google-uitgeverstags.

In de weergegeven voorbeelden worden een testnetwerk, -advertentieruimte en -targetingconfiguraties gebruikt. Uw implementatie moet worden aangepast aan uw netwerk en configuratie.

U moet objecten die zijn gemaakt met GPT (waaronder via GPT weergegeven elementen) niet verder openen of bewerken dan wordt gedocumenteerd in onze GPT API-documentatie.

Interne GPT-items veranderen regelmatig en niet-gedocumenteerde eigenschappen kunnen zonder waarschuwing worden verwijderd. Als uw code gebruikmaakt van deze interne items, bestaat de kans dat uw code ineens niet meer correct werkt.

Pagina's met oneindige content taggen

U kunt op dynamische wijze nieuwe advertentiecontent genereren met GPT.

Categorie-uitsluitingen en roadblocks worden alleen gerespecteerd voor advertenties die worden weergegeven door hetzelfde SRA-verzoek. Wanneer er tijdens het laden van één pagina sprake is van meerdere SRA-aanroepen, kan dit leiden tot weergave van concurrerende advertenties op dezelfde pagina.

Hieronder vindt u een voorbeeld van de volledige code die u zou kunnen gebruiken om tags met oneindige paginacontent te implementeren. De voorbeeld bevat een knop onder aan de pagina waarmee op dynamische wijze nieuwe content kan worden gegenereerd.

Voorbeeldimplementatie
<html>
<head>
<title>Infinite Scroll Example</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() {

   // Declare any slots initially present on the page
   adslot0 = googletag.defineSlot('/6355419/Travel', [728, 90], 'leaderboard').
       setTargeting("test","infinitescroll").
       addService(googletag.pubads());

   // Infinite scroll requires SRA
   googletag.pubads().enableSingleRequest();

   // Disable initial load, we will use refresh() to fetch ads.
   // Calling this function means that display() calls just
   // register the slot as ready, but do not fetch ads for it.
   googletag.pubads().disableInitialLoad();

   // Enable services
   googletag.enableServices();
 });

 // Function to generate unique names for slots
 var nextSlotId = 1;
 function generateNextSlotName() {
   var id = nextSlotId++;
   return 'adslot' + id;
 }

 // Function to add content to page, mimics real infinite scroll
 // but keeps it much simpler from a code perspective.
 function moreContent() {

   // Generate next slot name
   var slotName = generateNextSlotName();

   // Create a div for the slot
   var slotDiv = document.createElement('div');
   slotDiv.id = slotName; // Id must be the same as slotName
   document.body.appendChild(slotDiv);

   // Create and add fake content 1
   var h1=document.createElement("H2")
   var text1=document.createTextNode("Dynamic Fake Content 1");
   h1.appendChild(text1);
   document.body.appendChild(h1);

   // Create and add fake content 2
   var h2=document.createElement("H2")
   var text2=document.createTextNode("Dynamic Fake Content 2");
   h2.appendChild(text2);
   document.body.appendChild(h2);

   // Define the slot itself, call display() to 
   // register the div and refresh() to fetch ad.
   googletag.cmd.push(function() {
     var slot = googletag.defineSlot('/6355419/Travel', [728, 90], slotName).
         setTargeting("test","infinitescroll").
         addService(googletag.pubads());

     // Display has to be called before
     // refresh and after the slot div is in the page.
     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>GPT Test Page - Infinite Scroll</h1>

 <!-- First fake content -->
 <text>
 <h2> Initial Fake Content </h2>
 </text>

 <!-- First ad -->
 <div id="leaderboard"> 
     <script>
        // Call display() to register the slot as ready
        // and refresh() to fetch an ad.
        googletag.cmd.push(function() {
          googletag.display('leaderboard');
          googletag.pubads().refresh([adslot0]);
        });
     </script> 
 </div>

 <!-- More initial fake content -->
 <text>
  <h2> Initial Fake Content 1 </h2>
  <h2> Initial Fake Content 2 </h2>
 </text>

 <!-- Button to load more content dynamically. -->
 <button onclick="moreContent()">More Content</button>

</body>
</html>

Specifieke advertentieruimten vernieuwen

U kunt de vernieuwingsfunctionaliteit van de asynchrone Google-uitgeverstag gebruiken om advertenties dynamisch opnieuw te laden zonder de hele content van uw pagina te vernieuwen.

U moet aangeven welke delen van uw voorraad worden vernieuwd om het Google-beleid na te leven en uw voorraad in te schakelen om te concurreren in Ad Exchange.

Als u deze functionaliteit wilt implementeren, moet u een asynchrone GPT-tag genereren en enkele wijzigingen aanbrengen. Deze voorbeeldimplementatie bevat twee advertentieruimten en bijbehorende knoppen om de ruimten te vernieuwen met nieuwe advertenties.

Voorbeeldimplementatie
<html>
<head>
<title>GPT Training - Slot Refresh</title>

<script> 

 // Load GPT asynchronously
 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>

 // GPT slots
 var gptAdSlots = [];

 googletag.cmd.push(function() {

  // Define the first slot
  gptAdSlots[0] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard0').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Define the second slot
  gptAdSlots[1] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard1').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Configure SRA
  googletag.pubads().enableSingleRequest();

  // Start ad fetching
  googletag.enableServices();
 });

 // Button action which refreshes the first slot
 var refreshFirstSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0]]);
   });
 };

 // Button action which refreshes the second slot
 var refreshSecondSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[1]]);
   });
 };

 // Button action which refreshes both slots
 var refreshBothSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
   });
 };

 // Button action which clears all slots
 var clearAllSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().clear();
   });
 };
</script>
</head>

<body>
 <div>
  <h1>GPT Training - Slot Refresh</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> 
  <!-- Refresh the first slot -->
  <button onclick="refreshFirstSlot();">Refresh Top Ad</button>

  <!-- Refresh the second slot -->
  <button onclick="refreshSecondSlot();">Refresh Bottom Ad</button>

  <!-- Refresh both slots -->
  <button onclick="refreshBothSlots();">Refresh Both Ads</button>

  <!-- Clear slots -->
  <button onclick="clearAllSlots();">Clear Ads</button>
 </div>

</body>
</html>

De functie refresh() handmatig testen

Als u de functie refresh() handmatig wilt testen, kunt u tijdelijk een vernieuwingsknop toevoegen aan uw webpagina door het volgende codefragment meteen vóór de tag </body> te plakken. Als u op de knop klikt, worden alle advertentieruimten op de pagina vernieuwd, maar de pagina zelf niet.

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

In de Referentiehandleiding API Google-uitgeverstag vindt u meer informatie over de manier waarop de vernieuwingsfunctie werkt met GPT.

Tags voor responsief ontwerp

U kunt uw pagina voorzien van tags voor responsief ontwerp met GPT. Hieronder vindt u een voorbeeld van de volledige code die u zou kunnen gebruiken om responsief ontwerp te implementeren. Als u de responsieve functionaliteit in het voorbeeld wilt testen, past u het formaat van uw venster aan en vernieuwt u de pagina.

Het formaat van met GPT gemaakte responsieve advertenties in dit voorbeeld wordt niet op dynamische wijze gewijzigd als het formaat van de browser wordt aangepast. U kunt uw eigen aangepaste code toevoegen om de advertentieruimten te vernieuwen bij gewijzigde formaten.

Voorbeeldimplementatie
<html>
<head>
<title>GPT Training - Responsive Test Page</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
    window.googletag = window.googletag || {cmd: []};
</script>
<script>

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

   // Define a size mapping object. The first parameter to addSize is
   // a viewport size, while the second is a list of allowed ad sizes.
   var mapping = googletag.sizeMapping().

   // Small ad
   addSize([100, 100], [88, 31]). 

   // Accepts both common mobile banner formats
   addSize([320, 400], [[320, 50], [300, 50]]). 
		
   // Same width as mapping above, more available height
   addSize([320, 700], [300, 250]).

   // Landscape tablet 
   addSize([750, 200], [728, 90]). 

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

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

   // Start ad fetching
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>GPT Training - Responsive Test Page</h1>

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

<p><span>GPT responsive ads do not resize on change in the size of the browser.
  You can add your own custom code to refresh the ad slots on resize.
  To demonstrate responsive capabilities, re-size your window and refresh the page.</span></p>

</body>
</html>

Meer informatie over het maken van responsieve advertenties.

Tags voor native ads met een vloeiend formaat

GPT kan worden geconfigureerd voor de weergave van een native ad met een aangepast 'vloeiend' formaat. In dat geval is de breedte van de advertentieruimte gelijk aan die van de bovenliggende container en wordt de hoogte aangepast aan de content van het native advertentiemateriaal. Hieronder volgt een voorbeeld van de volledige code die u zou kunnen gebruiken om deze functionaliteit te implementeren.

Voorbeeldimplementatie

Als u het formaat Vloeiend toevoegt aan een bestaande Google-uitgeverstag, moet u ervoor zorgen dat Vloeiend is toegevoegd als aangevraagd formaat. Bijvoorbeeld:

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

<html>
<head>
<title>GPT Training - Native ads and fluid size</title>
<script>
 // Load GPT asynchronously
 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>

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


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

   // Start ad fetching
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>GPT Training - Native Test Page</h1>

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

</body>
</html>

Meer informatie over native ads.

Advertentieverzoeken/-weergave op basis van gebeurtenis

U kunt advertenties aanvragen op basis van gebeurtenissen via Google-uitgeverstags. Zo wilt u misschien een advertentie weergeven wanneer een gebruiker op een knop klikt.

Voorbeeldimplementatie
<html>
  <head>
    <meta charset="utf-8">
    <title>Event-based ad requesting/rendering</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() {
          // This will only register the slot.
          // Ad will be fetched only when refresh is called.
          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>

Lazy loading

Dankzij 'lazy loading' kunnen pagina's sneller worden geladen, worden bronverbruik en conflicten beperkt, en wordt het zichtbaarheidspercentage verbeterd door de aanvraag en weergave van advertenties te onderbreken totdat ze de viewport van de gebruiker benaderen.

Met lazy loading in SRA worden wanneer de eerste advertentieruimte in de viewport wordt weergegeven die is opgegeven met de parameter fetchMarginPercent, die advertentie en alle andere advertentieruimten aangeroepen. Hierdoor ontstaat er een verschil tussen het aantal gedownloade vertoningen en Actieve weergave-vertoningen.

Lazy loading werkt momenteel niet volledig met de methode collapseEmptyDivs().

Voorbeeldimplementatie
<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>
Meer informatie over lazy loading.

Het SafeFrame-containergedrag via GPT beheren

Met GPT heeft u via de methode setSafeFrameConfig nauwkeurige controle over de SafeFrame-container. Deze methode accepteert een JSON-object als invoer en biedt u de mogelijkheid bepaald gedrag van door GPT gemaakte SafeFrame-containers te configureren.

Deze methode is alleen van invloed op het gedrag van advertenties die worden weergegeven in een SafeFrame. De methode bepaalt niet of een advertentie wel of niet wordt weergegeven in een SafeFrame. Dit wordt bepaald door het type advertentiemateriaal en de SafeFrame-instellingen.

We willen de kans op weergave van schadelijk advertentiemateriaal minimaliseren. Daarom raden we u aan SafeFrame waar mogelijk in te schakelen (in combinatie met het html5-kenmerk sandbox) om navigatie op het hoogste niveau te voorkomen. U kunt de parameter setForceSafeFrame in de GPT-API gebruiken om ervoor te zorgen dat advertenties in een bepaalde advertentieruimte altijd worden weergegeven in een SafeFrame.

Met de methode setSafeFrameConfig wordt er een Booleaanse waarde geretourneerd die aangeeft of de configuratie-instellingen zijn geparseerd.

Bijzonderheden van het configuratieobject

Het configuratieobject accepteert een eenvoudig JSON-object dat een overzicht van sleutels en waarden is (geldige waarden worden hieronder beschreven).

Alle andere sleutels worden genegeerd. Als er andere waarden dan true/false (waar/onwaar) worden gevonden, wordt de configuratie afgewezen en wordt er een foutmelding weergegeven.

Sleutelnaam Beschrijving Geldige waarden
allowOverlayExpansion Advertentiemateriaal kan worden uitgevouwen met de modus Overlay in de SafeFrame-API. Het uitgevouwen advertentiemateriaal bedekt de content op de rest van de pagina. true
false
allowPushExpansion Advertentiemateriaal kan worden uitgevouwen met de modus Push in de SafeFrame-API. Het uitgevouwen advertentiemateriaal duwt de content op de rest van de pagina omlaag. true
false
sandbox Maakt een instantie van de SafeFrame-container met het kenmerk sandbox om navigatie op het hoogste niveau te voorkomen. Als u dit kenmerk gebruikt, zorgt u ervoor dat bij klikken op de advertentie de bestemmingspagina op een nieuw tabblad wordt geopend in plaats van dat vanaf de huidige pagina wordt genavigeerd. Zo maximaliseert u de geschiktheid van de advertentie in browsers met verschillende ondersteuning voor sandboxing.
 
Werkt alleen in browsers die het nieuwe html5-kenmerk sandbox voor iframes ondersteunen.

Wanneer deze sleutel wordt ingesteld, worden advertenties die gebruikmaken van plug-ins zoals Flash geblokkeerd en is het mogelijk, met name op desktops, dat in bepaalde browsers geen advertenties of bestemmingspagina's worden weergegeven.
true
Voorbeeldimplementatie
Voorbeeld Beschrijving
googletag.pubads().setSafeFrameConfig({sandbox: true}); Alle advertenties op de pagina die worden weergegeven in SafeFrames, maken gebruik van het kenmerk sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
Alleen 'slot1' wordt weergegeven in een SafeFrame met het kenmerk 'sandbox'. Niet van invloed op andere advertentieruimten.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Advertenties die worden weergegeven in SafeFrames in 'slot1' mogen geen overlay-uitbreiding uitvoeren.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Advertenties die worden weergegeven in SafeFrames in 'slot1' mogen geen overlay-uitbreiding uitvoeren. Stelt ook het kenmerk sandbox in.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Advertenties die worden weergegeven in SafeFrames in 'slot1' mogen geen push-uitbreiding uitvoeren.

Meer informatie over het weergeven van advertentiemateriaal met SafeFrame.

Was dit nuttig?
Hoe kunnen we dit verbeteren?