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 objetCré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>
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;
}
Tout comme l'expansion, le repli d'une annonce est un processus asynchrone qui se déroule exactement dans l'ordre suivant :
- Une demande de repli est soumise concernant la création à l'aide de la méthode
requestCollapse. - L'événement
COLLAPSE_START, qui permet de demander l'animation de repli (s'il en existe une), est envoyé. - 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. - 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é.
<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);
}
};