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. Utilizza il Programma per la creazione di tag di Google per generare il tag automaticamente.
Gli sviluppatori e coloro che hanno bisogno di implementazioni avanzate di GPT possono consultare il riferimento API e le implementazioni di esempio (come il caricamento lento).
Visualizzare esempi avanzati di GPT
Codice di esempio del Tag publisher di Google
Esistono due sezioni di codice implementate per i tag GPT:
- La configurazione del tag GPT va nella sezione
<head>della pagina web. - Le chiamate per ogni area annuncio specifica vengono inserite nella sezione pertinente di
<body>.
Questo esempio è a scopo informativo. Consigliamo di chiedere a uno sviluppatore di implementare il codice sul tuo sito web.
Configurazione GPT
Il seguente esempio di codice include la chiamata alla libreria JavaScript GPT, la definizione delle aree annuncio, il targeting per coppia chiave-valore e altro ancora.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Righe da 3 a 6: 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. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Riga 9: "/1234/travel/asia" consente di specificare il codice di rete (
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Righe 11, 14 e 15: consentono di impostare il targeting per coppia chiave-valore a livello di area con Scopri di più sull'impostazione di targeting e dimensioni con GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Riga 16: 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: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Riga 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Riga 23 (facoltativa): 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à. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Righe 8, 25 e 32: vengono aggiunte chiamate di funzionalità alla coda di comando affinché venga elaborata in modo asincrono quando viene caricata la pagina. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Righe 9, 12, 23, 26, 30 e 33: Qui vengono utilizzati numeri casuali, ma non è il metodo con cui il tag publisher di Google identifica in modo univoco una richiesta di annuncio. Questa operazione 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. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Visualizzare esempi avanzati di GPT
Istruzioni per le situazioni in cui non è possibile modificare l'intestazione delle pagine web
Puoi utilizzare GPT senza modificare il tag <header> del tuo sito web.
Opzione 1: GPT in linea
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.
Poiché il tag annuncio utilizza la libreria JavaScript GPT, devi includere il codice per il caricamento della libreria prima di inserire il codice del tag annuncio.
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>
Esempio di tag annuncio 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>
Opzione 2: inserisci tutto il codice nel corpo della pagina web
Usa 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.
Creare una Richiesta senza tag senza JavaScript
È possibile utilizzare una Richiesta senza tag al posto di un tag annuncio per richiedere il codice creatività non elaborato trasferito in Ad Manager. Le richieste senza tag vengono utilizzate di norma quando sono necessarie l'analisi e la visualizzazione personalizzate, come per i decoder o altri ambienti che non supportano l'SDK o il tagging di Google.
