Per ogni area annuncio che definisci devi specificare le dimensioni degli annunci idonee alla pubblicazione in quell'area. Il modo in cui vengono specificate le dimensioni degli annunci varia a seconda del tipo di annunci da visualizzare, nonché delle dimensioni e della flessibilità delle aree annuncio stesse.
In alcuni casi, le dimensioni dell'annuncio possono essere sostituite a livello di elemento pubblicitario in Google Ad Manager. Per saperne di più, visita il Centro assistenza.
Il codice completo per gli esempi inclusi in questa guida è disponibile nella pagina di esempio relativa alle dimensioni degli annunci.
Annunci a dimensioni fisse
Puoi definire un'area annuncio con una singola dimensione fissa.
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
.addService(googletag.pubads());
In questo esempio, verranno pubblicate solo le creatività con dimensione 300x250.
Punto chiave: quando lavori con annunci con dimensioni fisse, ti consigliamo vivamente di
definire le dimensioni dell'elemento <div> in cui verrà visualizzata la creatività. Poiché le creatività vengono spesso visualizzate in modo asincrono, potrebbero causare lo spostamento di altri elementi della pagina se non viene riservato uno spazio sufficiente.
Annunci a più dimensioni
Se un annuncio supporta più dimensioni, fornisci un elenco di quelle supportate quando definisci l'area annuncio.
googletag
.defineSlot(
"/6355419/Travel/Europe",
[
[300, 250],
[728, 90],
[750, 200],
],
"multi-size-ad",
)
.addService(googletag.pubads());
In questo esempio, possono essere pubblicate creatività con le dimensioni 300x250, 728x90 e 750x200. Durante il processo di selezione degli annunci Ad Manager prende in considerazione solo le creatività corrispondenti a queste dimensioni.
Se le dimensioni non vengono specificate per l'area annuncio <div> in CSS, GPT imposta automaticamente le dimensioni pari all'altezza dichiarata più corta e alla larghezza dichiarata più ampia (oltre 1 px) quando viene chiamato display().
In questo caso, sarebbe 750x90. Tuttavia, queste dimensioni potrebbero verificarsi dopo il caricamento degli altri contenuti sulla pagina, determinando una variazione dei contenuti. Per evitare variazioni del layout, prenota lo spazio utilizzando CSS, come mostrato nella guida Ridurre al minimo la variazione del layout.
Quando lavori con annunci a più dimensioni, assicurati che il layout sia sufficientemente flessibile da supportare un annuncio con la dimensione più grande specificata. In questo modo eviterai che le creatività vengano ritagliate inavvertitamente.
Annunci flessibili
Gli annunci flessibili non hanno dimensioni fisse, ma si adattano ai contenuti delle creatività visualizzati. Gli annunci nativi sono attualmente l'unico tipo di annuncio flessibile supportato da Ad Manager.
Quando lavori con annunci flessibili, potresti specificare una dimensione fluid personalizzata.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
In questo esempio, l'area annuncio avrà la larghezza del contenitore principale e verrà ridimensionata per adattarsi ai contenuti della creatività. I passaggi compiuti da GPT per ridimensionare l'area annuncio sono i seguenti:
- È stata ricevuta una risposta di annuncio.
- I contenuti della creatività sono scritti in un iframe, con l'altezza iniziale impostata su
0pxe la larghezza impostata su100%. - Al termine del caricamento di tutte le risorse nell'iframe, la creatività viene resa visibile impostando l'altezza dell'iframe uguale a quella dell'elemento
<body>dell'iframe.
Annunci adattabili
Gli annunci adattabili estendono gli annunci a più dimensioni e ti consentono di specificare le dimensioni delle creatività da pubblicare in base alle dimensioni dell'area visibile del browser che effettua la richiesta. Questa funzionalità può essere utilizzata per controllare le dimensioni delle creatività pubblicate su diversi tipi di dispositivi (computer, tablet, dispositivi mobili e così via).
A questo scopo, definisci una mappatura tra le dimensioni dell'area visibile e quelle dell'annuncio e associala a un'area annuncio.
const responsiveAdSlot = googletag
.defineSlot(
"/6355419/Travel/Europe",
[
[300, 250],
[728, 90],
[750, 200],
],
"responsive-ad",
)
.addService(googletag.pubads());
const mapping = googletag
.sizeMapping()
.addSize(
[1024, 768],
[
[750, 200],
[728, 90],
],
)
.addSize([640, 480], [300, 250])
.addSize([0, 0], [])
.build();
responsiveAdSlot.defineSizeMapping(mapping);
In questo esempio, la mappatura specifica:
- Se l'area visibile è >=
1024x768, possono essere pubblicati annunci con dimensioni pari a750x200o728x90. - Quando
1024x768> area visibile >=640x480, possono essere pubblicati gli annunci con le dimensioni300x250. - Se l'area visibile è <
640x480, non è possibile pubblicare annunci.
GPT rileverà le dimensioni dell'area visibile del browser che effettua la richiesta e utilizzerà la mappatura più grande adatta. Per determinare la mappatura più grande, GPT considera prima la larghezza, poi l'altezza (ad es. [100,
10] > [10, 100]). In caso di errore nella mappatura o se non è possibile determinare le dimensioni dell'area visibile, verranno utilizzate le dimensioni specificate in defineSlot().
Il mapping viene quindi associato a un'area annuncio chiamando il metodo Slot.defineSizeMapping(). Questo metodo accetta un array di mappature nel seguente formato:
[
[
[viewport-width-1, viewport-height-1],
[[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
],
[
[viewport-width-2, viewport-height-2],
[[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
],
...
]
L'ordine delle dimensioni dell'area visibile all'interno di questo array ne definisce la priorità. L'elemento SizeMappingBuilder utilizzato nell'esempio precedente è un modo conveniente per generare un array di questo formato, con le dimensioni ordinate automaticamente dalla più grande alla più piccola. In questo
esempio, l'output di
SizeMappingBuilder.build() è:
[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
[[0, 0], []]
]