Esempi avanzati di tag publisher di Google

Questo articolo fornisce esempi avanzati del tag publisher di Google per le implementazioni su dispositivi desktop e mobili.

Trova ulteriori informazioni utilizzando la Guida di riferimento API del tag publisher di Google. Puoi trovare informazioni sull'implementazione di base del tag publisher di Google anche consultando l'articolo Esempi di tag publisher di Google.

Tieni presente che gli esempi illustrati utilizzano configurazioni di test per il targeting, la rete e l'area annuncio. Pertanto, la tua implementazione dovrà essere personalizzata in base alla rete e alla configurazione utilizzate.

Non utilizzare o manipolare oggetti creati da GPT (inclusi gli elementi sottoposti a rendering GPT) in modo diverso da quanto indicato nella documentazione dell'API GPT.

Le strutture interne dei tag GPT vengono modificate di frequente e le proprietà non indicate nella documentazione possono essere rimosse senza preavviso. Se il tuo codice si affida a queste strutture interne, il codice potrebbe smettere di funzionare in qualsiasi momento.

Codificare le pagine con contenuti infiniti

Puoi generare dinamicamente nuovi contenuti degli annunci utilizzando il tag publisher di Google.

I roadblock e le esclusioni di categoria vengono rispettati solo per gli annunci pubblicati dalla stessa richiesta SRA. L'inclusione di più chiamate SRA nel caricamento di una singola pagina può portare alla visualizzazione di annunci concorrenti nella stessa pagina.

Qui di seguito è riportato un esempio del codice completo che dovresti utilizzare per implementare i tag nelle pagine dai contenuti illimitati. L'esempio propone un pulsante sul margine inferiore della pagina per la generazione dinamica di nuovi contenuti.

Esempio di implementazione
<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>

Aggiornare aree annuncio specifiche

Puoi utilizzare la funzionalità di aggiornamento del tag publisher di Google asincrono per ricaricare gli annunci in modo dinamico senza dover aggiornare tutti i contenuti della pagina.

Per rispettare le norme di Google e consentire la concorrenza dell'inventario in Ad Exchange, devi dichiarare quali parti dell'inventario si aggiornano.

Per implementare questa funzionalità, devi generare un tag GPT asincrono e apportare alcune modifiche. L'implementazione di esempio riportata sotto propone due aree annuncio e i rispettivi pulsanti per aggiornarle con nuovi annunci.

Esempio di implementazione
<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>

Testare manualmente la funzionalità refresh()

Per testare manualmente il funzionamento della funzione refresh(), puoi aggiungere temporaneamente un pulsante di aggiornamento alla pagina web incollando il seguente snippet di codice immediatamente prima del tag </body>. Quando fai clic su pulsante, tutte le aree annuncio della pagina vengono aggiornate ma non la pagina stessa.

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

Leggi ulteriori informazioni sul comportamento della funzione di aggiornamento nel tag publisher di Google nella Guida di riferimento API del tag publisher di Google.

Applicare tag per il responsive design

Con GPT puoi inserire nella pagina tag per il responsive design. Di seguito viene riportato il codice completo da utilizzare per implementare il responsive design. Per eseguire il test della funzionalità responsive illustrata nell'esempio, ridimensiona la finestra e aggiorna la pagina.

Modificando le dimensioni del browser, gli annunci reattivi di GPT riportati nell'esempio non subiscono alcun ridimensionamento. Puoi aggiungere il tuo codice personalizzato per aggiornare le aree annuncio in fase di ridimensionamento.

Esempio di implementazione
<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>

Per ulteriori informazioni, consulta l'articolo Sviluppo di annunci reattivi.

Codifica per annunci nativi con dimensioni flessibili

GPT può essere configurato in modo da mostrare un annuncio nativo con dimensioni "flessibili" personalizzate. In questo caso, l'area annuncio avrà la stessa larghezza del contenitore principale e ridimensionerà l'altezza per adattarsi ai contenuti nativi della creatività. Sotto è riportato un esempio del codice completo che verrebbe utilizzato per implementare questa funzionalità.

Esempio di implementazione

Se aggiungi la dimensione "Flessibili" a un tag publisher di Google esistente, verifica che venga aggiunta "fluid" come dimensione obbligatoria. Ad esempio:

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

Ulteriori informazioni sugli annunci nativi.

Richiesta/visualizzazione di annunci basati su eventi

Puoi richiedere annunci basati su eventi utilizzando i tag publisher di Google. Ad esempio, potresti voler pubblicare un annuncio quando un utente fa clic su un pulsante.

