HTML5 expanding build guide

Zwijanie kreacji

Dalej: Konfigurowanie reklamy rozwijanej wielokierunkowo

Aby zwinąć kreację, utwórz obiekt, który będzie sterował jej zwijaniem po interakcji użytkownika. Zwinięcie może następować po kliknięciu lub najechaniu myszą. Z przykładu w tym artykule dowiesz się, jak skonfigurować zwijanie po kliknięciu niestandardowego przycisku.

Tworzenie obiektu

Utwórz obiekt w pliku HTML, korzystając z tagu <div>, a następnie przypisz mu identyfikator.

Przykładowy plik 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>

Określanie stylu obiektu

W pliku CSS dostosuj styl utworzonego obiektu, korzystając z przypisanego do niego identyfikatora.

Przykładowy plik CSS

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

Dodawanie funkcji zwijania

Podobnie jak rozwijanie reklamy, jej zwijanie też jest procesem asynchronicznym, który przebiega w tej ściśle określonej kolejności:

Kreacja żąda zwinięcia za pomocą metody requestCollapse.
To żądanie wysyła zdarzenie COLLAPSE_START, które informuje kreację, że ma wykonać animację zwinięcia (jeśli taka jest).
Po zakończeniu animacji zwinięcia kreacja zgłasza żądanie ukończenia zwijania, korzystając z metody Collapse.
To żądanie wysyła zdarzenie COLLAPSE_FINISH, które informuje kreację, że może teraz wykonywać dodatkowe funkcje lub animacje w zwiniętym panelu.

Przykładowy kod JavaScript

<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Wykonanie animacji zwinięcia.
  // Aby w wywołaniu opcjonalnie określić kierunek rozwinięcia:
  // Enabler.getExpandDirection(); //
  // Po zakończeniu animacji należy wywołać metodę
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Wygodne wywołanie zwrotne
  // ustawiające końcowy stan po rozwinięciu.
  isExpanded = true;
}

function collapseStartHandler() {
  // Wykonanie animacji zwinięcia.
  // Po zakończeniu animacji należy wywołać metodę
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Wygodne wywołanie zwrotne
  // ustawiające końcowy stan po zwinięciu.
  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);
  }
};

Czy to było pomocne?

Jak możemy ją poprawić?