Saltar a: navegación, buscar

Diferencia entre revisiones de «Panel:Anuncios:Anunciantes»

m
m
 
Línea 26: Línea 26:
 
** Se puede añadir un botón de cerrado usando el id 'closebanner' y añadiendo la propiedad 'useCustomClose' al mraid.
 
** Se puede añadir un botón de cerrado usando el id 'closebanner' y añadiendo la propiedad 'useCustomClose' al mraid.
 
** Debajo del div principal se puede añadir el javascript necesario compatible con mraid.
 
** Debajo del div principal se puede añadir el javascript necesario compatible con mraid.
 +
** Ejemplo:
 
<pre>
 
<pre>
 
<html>
 
<html>
Línea 42: Línea 43:
 
     </div>
 
     </div>
 
</div>
 
</div>
−
<script></script>
+
<script>
 +
// Expanded Click Action Functions
 +
function openSite(url)
 +
{
 +
 +
if ( !isIOSDevice() && !isAndroidDevice() ) {
 +
window.location.href = url;
 +
} else {
 +
mraid.open(url);
 +
}
 +
 +
}
 +
 
 +
//JS utility function to check if device is android/ios
 +
function isIOSDevice()
 +
{
 +
return (detectDeviceType("ipod") || detectDeviceType("iphone") || detectDeviceType("ipad"));
 +
}
 +
 
 +
function isAndroidDevice()
 +
{
 +
return detectDeviceType("android");
 +
}
 +
 
 +
function detectDeviceType(key)
 +
{
 +
var agent = navigator.userAgent.toLowerCase();
 +
var index = agent.indexOf(key);
 +
return (index > -1);
 +
}
 +
 
 +
// Core Ad Functions
 +
function collapse()
 +
{
 +
mraid.close();
 +
}
 +
 
 +
function mraidIsReady()
 +
{
 +
mraid.removeEventListener("ready", mraidIsReady);
 +
        var expandProperties = {
 +
            "useCustomClose" : true
 +
        };
 +
        mraid.setExpandProperties(expandProperties);
 +
showMyAd();
 +
}
 +
 
 +
function showMyAd()
 +
{
 +
var el = document.getElementById("mobAD");
 +
    el.style.display = '';
 +
   
 +
    if ( document.getElementById('closebanner') ) {
 +
setTimeout('document.getElementById("closebanner").style.display = \'\';', 3);
 +
}
 +
}
 +
 
 +
function expand()
 +
{
 +
mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"});
 +
    mraid.expand();
 +
}
 +
 
 +
function resize()
 +
{
 +
var defaultPositionFrame = mraid.getDefaultPosition();
 +
var defaultPositionDisplayString = defaultPositionFrame.x + "," + defaultPositionFrame.y + "," + defaultPositionFrame.width + "," + defaultPositionFrame.height;
 +
 +
// Resizing with offset 0,0 so should expand down from banner ideally unless there is not enough space.
 +
// If so since allowOffscreen is false it should should go down as much as possible and go up for the rest.
 +
    mraid.setResizeProperties({"width":320,"height":250,"offsetX":0,"offsetY":0,"allowOffscreen":false});
 +
    mraid.resize();
 +
}
 +
 
 +
function setupViewport(width)
 +
{
 +
var element = document.querySelector("meta[name=viewport]");
 +
if (!element)
 +
{
 +
element = document.createElement("meta");
 +
element.name = "viewport";
 +
element.content = "width=" + width + ", user-scalable=no";
 +
document.getElementsByTagName('head')[0].appendChild(element);
 +
}
 +
else
 +
{
 +
element.content = "width=" + width + ", user-scalable=no";
 +
}
 +
}
 +
 
 +
function doReadyCheck()
 +
{
 +
if (mraid.getState() == 'loading')
 +
{
 +
mraid.addEventListener("ready", mraidIsReady); 
 +
}
 +
else
 +
{
 +
showMyAd();     
 +
}
 +
}
 +
 
 +
window.addEventListener("orientationchange", function ()
 +
{
 +
if (mraid.getState() == "resized")
 +
{
 +
collapse();
 +
}
 +
});
 +
 
 +
doReadyCheck();
 +
</script>
 +
<script>
 +
  setupViewport(250);
 +
</script>
 +
<style> div#mobAD { top: 0px; }</style>
 +
<style> div#mobAD { top: 0px; bottom: 0px; left: 0px; right: 0px; }</style>
 
</body>
 
</body>
 
</html>
 
</html>

Revisión actual del 10:12 4 ene 2017

Tipos de anuncios de anunciantes

Los tipos de anuncios que los anunciantes pueden añadir a la apps de los móviles son los siguientes:

En este grupo se resumen los banners de tipo imagen, HTML o URL y los nativos propios.
Cada uno de estos tipos tienen características que los hacen comunes en cuanto a procesado pero distintos en cuanto a configuración.
Para todos estos tipos hay que establecer un tamaño de área donde irá nuestro banner. Dicha área es lo que se conoce como 'tamaño del espacio'. Nuestro banner nunca va a poder ser superior a este espacio y si lo fuera no se renderizaría correctamente llegando a escaparse los objetos fuera del área visible. Si nuestra imágen es inferior al tamaño del espacio, podremos indicarle que se estire hace alguno de los lados o cubra el espacio en su totalidad. Hay que tener cuidado al seleccionar estas opciones ya que la imagen se reescalaría y perdería su proporcionalidad.

