Dimensioni degli annunci

Ogni area annuncio che definisci deve specificare le dimensioni dell'annuncio idonee alla pubblicazione in quella slot machine. Il modo in cui vengono specificate le dimensioni degli annunci varia in base al tipo di annunci da pubblicare nonché alla dimensione e alla flessibilità delle aree annuncio stesse.

In alcuni casi, la dimensione dell'annuncio potrebbe essere sostituita a livello di elemento pubblicitario in Google Ad Manager. Per informazioni, visita il Centro assistenza altro ancora.

Il codice completo per gli esempi inclusi in questa guida è disponibile nella pagina di esempio.

Annunci con 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à di dimensioni 300x250.

Punto chiave: quando lavori con annunci di dimensioni fisse, ti consigliamo vivamente di definisci le dimensioni dell'elemento <div> dove verrà visualizzata la creatività. Dal giorno le creatività vengono spesso visualizzate in modo asincrono, ma potrebbero causare spostare la pagina se gli viene riservato uno spazio insufficiente.

Annunci a più dimensioni

Se un annuncio supporta più dimensioni, fornisci un elenco di dimensioni supportate quando la definizione dell'area annuncio.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [[300, 250], [728, 90], [750, 200], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

In questo esempio, le creatività con dimensioni 300x250, 728x90 e 750x200 possono essere gestito. Ad Manager considera solo le creatività corrispondenti a queste dimensioni durante il processo di selezione degli annunci.

Se non vengono specificate le dimensioni per l'area annuncio <div> in CSS, GPT imposta automaticamente le dimensioni uguali alla più breve altezza dichiarata e larghezza dichiarata più ampia oltre 1 px quando viene chiamato display(). In questo caso, si tratta di 750x90. Tuttavia, questo dimensionamento può verificarsi dopo vengono caricati altri contenuti della pagina, determinando lo spostamento di tali contenuti. Da evitare variazioni del layout, riserva spazio utilizzando CSS come mostrato guida per ridurre al minimo la variazione del layout.

Quando lavori con annunci a più dimensioni, assicurati che il layout sia abbastanza flessibile da Supporta un annuncio con la dimensione massima specificata. In questo modo le creatività ritagliati inavvertitamente.

Annunci flessibili

Gli annunci flessibili non hanno dimensioni fisse, ma si adattano piuttosto ai contenuti delle creatività display. Gli annunci nativi sono attualmente l'unico annuncio flessibile. supportato da Ad Manager.

Quando utilizzi annunci flessibili, è possibile che venga specificata una dimensione fluid personalizzata.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

In questo esempio, l'area annuncio avrà la stessa larghezza del contenitore principale ridimensionarne l'altezza per adattarlo ai contenuti della creatività. I passaggi per GPT per ridimensionare l'area annuncio sono i seguenti:

  1. È stata ricevuta la risposta dell'annuncio.
  2. I contenuti della creatività sono scritti in un iframe, con l'altezza iniziale impostata su 0px e larghezza impostati su 100%.
  3. Una volta terminato il caricamento di tutte le risorse nell'iframe, la creatività viene visibile impostando l'altezza dell'iframe uguale a quella del Elemento <body> di iframe.
di Gemini Advanced.

Annunci adattabili

Gli annunci adattabili estendono gli annunci a più dimensioni e ti consentono di specificare la dimensione creatività da pubblicare in base alle dimensioni dell'area visibile del browser, in modo da richiesta. Questa funzionalità può essere utilizzata per controllare le dimensioni delle creatività pubblicate a diversi tipi di dispositivi (computer, tablet, dispositivi mobili e così via).

Questo si ottiene definendo una mappatura tra le dimensioni dell'area visibile e quelle dell'annuncio, associando poi la mappatura 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, il mapping specifica:

  • Con l'area visibile >= 1024x768, possono essere pubblicati gli annunci di dimensioni 750x200 o 728x90.
  • Quando 1024x768 > area visibile >= 640x480, possono essere pubblicati annunci con dimensioni pari a 300x250.
  • Quando l'area visibile < 640x480, nessun annuncio può essere pubblicato.

GPT rileverà la dimensione dell'area visibile del browser la richiesta e usare la mappatura più grande adatta. Per determinare la più grande la mappatura del GPT prende in considerazione prima la larghezza, poi l'altezza (ad es. [100, 10] > [10, 100]). In caso di errore nella mappatura o se l'area visibile impossibile determinare la dimensione, verranno utilizzate le dimensioni specificate in defineSlot().

La mappatura viene quindi associata a un'area annuncio richiamando il metodo 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à. La SizeMappingBuilder utilizzato in L'esempio riportato sopra è un modo conveniente per generare un array di questo formato, con le dimensioni ordinate automaticamente dalla più grande alla più piccola. In questo ad esempio, l'output SizeMappingBuilder.build() è:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]