HTML5 expanding build guide

Ana, daraltılmış ve genişletilmiş paneller ayarlama

Sonraki: Reklam öğesinin genişletmesini kontrol etme

Bir reklamı sayfada konumlandırma ve genişletme yönünü ayarlama

Genişleyen reklam öğesinin temel işlevlerinden ikisi, web sitesinin dosyanızdaki daraltılmış paneli temsil eden nesneyi tanımlamasına yardımcı olmak ve genişletme yönünü belirlemektir. Dosyanızdaki ana nesne, daraltılmış panel alanından daha büyük olduğundan ve genişletme herhangi bir yönde ayarlanabileceğinden, daraltılmış alanın tanımlanması sayfanın reklamınızı nasıl oluşturacağını bilmesi açısından önem taşır.

Reklamınız bir site sayfasında sunulduğunda, sayfa, reklam öğesini ayarladığınız sol ve üst piksel ofsetine göre konumlandırır ve reklam öğenizin boyutunu reklam alanıyla eşleştirir. Daha sonra, genişletme yönünü belirler. Bunu yapmak için dosyalarınızı uygun şekilde ayarlayın:

HTML'de üç panel oluşturun:
- Ana panel: Hem daraltılmış hem de genişletilmiş panelleri içerir
- Daraltılmış panel: Daraltılmış panel içeriklerini barındırır
- 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, daraltılmış paneli reklam yerleşimine hizalamak için setExpandingPixelOffsets Etkinleştirici yöntemini kullanın. Aşağıdaki örnekte, sol ofset 200 pikseldir.

2-part expanding ad in a web page. Collapsed portion is a 300x250 inpage colored purple and exanded is a 500X300 expanding left and down over content colored blue

300x250 = daraltılmış
500x300 = genişletilmiş

Reklamınızın bir uygulama içinde sunulurken doğru biçimde genişlediğinden emin olmak için reklam öğenizi aşağıya veya tam ekrana genişleyecek şekilde tasarlamanız gerekir. Tam ekrana genişlemeyi nasıl etkinleştireceğinizi öğrenin

Nesne oluşturma

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

Kod snippet'i

<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 panel, genişletilmiş panelinizle aynı boyutlara sahip olmalı ve her zaman 0,0 noktasına konumlandırılmalıdır.
Daraltılmış panelin konumu genişletme yönüne bağlıdır:
- Sağa veya aşağı sağa genişletme
  - left = 0px
  - top = 0px
- Sola veya aşağı sola genişletme
  - left = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği (örneğin, 500px - 300px = 200px)
  - top = 0px
- Yukarı sağa genişletme
  - left = 0px
  - top = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği (örneğin, 300px - 250px = 50px)
- Yukarı sola genişletme
  - left = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği (örneğin, 500px - 300px = 200px)
  - top = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği (örneğin, 300px - 250px = 50px)
Genişletilmiş paneli her zaman 0,0 noktasına konumlandırın.

Kod snippet'i

#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
}
      
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 0px;
  width: 300px;
  height: 250px;
}

#expanded-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
}

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 setExpandingPixelOffsets yöntemini kullanın.

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

Daraltılmış panel stilinde olduğu gibi left ve top parametreleri için ayarladığınız değerler, genişletme yönüne bağlı olur:
- Sağa veya aşağı sağa genişletme
  - left = 0px
  - top = 0px
- Sola veya aşağı sola genişletme
  - left = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği (örneğin, 500px - 300px = 200px)
  - top = 0px
- Yukarı sağa genişletme
  - left = 0px
  - top = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği (örneğin, 300px - 250px = 50px)
- Yukarı sola genişletme
  - left = Genişletilmiş panel genişliği [eksi] Daraltılmış panel genişliği (örneğin, 500px - 300px = 200px)
  - top = Genişletilmiş panel yüksekliği [eksi] Daraltılmış panel yüksekliği (örneğin, 300px - 250px = 50px)
opt_expandedWidth ve opt_expandedHeight parametrelerini genişletilmiş panelin boyutlarıyla eşleşecek şekilde ayarlayın.

Kod snippet'i

// Etkinleştirici'nin INIT etkinliğinden önce çağrılabilir.
Enabler.setExpandingPixelOffsets(
  200, // genişletilmiş reklamın sol ofseti
  100, // genişletilmiş reklamın üst ofseti
  700, // reklamın genişletilmiş genişliği
  450); // reklamın genişletilmiş yüksekliği

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

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?