Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale

Banner HTML5 con floating

Una creatività banner con floating utilizza sia una creatività banner sia una creatività interstitial, il tutto in un unico formato annuncio di Studio.

Questo formato combinato ti consente di pubblicare due creatività su una stessa pagina contemporaneamente. Poiché vengono caricate insieme in DoubleClick Studio, ci si riferisce alle singole creatività come companion. Quando queste due companion vengono pubblicate insieme, puoi aprire e chiudere la creatività floating direttamente dalla creatività banner.

Scopri come funziona:

 Impostare i file

  1. Crea due file .HTML, uno per la creatività banner e uno per la creatività floating.
  2. Includi l'Enabler in ciascun file.
    • Se utilizzi Google Web Designer, l'Enabler viene aggiunto automaticamente quando selezioni l'ambiente "DoubleClick", quindi puoi ignorare questo passaggio.
    • Se utilizzi uno strumento di sviluppo diverso, includi il seguente script:
      <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Aggiungere le funzioni per aprire e chiudere la companion floating

Quando pubblichi una creatività floating e una banner contemporaneamente, quest'ultima può fungere da ancoraggio per la companion floating, consentendo allo spettatore di riaprire la creatività floating o di chiuderla. Scopri come aggiungere queste funzioni alla tua creatività banner consultando quanto segue.

displayCompanion
  1. Aggiungi un pulsante alla creatività banner per aprire la companion floating.
  2. Aggiungi un gestore di eventi clic che apra la companion floating quando si fa clic sul pulsante di apertura. Ad esempio, se il pulsante si chiama openButton:
    function openButtonClickHandler(event) {
    
      // Record a custom counter each time the floating creative is opened.
      Enabler.counter("Show Floating");
              
      // Open the floating creative.
      Enabler.displayCompanion();
    };
    
    document.getElementById('openButton').addEventListener('click', openButtonClickHandler, false);
closeCompanion
  1. Aggiungi un pulsante alla creatività banner per chiudere la companion floating.
  2. Aggiungi un gestore di eventi clic che chiuda la companion floating quando si fa clic sul pulsante di chiusura. Ad esempio, se il pulsante si chiama closeButton:
    function closeButtonClickHandler(event) {
    
      // Record a manual close each time the floating creative is closed.
      Enabler.reportManualClose();
              
      // Close the floating creative.
      Enabler.closeCompanion();
    };
    
    document.getElementById('closeButton').addEventListener('click', closeButtonClickHandler, false);

Caricare e visualizzare l'anteprima

Quando hai finito di sviluppare le due creatività, caricale in Studio, quindi visualizzane un'anteprima e verificane il funzionamento combinato.

  1. Aggiungi una nuova creatività in Studio e seleziona il formato Banner con floating.
  2. Carica i file HTML insieme a eventuali file multimediali o immagini. Entrambi i file HTML devono assumere lo stato di Principale. In caso contrario, assicurati che i file includano l'Enabler (vedi la sezione precedente Impostare i file).
  3. Esamina gli eventi creatività e aggiungi URL di uscita nel passaggio Modifica eventi.
  4. Visualizza l'anteprima della creatività nel passaggio Anteprima

Proprietà di visualizzazione

Per impostazione predefinita, non appena viene caricata la pagina del publisher al suo centro appare la companion floating. Puoi modificare queste impostazioni nel passaggio Creatività > Anteprima di Studio.

Per modificare, fai clic su Mostra dettagli, quindi espandi il riquadro Proprietà di visualizzazione.

Interstitial

The settings in the Floating section set display properties for the Floating creative.

Filename: The filename of the Floating creative. Studio detects the ad types of the two companion creatives automatically. If the wrong creative name is selected, use the drop-down to select the correct creative name to use as the Floating creative.

Width: The width of the creative in pixels.

Height: The height of the creative in pixels.

Alignment: Where to display the Floating creative over the visible area of the publisher's page in the browser. Use positioning to further customize placement.

Transparency: Whether the publisher's page is visible through transparent portions of the creative. By default, Floating creatives are transparent. Uncheck to disable.

Z-index: The stack order of an element when displayed on the publisher's page. By default, all creatives are set to 1000000 to make sure they're displayed on top of other content. Check with your publisher in case you need to adjust z-index to layer correctly with other site controls.

Display start: When to display the creative. By default, Floating creatives are displayed immediately after the publisher page loads. You can also add a delay or not load the Floating creative until a button is clicked in the Banner creative.

  • Custom: Select this option to load immediately (at 0 seconds). Adjust the time to add a delay before the Floating creative loads. This delay is only applied when the Floating creative first displays, not when the displayCompanion function is used.
  • None: When you select None, the Floating creative will not be displayed until the displayCompanion function is called.

Display duration: The amount of time the Floating creative is displayed. By default, Floating creatives are displayed until the close button is clicked.

  • Custom: Set a specific amount of time to display the creative before automatically closing it.
  • Unlimited: The creative doesn't close until the close button is clicked.

Positioning: Fine-tune the position of the Floating creative over the visible area of the publisher's page in the browser.

  • Top: The number of pixels to offset the creative from the top of the browser viewport.
  • Left: The number of pixels to offset the creative from the left of the browser viewport.

When you're done, click Save to save your changes and reload the creative preview.

 

Banner

Nella maggior parte dei casi, le proprietà di visualizzazione predefinite per la creatività banner non richiedono accorgimenti.

Nome file. Il nome del file della creatività banner. Studio identifica i tipi di annuncio delle due creatività companion automaticamente. Se viene selezionato il nome della creatività sbagliata, utilizza il menu a discesa per selezionare il nome corretto da utilizzare come creatività banner.

Trasparenza. Determina se la pagina del publisher sia visibile attraverso parti trasparenti della creatività. Per impostazione predefinita, le creatività banner non sono trasparenti. Consulta il publisher prima di attivare la trasparenza per una creatività banner.



Hai trovato utile questo articolo?