HTML5 expanding build guide

Çok boyutlu genişleyen reklam öğesi ayarlama

Sonraki: MRAID yöntemlerini doğrudan çağırma

Reklamın sayfada sunulduğu yere bağlı olarak bir reklam öğesini farklı yönlerde genişletilecek şekilde ayarlayabilirsiniz. Reklam öğesini, konumunu tespit edecek ve hangi yönde genişleyeceğini belirleyecek şekilde programlayabilirsiniz. Örneğin, çok yönlü genişleme (MDE) işlevselliğini etkinleştirerek aynı reklam öğesinin, sayfanın sol tarafında sunulduğunda sağa ve sayfanın sağ tarafında olduğunda sola genişletilmesini sağlayabilirsiniz.

2 expanding ad images, one on left with inpage ad that expands right, and one on right with inpage ad that expands left

Sağa genişletme Sola genişletme

Kurulum

HTML'de üç panel oluşturun:
1. Ana panel: Farklı genişletme yönleri de dahil olmak üzere hem daraltılmış hem de genişletilmiş panelleri içerir
2. Daraltılmış panel: Daraltılmış panel içeriklerini barındırır
3. Genişletilmiş panel: Genişletilmiş panel içeriklerini barındırır
CSS'de, üç nesneyi reklam konumunu ve genişletme yönünü yansıtacak şekilde biçimlendirin.
JavaScript'te:
1. Daraltılmış panele ilişkin ofsetleri ayarlamak için setExpandingPixelOffsets Etkinleştirici yöntemini kullanın. Bu ofset, yerel test ortamını etkilemez, ancak reklam yayınlandığında, reklamın daraltılmış kısmı 0, 0 konumunda gösterilir. Bu yöntem, göreli konumlandırılmış gövde öğesinin marginLeft ve marginTop CSS özelliklerini ayarlar.
2. Çok boyutlu genişletmeleri açmak için setIsMultiDirectional Etkinleştirici yöntemini kullanın.
3. Reklamın genişletme yönünü belirlemek ve genişletilen panellerin konumunu ve animasyonunu dinamik olarak uygun şekilde değiştirmek için getExpandDirection Etkinleştirici yöntemini kullanın.

Panel düzeni örneği

Multidirectional: Main page in bright green 700x350; collapsed inpage in brown 300x250; expanding in turquoise bottom and left, 500x300

_{700x350 - Ana panel

300x250 - Daraltılmış panel

500x300 - Genişletilmiş panel}

Nesne oluşturma

<div> etiketlerini kullanarak HTML dosyasında üç nesne oluşturun, ardından kimlikleri atayın.

Örnek HTML

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

Nesnelere stil atama

CSS'de oluşturduğunuz nesneleri, bunlara atadığınız kimlikleri kullanarak biçimlendirin.

Ana paneli her zaman 0,0 değerine konumlandırın ve büyüklük boyutlarının, daraltılmış paneli ve tüm olası genişletilmiş panel yönlerini içerecek büyüklükte olduğundan emin olun. Ana panelin boyutunu şu şekilde hesaplayın:
- Ana panel genişliği = Genişletilmiş panel genişliği + (Genişletilmiş panel genişliği - Daraltılmış panel genişliği)
- Ana panel yüksekliği = Genişletilmiş panel yüksekliği + (Genişletilmiş panel yüksekliği - Daraltılmış panel yüksekliği)
- Örnek
  Yukarıda gösterilen resim kullanıldığında:
  - genişlik = 500 piksel + (500 piksel - 300 piksel) = 700 piksel
  - yükseklik = 300 piksel + (300 piksel - 250 piksel) = 350 piksel
Daraltılmış panel alanını her zaman ana panelinde ortasına konumlandırın. Konumu şu şekilde hesaplayın:
- Daraltılmış sol panel = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği
- Daraltılmış üst panel = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği
- Örnek
  Yukarıda gösterilen resim kullanıldığında:
  - sol = 500 piksel - 300 piksel = 200 piksel
  - üst = 300 piksel - 250 piksel = 50 piksel
Genişletilmiş panelin konumu genişletme yönüne bağlıdır, ancak JavaScript kullanılarak dinamik bir şekilde değiştirilmelidir. Bu örnekte, sol ve üst konumları içeren olası her bir yöne ilişkin sınıflar eklenmiştir. Daha sonra, Etkinleştirici'nin algıladığı yöne bağlı olarak bu sınıflara JavaScript'te erişilir.

Örnek stiller

#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 700px;
  height: 350px;
}
   
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 50px;
  width: 300px;
  height: 250px;
}
      
#expanded-panel {
  position: absolute;
  width: 500px;
  height: 300px;
}
      
