Introduzione ai tag publisher di Google

Esempio di tag publisher di Google

Il seguente è un esempio del codice completo per la creazione di un tag publisher di Google (GPT) per le implementazioni su dispositivi desktop e mobili. Leggi ulteriori informazioni su come utilizzare il generatore di tag di Google per creare automaticamente tag GPT.

L'articolo include anche le istruzioni riguardanti i problemi di modifica del titolo di pagine web e la creazione di un pixel di monitoraggio 1 x 1 senza utilizzare JavaScript.

Ottimizzare la velocità dei GPT aggiornando il dominio della libreria ospitata

La library dei tag publisher di Google è ora ospitata alla pagina https://securepubads.g.doubleclick.net/tag/js/gpt.js, oltre ad essere ospitata nel dominio googletagservices.com. Anche se non è obbligatorio, ti consigliamo vivamente di aggiornare al formato GPT tutti i riferimenti sulle tue pagine web per poter utilizzare questo nuovo dominio.

Questa modifica consolida tutte le richieste di pubblicazione di annunci in un unico dominio, anziché due. In questo modo il browser dovrà connettersi a un solo dominio. La libreria è esattamente la stessa in entrambi i domini.

Ne consegue un miglioramento della velocità dei tag e un recupero degli annunci leggermente più rapido.

Esempio di tag publisher di Google

Visualizzare il codice senza suggerimenti
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>
8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
16       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male"
21       .setTargeting("age", "20-30");
22     googletag.pubads().setTargeting("topic","basketball");
23     googletag.pubads().enableSingleRequest();
24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {
39          googletag.display("div-gpt-ad-123456789-1");
40       });
41     </script>
42   </div>
43 </body>
44 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>

Righe da 3 a 7: testo boilerplate che carica in modo asincrono la libreria GPT utilizzata da Ad Manager mediante SSL/HTTPS. È qui che viene sviluppata la coda di comando per la gestione asincrona dell'elenco delle funzioni (in genere, chiamate degli annunci). Non è necessario modificare questa sezione del codice.

8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>

Righe da 8 a 12: consentono di impostare gli attributi a livello di pagina per le aree annuncio che pubblicano AdSense. La modifica di questi attributi sostituisce gli eventuali stili impostati in Ad Manager o AdSense. Questa funzionalità non è molto utilizzata perché puoi impostarla in Ad Manager. Consulta la documentazione per gli sviluppatori della funzionalità .set() per avere informazioni su come impostare i parametri AdSense in GPT.

13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

Riga 15: "/1234/travel/asia" consente di specificare il codice di rete (1234) e l'unità pubblicitaria scelta come target (travel/asia). Puoi trovare il codice di rete in Ad Manager nella sezione Amministratore e poi Impostazioni globali e poi Codice di rete.

[728, 90] consente di impostare le dimensioni della creatività dell'area annuncio. Specifica più dimensioni utilizzando la sintassi: [[width1, height1], [width2, height2], [width3, height3]]. Associa tutte le dimensioni qui specificate all'unità pubblicitaria scelta come target. In questo modo puoi restringere l'elenco in base all'area annuncio specifica. Quando utilizzi aree annuncio di diverse dimensioni, indica le dimensioni nello stesso ordine in cui vengono visualizzate in Ad Manager. Ulteriori informazioni sulla definizione e sequenzialità delle aree annuncio.

16       .addService(googletag.pubads())
16       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male"
21       .setTargeting("age", "20-30");

Righe 17, 20 e 21: consentono di impostare il targeting per chiave-valore a livello di area con la funzione .setTargeting(). Puoi associare più valori a una singola chiave, come nel primo esempio: ("key", ["value1", "value2", "value3"]). Per scegliere come target più chiavi, richiama più volte la funzionalità come illustrato nel secondo caso: (gender=male e age=20-30).

Nella documentazione per gli sviluppatori della funzionalità .setTargeting() viene spiegato come impostare i parametri chiave-valore in GPT. Ulteriori informazioni sull'impostazione di targeting e dimensioni con GPT

22     googletag.pubads().setTargeting("topic","basketball");

Riga 22: googletag.pubads().setTargeting("topic","basketball"); consente di impostare il targeting per chiave-valore a livello di pagina. Se il targeting viene configurato utilizzando attributi chiave-valore a livello di pagina, tale targeting viene ereditato da tutte le aree annuncio. Come per i parametri chiave-valore a livello di area, puoi associare più valori a una singola chiave: ("key", ["value1", "value2", "value3"]).

23     googletag.pubads().enableSingleRequest();

Riga 23: googletag.pubads().enableSingleRequest(); consente di attivare SRA (Single Request Architecture). Includi questa riga per eseguire un'unica chiamata a tutte le aree annuncio nella pagina (consente i roadblock garantiti e può incrementare il rendimento della pagina).