Es el tipo más básico de anuncio que se puede integrar. El sistema habilitará un campo de formulario para que se pueda subir una imágen que será usada como banner y se deberá especificar una URL destino a donde se enviará al usuario una vez pulse en la imagen. El protocolo de comunicación en este caso será MRAID2.0

Este tipo es muy parecido al anterior y usará el código HTML remoto mediante la dirección URL proporcionada o mediante el mismo código HTML insertado en el cuadro de texto.
Si se opta por este tipo, hay que tener en cuenta una serie de factores importantes en el código para que el sistema funcione correctamente:

  • El código no debe contener hojas de estilo en el <head></head>
  • El código debe ser compatible con MRAID 2.0
  • El HTML debe tener la siguiente estructura:
    • Se debe tener un contenedor global con el id 'mobADContainer'.
    • Dentro del contenedor global se debe tener un contenedor 'mobAD' donde residirá el contenido de la promoción.
    • Se puede añadir un botón de cerrado usando el id 'closebanner' y añadiendo la propiedad 'useCustomClose' al mraid.
    • Debajo del div principal se puede añadir el javascript necesario compatible con mraid.
    • Ejemplo:
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" src="mraid.js"></script>
   <style>* { padding: 0px; margin: 0px; }</style>
</head>
<body>
<div id="mobADContainer" style="width:250px; height:50px; padding:0px; background-color: #cacaca; position: relative; margin: auto;">
    <div id="mobAD" style="width:256px;height:40px; margin: auto; position: absolute;">
        <div id="closebanner" style="position: absolute; right: 1px; top: 1px; display: none;">
           <img src="http://panel.mobeleader.com/img.php?t=1&id=1" style="width: 16px; height: 16px; cursor: pointer;" onclick="collapse();" />
        </div>
	<img src="http://panel.mobeleader.com/ficheros_subidos/creatividades/img-2-46-5824a4306b2bb.jpg" onclick="javascript:openSite('http://panel.mobeleader.com/dummy_plug.php?var1={site_id}&var2={ad_id}&var3={creative_id}&var4={bid_id}');" style="cursor: pointer;" />
    </div>
</div>
<script>
// Expanded Click Action Functions
function openSite(url)
{
	
	if ( !isIOSDevice() && !isAndroidDevice() ) {
		window.location.href = url;
	} else {
		mraid.open(url);
	}
	
}

//JS utility function to check if device is android/ios
function isIOSDevice()
{
	return (detectDeviceType("ipod") || detectDeviceType("iphone") || detectDeviceType("ipad"));
}

function isAndroidDevice()
{
	return detectDeviceType("android");
}

function detectDeviceType(key)
{
	var agent = navigator.userAgent.toLowerCase();
	var index = agent.indexOf(key);
	return (index > -1);
}

// Core Ad Functions
function collapse()
{
	mraid.close();
}

function mraidIsReady()
{
	mraid.removeEventListener("ready", mraidIsReady);
        var expandProperties = {
            "useCustomClose" : true
        };
        mraid.setExpandProperties(expandProperties);
	showMyAd();
}

function showMyAd()
{
	var el = document.getElementById("mobAD");
    el.style.display = '';
    
    if ( document.getElementById('closebanner') ) {
		setTimeout('document.getElementById("closebanner").style.display = \'\';', 3);
	}
}

function expand()
{	
	mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"});
    mraid.expand();
}

function resize()
{	
	var defaultPositionFrame = mraid.getDefaultPosition();
	var defaultPositionDisplayString = defaultPositionFrame.x + "," + defaultPositionFrame.y + "," + defaultPositionFrame.width + "," + defaultPositionFrame.height;
	
	// Resizing with offset 0,0 so should expand down from banner ideally unless there is not enough space.
	// If so since allowOffscreen is false it should should go down as much as possible and go up for the rest.
    mraid.setResizeProperties({"width":320,"height":250,"offsetX":0,"offsetY":0,"allowOffscreen":false});
    mraid.resize();
}

function setupViewport(width)
{
	var element = document.querySelector("meta[name=viewport]");
	if (!element)
	{
		element = document.createElement("meta");
		element.name = "viewport";
		element.content = "width=" + width + ", user-scalable=no";
		document.getElementsByTagName('head')[0].appendChild(element);
	}
	else
	{
		element.content = "width=" + width + ", user-scalable=no";
	}
}

function doReadyCheck()
{	
	if (mraid.getState() == 'loading') 
	{	
		mraid.addEventListener("ready", mraidIsReady);  
	} 
	else
	{ 	
		showMyAd();      
	}
}

window.addEventListener("orientationchange", function ()
{
	if (mraid.getState() == "resized")
	{
		collapse();
	}
});

doReadyCheck();
</script>
<script>
  setupViewport(250);
</script>
<style> div#mobAD { top: 0px; }</style>
<style> div#mobAD { top: 0px; bottom: 0px; left: 0px; right: 0px; }</style>
</body>
</html>

Este tipo de banner genera un HTML rellenando una serie de campos en el formulario como son el color de la letra, el color de fondo, etc.

Nativo

Este tipo genera anuncios para promocionar APPs y hay diferentes tipos distintos

Nativo content wall

Este tipo de anuncio...

Nativo app wall

Este tipo de anuncio...

Vídeo

Este tipo incluye por el momento el protocolo VAST 2.0

Recursos

Obtenido de «https://wiki.mobeleader.com/index.php?title=Panel:Anuncios:Anunciantes&oldid=48»