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.
Sağa genişletme Sola genişletme
Kurulum- HTML'de üç panel oluşturun:
- Ana panel: Farklı genişletme yönleri de dahil olmak üzere 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ış 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 öğesininmarginLeft
vemarginTop
CSS özelliklerini ayarlar. - Çok boyutlu genişletmeleri açmak için
setIsMultiDirectional
Etkinleştirici yöntemini kullanın. - 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.
- Daraltılmış panele ilişkin ofsetleri ayarlamak için
Panel düzeni örneği |
700x350 - Ana panel |
<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>
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.
#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;
}
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
veopt_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)
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.
}
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.
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);
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.