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.
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
<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>
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)
- Sağa veya aşağı sağa genişletme
- Genişletilmiş paneli her zaman 0,0 noktasına konumlandırın.
#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;
}
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
vetop
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)
- Sağa veya aşağı sağa genişletme
opt_expandedWidth
veopt_expandedHeight
parametrelerini genişletilmiş panelin boyutlarıyla eşleşecek şekilde ayarlayın.
// 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