Esempio di implementazione
<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>

Caricamento lento

Il caricamento lento velocizza il caricamento delle pagine, riduce il consumo di risorse e la concorrenza, nonché migliora il tasso di visibilità mettendo in pausa le richieste e la visualizzazione di annunci finché si avvicinano all'area visibile dell'utente.

Con il caricamento lento in SRA, quando la prima area annuncio arriva all'interno dell'area visibile specificata dal parametro fetchMarginPercent, viene fatta la chiamata per tale annuncio e per tutte le altre aree annuncio. Ci sarà una discrepanza tra il numero di impressioni scaricate e le impressioni di Visualizzazione attiva.

Il caricamento lento non è completamente compatibile con il metodo collapseEmptyDivs().

Esempio di implementazione
<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>
Ulteriori informazioni sul caricamento lento.

Controllare il comportamento del contenitore SafeFrame tramite GPT

GPT offre un controllo preciso del contenitore SafeFrame tramite il metodo setSafeFrameConfig. Questo metodo, partendo da un oggetto JSON, consente di configurare determinati comportamenti dei contenitori SafeFrame creati da GPT.

Questo metodo influisce solo sul comportamento degli annunci visualizzati in un SafeFrame. Non controlla se un annuncio viene visualizzato in un SafeFrame, evento determinato dal tipo di creatività e dalle impostazioni del SafeFrame.

Per ridurre al minimo le possibilità di pubblicare creatività dannose, ti consigliamo di abilitare SafeFrame quando possibile, insieme all'attributo sandbox HTML5 per impedire la navigazione di livello superiore. Puoi anche utilizzare il parametro setForceSafeFrame nell'API GPT per fare in modo che gli annunci in un'area specifica vengano sempre mostrati in un SafeFrame.
  • A livello di pagina, questo metodo influisce sul comportamento di tutte le aree in quella pagina.
  • A livello di area, questo metodo esegue l'override delle impostazioni a livello di pagina.

Il metodo setSafeFrameConfig restituisce un valore booleano che indica se le impostazioni di configurazione sono state analizzate correttamente.

Dettagli sull'oggetto di configurazione

L'oggetto di configurazione parte da un oggetto JSON semplice, che è una mappa di chiavi e valori (i valori validi sono illustrati sotto).

Eventuali altre chiavi vengono ignorate. Se vengono rilevati valori diversi da true/false, la configurazione viene rifiutata e viene segnalato un errore.

Nome chiave Descrizione Valori validi
allowOverlayExpansion La creatività può espandersi utilizzando la modalità Overlay nell'API SafeFrame. La creatività espansa copre i restanti contenuti della pagina. true
false
allowPushExpansion La creatività può espandersi utilizzando la modalità Push nell'API SafeFrame. La creatività espansa sposta verso il basso i contenuti restanti della pagina. true
false
sandbox Crea un'istanza per il contenitore SafeFrame con l'attributo sandbox impostato per impedire la navigazione di livello superiore. Se utilizzi questo attributo, assicurati che i clic sugli annunci aprano la pagina di destinazione in una nuova scheda, anziché navigare dalla pagina corrente. Ciò consente di massimizzare la compatibilità dell'annuncio nei vari browser con un supporto diverso per il sandboxing.
 
Funziona solo nei browser che supportano il nuovo attributo sandbox HTML5 su iframe.

L'impostazione di questa chiave blocca gli annunci che utilizzano plug-in quali Flash e potrebbe dividere gli annunci o le pagine di destinazione in determinati browser, in particolare su dispositivi desktop.
true
Esempio di implementazione
Esempio Descrizione
googletag.pubads().setSafeFrameConfig({sandbox: true}); Tutti gli annunci sulla pagina visualizzati all'interno di SafeFrame utilizzano l'attributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
Solo slot1 viene visualizzato all'interno del SafeFrame con l'attributo sandbox. Le altre aree annuncio non sono interessate.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Agli annunci visualizzati in slot1 nel SafeFrame non è consentito eseguire l'espansione in overlay.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Agli annunci visualizzati in slot1 nel SafeFrame non è consentito eseguire l'espansione in overlay. Viene anche impostato l'attributo sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Agli annunci visualizzati in slot1 nel SafeFrame non è consentito eseguire l'espansione push.

Scopri ulteriori informazioni sulla visualizzazione delle creatività tramite SafeFrame.

È stato utile?
Come possiamo migliorare l'articolo?