Suche
Suche löschen
Suche schließen
Google-Apps
Hauptmenü

Anleitung zur Erstellung von HTML5-Expanding-Creatives

Creative minimieren

Erstellen Sie zur Minimierung des Creatives ein Objekt, das die Minimierung bei der Interaktion mit dem Nutzer steuert. Sie können eine Minimierung bei Klick oder Mouseover festlegen. Das Beispiel in diesem Artikel zeigt, wie Sie festlegen, dass das Creative minimiert wird, wenn auf eine benutzerdefinierte Schaltfläche geklickt wird.

Objekt erstellen

Erstellen Sie mit dem <div>-Tag ein Objekt in der HTML-Datei und weisen Sie ihm eine ID zu:

Beispiel-HTML

<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
<div id="collapse-button">CLOSE X</div>
</div>
</div>
</body>
Objekt gestalten

Gestalten Sie das erstellte Objekt in der CSS-Datei mithilfe der ihm zugewiesenen ID.

Beispiel-CSS

#collapse-button {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
Minimierungsfunktion hinzufügen

Wie die Maximierung einer Anzeige ist die Minimierung ein asynchroner Vorgang, der exakt in dieser Reihenfolge abläuft:

  1. Die Minimierung wird mit dem Creative über die Methode requestCollapse angefordert.
  2. In dieser Anfrage wird das Ereignis COLLAPSE_START gesendet, um dem Creative mitzuteilen, dass die Minimierungsanimation wiedergegeben werden soll (falls vorhanden).
  3. Wenn die Minimierungsanimation vollständig wiedergegeben wurde, wird mit dem Creative über die Methode finishCollapse eine Anforderung für den Abschluss der Minimierung gesendet.
  4. In dieser Anfrage wird das Ereignis COLLAPSE_FINISH gesendet, um dem Creative mitzuteilen, dass jetzt weitere Funktionen oder Animationen im minimierten Steuerfeld ausgeführt werden können.
Beispiel-JavaScript
<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Maximierungsanimation wiedergeben
  // Optionally, should you want the direction to expand in call:
  // Enabler.getExpandDirection(); //
  // When animation finished must call
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Convenience callback for setting
  // final state when expanded.
  isExpanded = true;
}

function collapseStartHandler() {
  // Minimierungsanimation wiedergeben
  // When animation finished must call
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Convenience callback for setting
  // final state when collapsed.
  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);
  }
};

 

War dieser Artikel hilfreich?
Wie können wir die Seite verbessern?