Intento integrar intersticial después de la pantalla de inicio de mi aplicación (iOS). Funciona como se esperaba con los anuncios proporcionados por Google para realizar pruebas. Mi problema es crear mis propias creatividades.

Como solo hay 4 tamaños autorizados para intersticiales (320x480, 480x320, 768x1024 y 1024x768), no sé cómo configurar imágenes para iPhone 5, 6, ... o hacer que la imagen de 320x480 escale a pantalla completa.

Intenté crear una creatividad HTML5 que cambia el tamaño de la imagen para que se ajuste a la pantalla, pero sigue siendo 320x480:

interstitial screenshot

Aquí está el código del HTML 5:

<!DOCTYPE html>
<html>
  <head>
    <title>ad</title>
    <script type="text/javascript">
      var clickTag = "http://www.google.com";
    </script>
    <style type="text/css" media="screen">

html{
  background-color: #CCC;
}
body{
  /* Workaround for some mobile browsers */
  min-height:100%;
} 
.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}
    </style>
  </head>
  <body>
  <a href="javascript:window.open(window.clickTag)">
    <img src="image.png" class="className" />
  </a>
  </body>
</html>

Sé que es posible crear macros que asignen una imagen según el tamaño de la pantalla, pero no encontré ningún ejemplo. Estoy abierto a cualquier sugerencia.

Lo siento por la publicación larga, probablemente sea un duplicado pero las respuestas proporcionadas no funcionan.

2
Bogy 29 jul. 2016 a las 12:41

2 respuestas

La mejor respuesta

Encontré una solución funcional creando una creatividad personalizada (Nueva creatividad> Aplicación móvil> Personalizada).

Usé el siguiente código (campo de fragmento de código) para insertar la imagen (redimensionada y centrada en la pantalla) y para vincular la imagen a la URL de destino:

<div style="max-height:100%;max-width:100%; text-align: center;">
  <a href="%%CLICK_URL_UNESC%%%%DEST_URL%%">
        <img src="%%FILE:PNG2%%" style="max-height:100%;max-width:100%;vertical-align: middle;" />
    </a>
</div>
1
Bogy 2 ago. 2016 a las 14:56

La creatividad personalizada es la forma correcta, pero el código de muestra debería ser exactamente así.

<div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; ">
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" style="width: 320px; height: 480px; display: block;">
   <img src="%%FILE:PNG1%%" style="width: 320px; height: 480px; vertical-align: middle;" />
</a>

Creo que las opciones de CSS Flex son la mejor opción de alineación horizontal y vertical para este caso.

https://jsfiddle.net/9byg3t1n/

0
ersinyilmaz 27 sep. 2017 a las 12:37