HTML5 expanding build guide

Reklamı daraltma

Sonraki: Çok boyutlu genişleyen reklam öğesi ayarlama

Reklam öğesini daraltmak için kullanıcı etkileşiminde daraltmayı kontrol eden bir nesne oluşturun. Bunu, kullanıcı tıklamasında veya fareyle üzerine gelmede daralacak şekilde ayarlayabilirsiniz. Bu makaledeki örnekte, nesneyi bir özel düğmenin herhangi bir yeri tıklandığında daraltacak şekilde nasıl ayarlayacağınız gösterilmektedir.

Nesne oluşturma

HTML dosyasında <div> etiketini kullanarak bir nesne oluşturun, daha sonra bir kimlik atayın.

Örnek HTML

<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Daraltılmış içeriği buraya ekleyin. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Genişletilmiş içeriği buraya ekleyin. -->
<div id="collapse-button">KAPAT X</div>
</div>
</div>
</body>

Nesneyi biçimlendirme

CSS'de oluşturduğunuz nesneye atadığınız kimliği kullanarak nesneyi biçimlendirin.

Örnek CSS

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

Daraltma işlevselliği ekleme

Bir reklamı genişletmede olduğu gibi bir reklamı daraltma da tam olarak şu sıralamayı izleyen eşzamanlı olmayan bir süreçtir:

Reklam öğesi, requestCollapse yöntemini kullanarak daraltma isteğinde bulunur.
Bu istek, COLLAPSE_START etkinliğini göndererek reklam öğesine genişletme animasyonunu (varsa) gerçekleştirmesini bildirir.
Daraltma animasyonu bittikten sonra, reklam öğesi finishCollapse yöntemini kullanarak daraltma işleminin tamamlanması için istekte bulunur.
Bu istek, COLLAPSE_FINISH etkinliğini gönderir. Bu etkinlik, reklam öğesine artık daraltılmış panelde ek işlevler veya animasyonları gerçekleştirebileceğini bildirir.

Örnek JavaScript

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

function expandStartHandler() {
  // Perform expand animation.
  // İsteğe bağlı olarak, çağrıda genişletme yönünü belirtmek isterseniz:
  // Enabler.getExpandDirection(); //
  // Animasyon bittiğinde şu çağrılmalıdır:
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Genişletildiğinde son durumun
  // ayarlanmasında kolaylık sağlayacak geri çağırma.
  isExpanded = true;
}

function collapseStartHandler() {
  // Daraltma animasyonunu gerçekleştirin.
  // Animasyon bittiğinde şu çağrılmalıdır:
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Daraltıldığında son durumun ayarlanmasında
  // kolaylık sağlayacak geri çağırma.
  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);
  }
};

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?