Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Guide de création du composant Expanding HTML5

Replier la création

Pour replier une création, créez un objet permettant de contrôler le repli en cas d'interaction d'un internaute. Vous pouvez configurer la création pour qu'elle se replie lors d'un clic ou du passage du curseur. L'exemple présenté dans cet article vous montre comment procéder pour qu'elle se replie lorsqu'un internaute clique sur un bouton personnalisé.

Créer un objet

Créez un objet dans le fichier HTML en utilisant le tag <div>, puis attribuez-lui un ID.

Exemple de fichier HTML

<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Ajouter le contenu replié ici. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Ajouter le contenu déplié ici. -->
<div id="collapse-button">FERMER X</div>
</div>
</div>
</body>
Appliquer un style à l'objet

Appliquez un style à l'objet que vous avez créé dans le fichier CSS en utilisant l'ID que vous lui avez attribué.

Exemple de fichier CSS

#collapse-button {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
Ajouter la fonctionnalité de repli

Tout comme l'expansion, le repli d'une annonce est un processus asynchrone qui se déroule exactement dans l'ordre suivant :

  1. Une demande de repli est soumise concernant la création à l'aide de la méthode requestCollapse.
  2. L'événement COLLAPSE_START, qui permet de demander l'animation de repli (s'il en existe une), est envoyé.
  3. Une fois que l'animation de repli est terminée, une demande d'achèvement du repli est envoyée à l'aide de la méthode finishCollapse.
  4. L'événement COLLAPSE_FINISH, qui permet de demander l'exécution de fonctionnalités ou d'animations supplémentaires dans le panneau replié, est envoyé.
Exemple de fichier JavaScript
<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Permet d'exécuter l'animation d'expansion.
  // Vous pouvez indiquer la direction d'expansion dans l'appel :
  // Enabler.getExpandDirection(); //
  // À la fin de l'animation, vous devez appeler
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Rappel permettant de définir
  // l'état final une fois l'expansion terminée.
  isExpanded = true;
}

function collapseStartHandler() {
  // Permet d'exécuter l'animation de repli.
  // À la fin de l'animation, vous devez appeler
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Rappel permettant de définir
  // l'état final une fois le repli terminé.
  isExpanded = false;
}

function actionClickHandler() {
  isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();
}

Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_START,
  expandStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_FINISH,
  expandFinishHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_START,
  collapseStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_FINISH,
  collapseFinishHandler);
actionBtn.addEventListener(
  'click',
  actionClickHandler,
  false);
</script>
</head>

 

Hide the close button when the creative is served in an app

If the creative will serve in mobile apps, note that mobile app ad SDKs automatically add their own close button over the creative. If you already have a close button in your creative, the creative will have two close buttons. To hide the MRAID close button, use the Enabler method setUseCustomClose.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // Hide the MRAID close button and use the creative's close button instead.
    Enabler.setUseCustomClose(true);
  }
};

 

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?