Para ocultar la creatividad, cree un objeto que responda a la interacción del usuario. Puede configurarla para se oculte cuando un usuario haga clic o pase el ratón por encima. El ejemplo de este artículo le muestra cómo configurarla para que se oculte cuando el usuario haga clic en un botón personalizado.
Crear un objetoCree un objeto en el archivo HTML mediante la etiqueta <div> y, a continuación, asígnele un ID.
Ejemplo de HTML
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Añada el contenido oculto aquí. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Añada el contenido expandido aquí. -->
<div id="collapse-button">CERRAR X</div>
</div>
</div>
</body>
Asigne un estilo al objeto que ha creado en el CSS usando el ID que le ha asignado.
Ejemplo de CSS
#collapse-button {
position: absolute;
width: 75px;
height: 20px;
right: 10px;
top: 10px;
cursor: pointer;
}
Al igual que expandir un anuncio, ocultarlo es un proceso asíncrono que sigue este orden exacto:
- La creatividad solicita la ocultación mediante el método
requestCollapse. - Esta solicitud envía el evento
COLLAPSE_STARTque indica a la creatividad que realice la animación de ocultación, si la hay. - Cuando acaba esta animación, la creatividad solicita finalizar la ocultación con el método
finishCollapse. - Esta solicitud envía el evento
COLLAPSE_FINISH, que indica a la creatividad que ahora puede realizar otras funciones o animaciones en el panel oculto.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Realizar animación de expansión.
// (Opcional) Si desea la dirección para el despliegue en la invocación:
// Enabler.getExpandDirection(); //
// Cuando haya finalizado la animación, debe invocar
Enabler.finishExpand();
}
function expandFinishHandler() {
// Devolución de llamada de conveniencia para definir
// estado final cuando esté desplegado.
isExpanded = true;
}
function collapseStartHandler() {
// Realizar animación de expansión.
// Cuando termine la animación, debe invocar
Enabler.finishCollapse();
}
function collapseFinishHandler() {
// Devolución de llamada de conveniencia para definir
// estado final cuando esté contraído.
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);
}
};