24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Riga 29 (facoltativa): style="width: 728px; height: 90px" indica le dimensioni assunte dall'elemento prima che la creatività venga visualizzata. Se utilizzi tag di più dimensioni è consigliabile omettere questo parametro (in questo caso, le dimensioni assunte dall'elemento saranno quelle della creatività selezionata una volta visualizzata). In caso contrario, imposta entrambe le dimensioni in modo che possano contenere la creatività idonea di dimensioni più grandi. Usa questo parametro per i tag annuncio di un'unica dimensione per espandere l'elemento contenitore fino al caricamento della creatività, in modo tale che gli altri elementi della pagina non vengano spostati durante la visualizzazione della creatività.

30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

Righe 9, 14, 31, 38: vengono aggiunte chiamate di funzionalità alla coda di comando affinché venga elaborata in modo asincrono quando viene caricata la pagina.

39          googletag.display("div-gpt-ad-123456789-1");

Righe 15, 18, 29, 32, 36 e 39: "div-gpt-ad-123456789-0" rappresenta il metodo con cui vengono abbinate le aree annuncio definite nell'elemento head alle aree annuncio nella pagina (i tag div nell'elemento body dove vengono pubblicate le creatività). Puoi assegnare loro qualsiasi nome, purché conservino la corrispondenza, tuttavia il nostro generatore di tag utilizza la convenzione di denominazione "div-gpt-ad-[numero casuale]-0", "div-gpt-ad-[numero casuale]-1" e così via. Utilizza lo stesso ID <div> in modo coerente per una data posizione in una pagina, dal momento che viene utilizzato per l'ottimizzazione in un ampio numero di aree.

Qui vengono utilizzati numeri casuali, ma non è il metodo con cui il tag publisher di Google identifica in modo univoco una richiesta di annuncio, operazione che viene eseguita dietro le quinte mediante la libreria GPT. Inoltre, questi nomi possono essere invariati da una pagina all'altra finché non subentrano più istanze dello stesso nome div nella stessa pagina.

Per ulteriori informazioni sulla struttura degli inventari in Ad Manager, sulla gerarchia delle unità pubblicitarie e su come le unità pubblicitarie ereditano il targeting, consulta l'articolo Panoramica dell'inventario.

40       });
41     </script>
42   </div>
43 </body>
44 </html>

Istruzioni per le situazioni in cui non è possibile modificare l'intestazione delle pagine web

Puoi utilizzare GPT senza modificare l'intestazione delle pagine web.

Opzione 1. Usa un tag in linea, anziché l'intestazione della pagina, per definire la posizione in cui visualizzare l'unità pubblicitaria nella pagina. All'interno di un tag in linea, l'intera richiesta e definizione dell'area annuncio in GPT, incluso il caricamento della libreria GPT, è contenuta in un tag <script> singolo. Di seguito sono riportati alcuni esempi di definizione di un'area annuncio in linea.

Poiché il tag annuncio utilizza la libreria JavaScript GPT, devi includere il codice per il caricamento di quest'ultima prima del codice del tag annuncio (come mostrato negli esempi che seguono).

Esempio di GPT in linea asincrono

Questi esempi di GPT in linea non supportano SRA.

Chiamata alla libreria JavaScript GPT

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

Tag annuncio di esempio 1: tag in linea

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

Tag annuncio di esempio 2: tag in linea ridotto (questo metodo non supporta il targeting a livello di area annuncio)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>

Opzione 2. Utilizza l'implementazione convenzionale del tag publisher di Google, ma inserisci le definizioni delle aree annuncio nel corpo del codice HTML, anziché nell'intestazione. Il codice che carica la libreria e definisce le aree annuncio deve essere chiamato prima di richiedere annunci per tali aree annuncio. Il codice non è segmentato nell'intestazione e nel corpo della pagina, pertanto dovrai gestire la sequenza di codice. Questo approccio è più complesso, ma ti dà la flessibilità di SRA.

Usare un tag GPT non JavaScript per creare un pixel di monitoraggio 1 x 1

Per creare un tracker di impressioni con GPT, procedi come riportato di seguito:

  1. Crea una nuova unità pubblicitaria o selezionane una esistente con cui monitorare il numero di impressioni.

  2. Crea un elemento pubblicitario di dimensioni 1 x 1, aggiungendovi una creatività immagine con pixel trasparente.

  3. Indirizza l'elemento pubblicitario 1 x 1 all'unità pubblicitaria creata nel passaggio 1.

  4. Crea un tag GPT non JavaScript chiamando il pixel di impressione e specificando l'unità pubblicitaria creata nel passaggio 1. Ad esempio:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Scopri come creare URL non basati su JavaScript

  5. Utilizza il tag di pixel dell'impressione in uno dei due modi illustrati di seguito:

    • Aggiungi il tag a una creatività personalizzata o di terze parti da pubblicare nella pagina. Nella pagina "Impostazioni" della creatività, aggiungi il tag nella parte superiore della casella "Snippet di codice".

    • Aggiungi il tag direttamente alla pagina web.

È stato utile?
Come possiamo migliorare l'articolo?