2

Ich versuche, Interstitial nach dem Startbildschirm meiner Anwendung (iOS) zu integrieren. Es funktioniert wie erwartet mit Anzeigen von Google zum Testen. Mein Problem besteht darin, meine eigenen Creatives zu erstellen.Interstitial-DFP-Anzeige füllt nicht den Bildschirm

Da es nur 4 zulässige Größen für Interstitials gibt (320x480, 480x320, 768x1024 und 1024x768) weiß ich nicht, wie man Bilder für iPhone 5, 6, ... einstellt oder die 320x480 Bildskalierung auf Vollbild stellt.

Ich habe versucht, eine HTML5-Creative zu erstellen, die die Größe des Bildes auf den Bildschirm passen, aber es ist immer noch 320x480:

interstitial screenshot

Hier ist der Code des 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> 

I weiß, dass es möglich ist, Makros zu erstellen, die das Bild abhängig von der Größe des Bildschirms zuweisen, aber ich habe kein Beispiel gefunden. Ich bin offen für jeden Vorschlag.

Entschuldigung für die lange Post, es ist wahrscheinlich ein duplicate, aber die bereitgestellten Antworten funktionieren nicht.

Antwort

1

Ich habe eine funktionierende Lösung gefunden, indem ich ein Custom Creative erstellt habe (Neues Creative> Mobile App> Benutzerdefiniert).

verwendete ich den Code unten (Code-Snippet-Feld) das Bild einzufügen (Größe angepasst und auf dem Bildschirm zentriert) und das Bild auf die Click-through-URL zum Verlinken:

<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> 
0

Individuelle Kreative ist die richtige Weg, aber der Beispielcode sollte genau so sein.

<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> 

denke ich CSS Flex-Optionen die beste Option, horizontale und vertikale aligment für diesen Fall ist.

https://jsfiddle.net/9byg3t1n/

Verwandte Themen