.direction-tl {
  left: 0px;
  top: 0px;
}
      
.direction-tr {
  left: 100px;
  top: 0px;
}
      
.direction-bl {
  left: 0px;
  top: 200px;
}
      
.direction-br {
  left: 100px;
  top: 200px;
}

Konumlandırma ofsetlerini ayarlama

Reklamın daraltılmış paneli için piksel ofsetlerini ve genişletilmiş panel boyutlarını ayarlayın. Bu, Studio'nun hem sunulduğu site sayfasında reklamın konumunu hem de genişletme yönünü tanımlamasına yardımcı olur. Bunu yapmak için Etkinleştirici başladıktan sonra setExpandingPixelOffsets yöntemini kullanın:

Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);

Daraltılmış panel biçimlendirmesinde olduğu gibi, sol ve üst parametreleri için ayarladığınız değerler, daraltılmış panel alanını ana panelin ortasına konumlandırmalıdır. Bu konumları şu şekilde hesaplayın:
- sol = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği
- üst = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği
MDE'ye ilişkin opt_expandedWidth ve opt_expandedHeight değerlerinin ayarlanması, temel Genişletme'nin ayarlanmasından farklıdır. Genişletilmiş panelin boyutlarıyla eşleşecek şekilde ayarlamak yerine, değerleri ana panelin boyutlarıyla eşleşecek şekilde ayarlarsınız. Bu değerleri aşağıdaki gibi hesaplayın:
- opt_expandedWidth = Genişletilmiş panel genişliği + (Genişletilmiş panel genişliği - Daraltılmış panel genişliği)
- opt_expandedHeight = Genişletilmiş panel yüksekliği + (Genişletilmiş panel yüksekliği - Daraltılmış panel yüksekliği)

Örnek kod

Enabler.setExpandingPixelOffsets(
    200,  // Genişletilmiş reklamın sol ofseti
    100,  // Genişletilmiş reklamın üst ofseti
    700,  // Reklamın genişletilmiş genişliği
    350); // Reklamın genişletilmiş yüksekliği
      
// Genişletilmiş durumda başlatılıp başlatılmayacağı. Varsayılan değer, false (yanlış) değeridir.
Enabler.setStartExpanded(false);

// Çok boyutlu genişletmeyi, reklamın sayfadaki konumuna
// dayalı olarak "kullanılabilir en iyi" yönde etkinleştirin.
// Varsayılan değer, false (yanlış) değeridir.
Enabler.setIsMultiDirectional(true);

if (Enabler.isInitialized) {
  enablerInitHandler();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}

function enablerInitHandler() {
  // Reklam öğelerini Etkinleştirici başlatıldıktan sonra
  // yüklemek için kod ekleyin.
}

Bu parametreleri, öğelerinizi yükledikten sonra Studio kullanıcı arayüzünde de ayarlayabilirsiniz. Ayrıca, Genişleyen reklam öğesi önizleme özellikleri konusuna da bakın.

Genişletilmiş panelin konumunu dinamik bir şekilde değiştirme

Genişletme yönüne bağlı olarak, ana paneldeki genişletilmiş panel konumunu değiştirmeniz gerekir. Bunu yapmak için getExpandedDirection Etkinleştirici yöntemini kullanarak genişletilmiş yönü belirleyin ve EXPAND_START etkinliği tetiklendiğinde reklam öğesini uygun şekilde değiştirin. Yukarıdaki CSS örneğinde, her bir genişleme yönü için farklı sınıflar ayarlanmıştır. Aşağıdaki snippet'ta genişletilmiş panel nesnesine, genişletme yönüne dayalı olarak bir className atanır.

Örnek kod

function expandAd(e) {
  Enabler.requestExpand();
  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
      function() {
        document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
        // İstediğiniz genişletme animasyonunun kodunu ekleyin.
        Enabler.finishExpand();
  });

  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
      function() {
        // Genişletilmiş paneli gösterme ve öğeleri yüklemek veya
        // animasyonu başlatmak için kod ekleyin.
  });
}

document.getElementById('expand-button').addEventListener('click', expandAd, false);

Önizleme

MDE reklam öğesini yerel olarak önizlediğinizde, reklamı her genişlettiğinizde olası tüm genişletme yönleri gösterilir. Bunlar, aşağıdaki sırada gösterilir:

tl: sol üst
tr: sağ üst
bl: sol alt
br: sağ alt

Studio'da önizleme yaptığınızda yalnızca Studio'nun algıladığı yön gösterilir. Farklı yönleri test etmek ve önizlemek için reklam öğesini, önizleme sekmesine her bir yönü test edecek şekilde konumlandırmalısınız.

İlgili makaleler

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?