Aggiungere un pulsante di chiusura

Quando la pubblicazione avviene su un browser desktop o per dispositivi mobili, devi aggiungere un pulsante di chiusura per consentire agli utenti di chiudere la creatività e visualizzare i contenuti della pagina sotto l'annuncio.

Aggiungere un pulsante di chiusura in Google Web Designer

1. Crea un pulsante o un altro elemento grafico con la funzione di pulsante di chiusura, collocato ben in vista, che l'utente possa toccare o selezionare. Ad esempio, i pulsanti di chiusura basati su testo riportano in genere la dicitura "Chiudi  X"
2. Trascina il componente "area tocco" dal riquadro dei componenti sullo stage e posizionalo sopra l'elemento pulsante di chiusura.
3. Fai clic sul pulsante del nuovo evento nel riquadro Eventi.
4. Nella finestra di dialogo dell'evento, seleziona le opzioni seguenti:

   Obiettivo	Il componente "area tocco" (gwd-taparea_1)
   Evento	Area tocco > Tocco/Clic
   Azione	Custom (Personalizza) > Aggiungi azione personalizzata

5. Nella finestra Codice personalizzato, assegna un nome alla funzione personalizzata, ad esempio "closead". Incolla quindi il codice riportato di seguito nell'opportuna casella di immissione:
   Enabler.reportManualClose();
Enabler.close();
6. Fai clic su OK.

 

Aggiungere un pulsante di chiusura utilizzando HTML, CSS e JavaScript

1. Crea un elemento pulsante nella creatività utilizzando un tag <div>. Crea l'elemento nel file HTML e applicagli uno stile nel file CCS, A questo punto assegna l'ID close-btn all'elemento.

   Tag <div> di esempio nel file HTML

   <div id="close-btn"></div>

   Stile del selettore ID di esempio nel file CSS

   #close-btn {
     position: absolute;
     width: 20px;
     height: 18px;
     top: 0px;
     left: 278px;
     cursor: pointer;
     z-index:220;
     background-image: url('close.png');
     background-repeat: no-repeat;
   }

2. Aggiungi i metodi reportManualClose e close in modo che JavaScript possa registrare l'evento e chiudere la creatività.

   Codice di esempio per chiudere la creatività e monitorare l'evento

   function closeHandler() {
     Enabler.reportManualClose(); 
     Enabler.close();
   }
   
   document.getElementById('close-btn').addEventListener('click', closeHandler, false);
   

Nascondere il pulsante di chiusura quando la creatività viene pubblicata in un'app

Se la creatività verrà pubblicata in un app per dispositivi mobili, tieni presente che gli SDK degli annunci di app per dispositivi mobili aggiungono automaticamente un proprio pulsante di chiusura alla creatività. Se la tua creatività è già provvista di pulsante di chiusura, essa ne visualizzerà due. Per nascondere il pulsante di chiusura MRAID, utilizza il metodo Enabler setUseCustomClose.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // Nascondi il pulsante di chiusura MRAID e utilizza al suo posto il pulsante di chiusura della creatività.
    Enabler.setUseCustomClose(true);
  }
};