Ajouter un bouton de fermeture

Lorsque vous diffusez une annonce dans un navigateur pour ordinateur de bureau ou pour mobile, vous devez ajouter un bouton permettant aux internautes de fermer la création et de voir le contenu de la page situé sous cette annonce.

Ajouter un bouton de fermeture dans Google Web Designer

1. Créez un bouton ou un autre élément visuel clair de type bouton de fermeture sur lequel l'utilisateur pourra cliquer ou appuyer. Par exemple, les boutons de fermeture textuels utilisent en général le texte "Fermer X".
2. Faites glisser le composant Zone cliquable depuis le panneau des composants vers l'espace de création, puis placez-le au-dessus de l'élément de type bouton de fermeture.
3. Dans le panneau "Événements", cliquez sur le bouton "Nouvel événement".
4. Dans la boîte de dialogue qui s'affiche, sélectionnez les options suivantes :

   Cible	Composant Zone cliquable (gwd-taparea_1)
   Événement	Zone cliquable > Appuyer/Cliquer
   Action	Personnalisé > Ajouter une action personnalisée

5. Dans la fenêtre "Code personnalisé", attribuez un nom à votre fonction personnalisée. Par exemple, "closead". Ensuite, collez le code suivant dans la zone prévue à cet effet.
   Enabler.reportManualClose();
Enabler.close();
6. Cliquez sur OK.

 

Ajouter un bouton de fermeture à l'aide de code HTML, CSS et JavaScript

1. Utilisez un tag <div> pour créer un élément de type bouton dans votre création. Vous devez le créer dans le fichier HTML, puis définir son style dans le fichier CSS. Ensuite, affectez l'ID close-btn à votre élément.

   Exemple de tag <div> dans le fichier HTML

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

   Exemple d'ID et de style dans le fichier 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. Ajoutez les méthodes reportManualClose et close au code JavaScript pour enregistrer l'événement, puis fermer la création.

   Exemple de code pour fermer la création et effectuer le suivi de l'événement

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

Masquer le bouton de fermeture en cas de diffusion de l'annonce au sein d'une application

S'il est prévu que la création soit diffusée au sein d'applications mobiles, sachez que les SDK pour annonces pour applications mobiles ajoutent automatiquement leur propre bouton de fermeture au-dessus de la création. Si votre création comporte déjà un bouton de fermeture, elle en comptera alors deux. La méthode Enabler setUseCustomClose vous permet de masquer le bouton de fermeture MRAID.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // Masquer le bouton de fermeture MRAID et utiliser le bouton de fermeture de la création à la place.
    Enabler.setUseCustomClose(true);
  }
};