HTML5 tam ekrana genişleyen reklam öğesi, biri başlangıçta daraltılmış boyut, diğeri de dinamik tam ekran boyutu olmak üzere iki boyuta sahip genişleyen reklamdır. HTML5 tam ekrana genişleyen reklam öğeleri masaüstü, mobil ve uygulama içi ortamlarda kullanılabilir.
HTML5 tam ekrana genişleyen reklam öğesinin daraltılmış daha küçük boyutu, masaüstü veya mobil web sitesinin ya da mobil uygulamanın standart bir reklam yerleşimine sığar. Daha geniş olan boyut, daraltılmış boyuttan dışarı doğru genişleyerek masaüstü tarayıcı penceresinin veya mobil cihaz ekranının isteğe bağlı daha küçük, belirli bir kısmını doldurmuş gibi görünür ve her zaman ortalanmış bir şekilde görüntülenir. Kullanıcılar tam ekran düğmesini tıkladığında reklam genişler.
Bu makalede, Studio’nun HTML5 SDK'sı kullanılarak tam ekrana genişleyen bir HTML5 reklam öğesinin nasıl yapılacağı açıklanmaktadır.
Add the Enabler and wait for it to initialize
The Enabler is the core code library of Studio, and is required for all rich media creatives. Add the following script tag to the <head> tag of your HTML file:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Wait for Enabler initialization
Nothing in the ad should auto-execute until the Enabler has initialized. This ensures that everything is properly loaded and Enabler methods can be accessed before a user interacts with the ad.
In your JavaScript, verify that the Enabler has initialized using the Enabler’s isInitialized method, which returns true or false. If true, make the call to start your function, in this example, enablerInitHandler(). If false, make a fallback call that listens for the Enabler’s INIT event.
Once the Enabler has initialized, start animation, load image assets, or call tracking methods.
// If true, start function. If false, listen for INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Add your code to start ad animation, load images, call Enabler methods or
// use polite loading.
}
Polite loading delays the loading of creative assets until the publisher page is loaded. To set up polite loading, wait for the Enabler to initialize, then call the Enabler's isPageLoaded method. Replace the enablerInitHandler function above with the following code:
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// Add your code to start ad animation or load images.
}
If your creative includes autoplaying animation, you may want to wait until the viewer has scrolled the ad into view before playing that animation. To check visibility, call the Enabler's isVisible method.
Replace the politeLoadHandler function with the following code:
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Replace the enablerInitHandler function with the following code:
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Tam ekrana genişletme ve daraltma
Tam ekrana genişleyen reklam öğeleri, görüntülendikleri ekranı doldurmak için her yönde genişler Genişletme işlemi aşağıdaki adımları içerir. Daha ayrıntılı bilgi ve örnek kod için her adımı tıklayın.
Tam ekranın kullanılıp kullanılamadığını belirlemek için Enabler.queryFullscreenSupport() yöntemini çağırın.
Tam ekranın desteklenip desteklenmediğini kontrol etmek için örnek kod
// Tam ekran desteğini kaydetmek için bir değişken oluşturun.
var fullscreenSupported = false;
// Sonucu bildirmek için bir dinleyici ekleyin.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Tam ekran desteği onaylandıktan sonra gizli bir tam ekran düğmesi gösterin.
if (fullscreenSupported) {
// Aşağıdaki kod satırında, "fullscreenButton" adlı bir düğmenizin olduğu varsayılmaktadır.
fullscreenButton.style.display = 'block';
}
Reklam öğesi, otomatik olarak mümkün olan en büyük boyuta genişler. İsterseniz ekranın boyutlarını kontrol edebilir ve bunun yerine özel bir boyuta genişletebilirsiniz. Ekran boyutunu almak için Enabler.queryFullscreenDimensions() yöntemini çağırın.
Genişletmeden önce ekran boyutunu kontrol etmek için örnek kod
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
Maksimum ekran boyutlarına genişletmek için Enabler.requestFullscreenExpand() yöntemini çağırın. Daha sonra, FULLSCREEN_EXPAND_START etkinliğini dinleyin. Genişletme sırasında animasyon uygulamak istiyorsanız bu etkinlik işleyicide özel animasyon yönteminizi çağırın.
Tam ekranı dolduracak şekilde genişletmek için örnek kod
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (İsteğe bağlı) Özel genişletme animasyonunuzu başlatmak için kod ekleyin.
// Animasyon uygulamıyorsanız bunun yerine Enabler.finishFullscreenExpand(); yöntemini çağırın.
Enabler.finishFullscreenExpand();
});
Ayrıca, özel boyuta (örneğin, 1280x1024) genişletmek için bunun yerine istediğiniz genişliği ve yüksekliği yönteme geçirebilirsiniz:
Özel boyuta genişletmek için kod örneği
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (İsteğe bağlı) Özel genişletme animasyonunuzu başlatmak için kod ekleyin.
// Animasyon uygulamıyorsanız bunun yerine Enabler.finishFullscreenExpand(); yöntemini çağırın.
Enabler.finishFullscreenExpand();
});
Genişletme tamamlandığında, Enabler.finishFullscreenExpand() yöntemini çağırın. Daha sonra, FULLSCREEN_EXPAND_FINISH etkinliğini dinleyin.
Genişletme animasyonu kullanıyorsanız animasyonunuz tamamlandığında bu yöntemi çağırın. Animasyon uygulamıyorsanız FULLSCREEN_EXPAND_START etkinliği için işleyicide bu yöntemi çağırın. Yukarıdaki örneğe bakın.
Genişletmeyi bitirmek için örnek kod
Enabler.finishFullscreenExpand();
// Genişletme durumunu takip etmek için bir değişken oluşturun.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
Daraltma için öncelikle reklam öğenizin tam ekran durumunda bir kapat düğmesine ihtiyacınız olacaktır. Daraltmayı başlatmak için Enabler.requestFullscreenCollapse() yöntemini çağırın. Daha sonra, FULLSCREEN_COLLAPSE_START etkinliğini dinleyin. Daraltma sırasında animasyon uygulamak istiyorsanız bu etkinlik işleyicide özel animasyon yönteminizi çağırın.
Daraltmayı başlatmak için örnek kod
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (İsteğe bağlı) Özel daraltma uygulamanızı başlatmak için kod ekleyin.
// Animasyon uygulamıyorsanız bunun yerine Enabler.finishFullscreenCollapse(); yöntemini çağırın.
Enabler.finishFullscreenCollapse();
});
Daraltma tamamlandığında, Enabler.finishFullscreenCollapse() yöntemini çağırın. Daha sonra, FULLSCREEN_COLLAPSE_FINISH etkinliğini dinleyin.
Daraltma animasyonu kullanıyorsanız animasyonunuz tamamlandığında bu yöntemi çağırın. Animasyon uygulamıyorsanız FULLSCREEN_COLLAPSE_START etkinliği için işleyicide bu yöntemi çağırın. Yukarıdaki örneğe bakın.
Daraltmayı bitirmek için örnek kod
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// "Genişletmeyi tamamlayın" adımında oluşturduğunuz değişkeni ayarlayın.
isFullscreen = false;
});