Werbepause - Apples neue
mobile iAd-Plattform

Über die Werbeplattform iAd ist erstmals mobile Werbung realisierbar, die direkt in der App läuft und auch multimedial neue Möglichkeiten bietet. Wie Sie iAd einsetzen, zeigt dieser Artikel.

Von Matthias Proske

Werbung ist nicht nur im traditionellen Internet ein gutes Geschäft sondern gewinnt auch im mobilen Internet rasant an Bedeutung. Allerdings funktionieren hier die bekannten Display Advertising Formen nicht in gewohnter Form. Die Displays sind kleiner, der zur Verfügung stehende Platz stark begrenzt. Die Fähigkeit von mobilen Browsern wie dem Safari auf dem iPhone durch Tippen auf einen Textblock diesen sofort zu vergrößern, lässt klassische Display Advertising Formen in Webseiten, die auf mobilen Geräten betrachtet werden, noch schneller aus dem Blickfeld rutschen als sie dies beim stationären Konsum mit dem PC ohnehin schon tun.

Werbung in Apps ist stark im Kommen

Eine neue Werbeform, die sich im letzten Jahr langsam etabliert hat ist daher Werbung, die direkt in die auf den Smartphones benutzten Apps integriert wird. Platzhirsch in diesem recht jungen Markt ist die von Google übernommene Firma AdMob. Dieses Geschäft möchte sich Apple natürlich nicht entgehen lassen und startete am 1. Juli mit iAd nun ein eigenes Werbenetzwerk für iOS 4 getriebene Geräte. Dies sind momentan das iPhone 3G, 3GS und 4, sowie der iPod touch der dritten Generation. Für das unter iOS 3.2 laufende iPad wird das Update auf die Version 4 im Herbst erwartet. Bis iAd auch auf dem iPad tatsächlich genutzt werden kann wird es wohl November werden.

Mit iAd ausgelieferte Werbung kann allerdings deutlich mehr als alle bisher verfügbaren mobilen Werbenetzwerke. Bisher funktioniert Werbung in Apps so: Ein Teil des Bildschirms der Anwendung ist für Anzeigen reserviert. An diesem Platz werden dann dynamisch über das Internet geladene Banner der Werbekunden angezeigt, die das mobile Werbenetzwerk ausliefert. Tippt man nun auf den Banner verlässt man die App und landet im Safari, welcher eine Landingpage des jeweiligen Werbetreibenden zeigt. Der Medienbruch ist deutlich sichtbar. Man wird aus der App gerissen, die Werbung findet in einer anderen App – dem Browser – statt. Einige Apps versuchen dieses Problem dadurch abzumildern, dass sie den Safari in die App integrieren und die Landingpage dort anzeigen, wirklich viel besser macht es die Sache allerdings auch nicht.

iAd ist in iOS4 interiert

Apple macht sich mit seinem eigenen Netzwerk iAd jetzt den Umstand zunutze, dass es vollen Zugriff auf das Betriebssystem hat und daher eine Ebene tiefer ansetzen kann; iAd ist in iOS 4 integriert und kann mit einem Objective-C Framework genau wie andere Betriebssystemfunktionen angesprochen werden. Dadurch ist es möglich, dass die eigentliche Werbung direkt in der App von der sie aufgerufen wurde läuft und man nach dem Schließen der Anzeige dort in der App landet wo man vor dem Tippen auf den Banner gewesen war. Nochmal im Klartext: Auch iAd basierte Werbung wird über einen in der App platzierten Banner aufgerufen, nach dem Tippen auf den Banner verlässt man dann allerdings nicht die App, sondern sie terminiert im Hintergrund, im Vordergrund läuft die von iAd gelieferte Anzeige. Beendet man diese kommt die App wieder in den Vordergrund und läuft weiter. Welchen Effekt wird das nun haben? Für die Ad Impressions der Banner keinen großen, für die Click-Through-Rate der eigentlichen Anzeige jedoch vermutlich schon. Man ist viel eher geneigt auf einen Banner in einer App zu klicken, wenn man weiß, dass man mit einem Klick auf das Schließen X sofort wieder in der App zurück ist.

Dies ist aber nicht der einzige Vorteil, den iAd basierte Anzeigen gegenüber anderen Werbenetzwerken haben. Die Möglichkeiten die Anzeige zu gestalten sind deutlich vielfältiger als bisher möglich. Werbenetzwerke wie Greystripe, Crisp Wireless oder Medialets zeigen mit ihren Video- und Interaktiven Formaten zwar schon seit längerem wo die Reise hingeht, iAd geht aber durch seine Verankerung im Betriebssystem noch deutlich darüber hinaus.

JavaScript und HTML5 als Basis

Als Basis der Anzeigen dient HTML5 + Javascript. Apple stellt mit dem iAd JS Framework eine API-Sammlung zur Verfügung, mit deren Hilfe jeder Developer eigene Anzeigen bauen kann. Dazu später mehr. Apple hat die bekannten HTML5 Features um hardwarenahe Funktionen erweitert, die es ermöglichen auf gerätespezifische Funktionen wie zum Beispiel das Gyroscope des iPhone 4 zuzugreifen. Grob gesagt ist damit alles möglich was heute als Web-App mit entsprechenden Javascript Frameworks für das iPhone realisierbar ist. Die Anzeige ist damit nicht bloß eine Landingpage im Web sondern fühlt sich an wie eine App in der App. Audio, Video, in-Ad-Käufe im App-Store, Geolocation, Slider, 3D Effekte etc. sind nur einige der Möglichkeiten.

Wie kann man jetzt iAd für sich nutzen? Grundsätzlich gibt es drei Rollen in diesem Spiel: Die des Werbetreibenden, der mobile Werbung schalten möchte, die des Content-Anbieters, der in seiner App Werbung zulassen möchte und die des Produzenten der Anzeigen, bei klassischer Werbung sind dies zumeist Werbeagenturen, wer diese Rolle bei iAd letztlich einnehmen wird, muss sich noch zeigen. Potentiell alle im Apple Developer Network registrierten Entwickler mit HTML5 Know-How und MVC Verständnis.

Ab einer Million US-Dollar ist man dabei

Gehen wir die drei Rollen der Reihe nach durch: Für Werbetreibende, die ihr Produkt über iAd Netzwerk bewerben wollen ist die Sache zuvorderst momentan noch sehr teuer. Apple verlangt gegenwärtig ein Mindestbudget von 1 Mio US$ um dabei sein zu können. Um eine gewisse Exklusivität für eine Produktkategorie zu bekommen werden Gerüchten zufolge mindestens 10 Millionen US$ fällig.

Die Marschrichtung ist klar - Apple möchte zu Beginn möglichst große Markenartikler, die dem Ganzen eine professionelle Note verleihen. Das scheint tatsächlich auch gelungen zu sein; bisher haben unter anderem Best Buy, Disney, General Electric, Citi Bank, Target, Nissan, Unilever, und Sears gebucht. Apple verkündete zum Start von iAd in den USA bereits 60 Millionen US$ an Werbegeldern aquiriert zu haben; das entspricht der Hälfte der kompletten Media-spendings für mobile Advertising im zweiten Halbjahr 2010.

Das interessante daran, glaubt man den Angaben der amerikanischen Kollegen, so kommen diese Gelder aus den klassischen Werbebudgets der Firmen und haben deshalb nicht das Online- bzw. Mobile Marketing Budget kanibalisiert, Apple hätte also demzufolge den Markt tatsächlich erweitert. Ob das so bleiben wird, muss natürlich erst abgewartet werden.

TKP 10USD plus CPC 2USD

Noch ein Wort zu den Kosten. Apple fährt eine Kombination aus einem TKP- und einem performancebasierten Modell. Man bezahlt für die Ad-Impression des Banners, d.h. jede Anzeige des Banners entspricht einer Ad Impression, so wie im Web auch und zusätzlich bezahlt man für den Click auf einen Banner.

Der TKP (Tausender Kontakt Preis) für die Ad Impression der Anzeigen liegt bei 10 US$, ein Klick auf den Banner (CPC) kostet stattliche 2 US$ - ein sehr ambitionierter Preis. Allein die Recherche für diesen Artikel hat Nissan und Unilever schon eine Menge Geld gekostet. Aufgeteilt wird dieses Geld übrigens im Verhältnis 60:40 zwischen dem Herausgeber der App und Apple.

In den USA läuft iAd seit dem 1.Juli, die Zahl unterschiedlicher Anzeigen ist jedoch noch ziemlich bescheiden. Es sind bisher nur Anzeigen von Nissan und Dove in freier Wildbahn gesichtet worden. Alle anderen Firmen sind gerade in der Vorbereitung oder der Produktion der Anzeigen. Apple geht davon aus, dass iAd erst im Herbst richtig in Schwung kommen wird. Die Nissan Anzeige reizt die Möglichkeiten von iAd schon recht gut aus, es gibt ein Video, ein 3D Menue und ein Gewinnspiel mit iPhone Schüttelfunktion. Allerdings fühlte es sich auf dem iPhone 4 nicht so ruckelfrei an, wie die auf der iOS 4 Präsentation von Steve Jobs gezeigten Beispiele. Die Dove Anzeige ist etwas weniger multimedial und setzt mehr auf Emotionen. Unilever arbeitet hier mit einer Reihe von Sportlern zusammen, die als Testimonials für das Produkt Dove Men plus Care werben. Man kann sich in der Anzeige durch die Biografien der Sportler klicken und erfährt Details aus ihrem Leben auch Abseits des Sports. Es stehen momentan ganz offensichtlich weit mehr Werbeplätze in Apps zur Verfügung als Apple Anzeigen zum Verteilen hat. Daher wird es in naher Zukunft eine Möglichkeit geben für App-Entwickler ihre Apps zu deutlich günstigeren Konditionen per iAd zu promoten. Da kommen einem Bannertauschringe des frühen Internets in den Sinn.

iAd einfach in die eigene App integrieren

Wer selbst Herausgeber einer App ist kann relativ einfach an iAd teilnehmen. Neben einer Anmeldung im Developer Portal muss nur etwas Code aus dem iAd Framework eingebaut werden. Der Platz an dem dann von iAd der Banner eingeblendet wird, macht etwa 10% der Bildschirmfläche aus und kann frei positioniert werden. Optimaler Weise positioniert man ihn am oberen oder unteren Bildschirmrand.

Man sollte darauf achten, falls die eigene App horizontale und vertikale Ausrichtung unterstützt, dies auch für den Banner vorzusehen. Desweiteren ist darauf zu achten, dass es auch Zeiten geben wird, in denen keine Banner geliefert werden, z.B. weil gerade keine Internetverbindung vorliegt oder Apples Banner Pool leer ist, dann sollte die Stelle ausgeblendet werden und die App wieder die volle Bildschirmfläche einnehmen.

Als letztes muss man noch mit seiner Applikation auf den Klick auf den Banner reagieren. Laufende Audio und Videostreams sollten unterbrochen werden, rechenintensive Arbeiten gestoppt werden. Die iAd Anzeigen laufen zwar in einem eigenen Speicherbereich, aber wie jeder erfahrene Objective-C Entwickler weiss: Speicher ist unter iOS immer knapp.

Stellt sich zum Schluss noch die Frage: Wie entstehen die Anzeigen eigentlich? Momentan ist diese Frage noch recht einfach zu beantworten: Apple baut sie. Ja, richtig gelesen, in der Anfangsphase wird jede in iAd ausgelieferte Anzeige von Apples Kreativabteilung umgesetzt. Man hatte sich - vermutlich zu diesem Zweck - vor kurzem den mobile Marketing Spezialisten Quattro Wireless einverleibt. Insider sprechen von 6-8 Wochen, die vergehen, bis eine fertige Anzeige zurückkommt, nachdem man die Entwürfe bei Apple eingereicht hat.

Dass die Werbebranche mit dieser Aufgabenteilung nicht sonderlich glücklich ist, kann man sich vorstellen. Daher gibt es seit kurzem für registrierte Entwickler Zugriff auf das iAd JS Framework. Damit kann man sich selbst eine Anzeige bauen. Wie das im einzelnen vonstatten geht, dazu kommen wir jetzt.

iAd-Anzeigen selbst gebaut

Eine iAd Anzeige besteht grundsätzlich aus zwei Teilen: Dem Banner und der eigentlichen Anzeige. Der Inhalt wird in einem .ad – Ordner zusammen gefasst. Neben der üblichen Property-List für allgemeine Einstellungen finden sich hier die beiden Unterordner „Creatives“ für alle zu dieser Werbung gehörenden Banner und „adUnit“ für die eigentliche iAd App.

Als Banner können wahlweise HTML-Banner oder Grafiken verwendet werden; stehen mehrere Banner zur Verfügung, so werden sie automatisch durchgewechselt. Es sollte jedoch mindestens eine Variante für Quer- und Hochformat zur Verfügung gestellt werden. Die Abmessungen sind immer identisch, 320x50px bzw. 480x32px.

Dabei ist zu beachten, dass zwar CSS-Animationen in den Bannern möglich sind, diese jedoch nicht interaktiv sein können. Es gibt lediglich eine Aktion für einen Banner und das ist ein einfacher Tap, dieser wird aber bereits auf Objective-C Ebene abgefangen.

Apple hat sich bei der Entwicklung des iAd JS Frameworks große Mühe gegeben, dem Entwickler eine Struktur zu bieten, die er von der klassischen App- Entwicklung mit UIKit gewohnt ist. Gut für den erfahrenen Objective-C Programmierer, Entwickler und Designer die eher von der Webentwicklung kommen, werden sich aber ein wenig in die verwendete MVC-Struktur einarbeiten müssen. Ähnlich wie klassische Apps bestehen iAd Anzeigen aus verschiedenen Views, die jeweils über einen ViewController gesteuert werden. Um diesen Aufbau und die Erzeugung eigener Controller und Views zu vereinfachen, erweitert das iAd JS Framework Javascript um einige fehlende Funktionen:

1. Inheritance
   Javascript ermöglicht normalerweise keine Vererbung und damit auch keine superclass. Durch die im iAd JS Framework eingeführte Vererbung lassen sich schnell eigene ViewController anhand der bestehenden ADViewController -Klassen erzeugen, vergleichbar mit Objective-C kann über callSuper() aus jeder Klasse auf den Konstruktor der superclass zugegriffen werden.
2. synthesizedProperties
   Auch die automatische Erzeugung von Get- und Set- Funktionen für Variablen sind Objective-C Entwicklern sicherlich nicht unbekannt. Im iAd Framework steht diese Funktionalität auch in Javascript zur Verfügung. Variablen werden intern einfach um einen vorangestellten underscore ergänzt. Diese Namenskonvention muss bei eigenen Erweiterungen berücksichtigt werden. Eigene Funktionen überschreiben hierbei automatisch die generierten.
3. Notification
   für synthesizedProperties stehen automatisch auch Observer zur Überwachung von Änderungen zur Verfügung

Viewcontroller erzeugen

ViewController werden rein programmatisch erzeugt, Views können wie auch in Objective-C sowohl programmatisch in Javascript als auch deklarativ in HTML erzeugt werden. Für die programmatische Erzeugung steht dabei die Klasse ADView zur Verfügung die im Wesentlichen ein Pendant der UIView- Klasse ist.

Listing 1: Beispiel für die programmatische Erzeugung eines paging ADScrollViews

var scrollView = new ADScrollview();
scrollView.verticalScrollEnabled = false;
scrollView.showsHorizontalScrollIndicator = false;
scrollView.pagingEnabled = true;
scrollView.position = new ADPoint(30,30);
scrollView.size = new ADSize(200,300);
ADRootView.sharedRoot.addSubview(scrollView);

Für die deklarative Erzeugung führt iAd eigene Properties ein, mit denen die entsprechenden HTML-Tags erweitert werden.

Listing 2: der gleiche ADScrollView deklarativ erzeugt

<html>
	<head>
		<meta http-equiv="Content-type"
content="text/html; charset=utf-8">
		<meta name="viewport"
content="width=device-width, user-scalable=no">
	</head>
	<body class="ad-root-view">
		<div class="ad-scroll-view"
ad-vertical-scroll-enable="false"
ad-shows-horizontal-scroll-indicator="false"
ad-paging-enabled="true"
style="left: 30px; top:30px; width:200px; height:300px;">
			<div class="hosting-layer">
				<img src="img1.jpg">
				<img src="img2.jpg">
				<img src="img3.jpg">
				<img src="img4.jpg">
			</div>
		</div>
	</body>
</html>

Generell sind ein Großteil der UIKit Klassen auch im iAd Framework umgesetzt (jeweils mit dem Präfix AD anstelle von UI), die Klassen sind zu umfangreich um sie hier im Detail zu erläutern, sie sind jedoch im Developer Network in der iAd JS Reference erläutert.

Das iAd JS Framework bietet darüber hinaus einige Funktionen, die im UIKit bzw. im Webkit-Browser nicht in dieser Form zur Verfügung stehen:

Inline-Video

Durch das Hinzufügen des –webkit-playsinline Attributes werden Videos nicht automatisch im Fullscreen- Modus abgespielt.

window.ad Objekt

Listing 3: Erzeugung eines MapViews im dazugehörigen ViewController

MapViewController.prototype.viewDidAppear = function () {
	window.ad.map.listener = this;
	window.ad.map.hidden = false;
	window.ad.map.frame = new MapRect(x,y,
breite, höhe);

	// eigene Position
	window.ad.map.showsUserLocation = true;
	
	// Landmarks
	var landmark = new MapAnnotation(breite,länge,
Name, Beschreibung, callback, iconURL);
	window.ad.map.addAnnotation(landmark);
};

Wallpaper

Durch Aufruf der Funktionen Window.ad.setImageAsWallpaper() und Window.ad.writeImageToSavedPhotos() können Fotos von einer bestimmten URL direkt auf dem iPhone gespeichert oder als Hintergrundbild hinterlegt werden.

In-Ad-Purchase

Analog zum inApp-Purchase ist auch ein Einkauf im iTunes Store direkt aus einer iAd Anzeigte möglich. Dazu müssen die Ids der zu kaufenden Videos, Musiktitel, Bücher oder Apps zuerst im window.ad.store Objekt registriert werden, anschließend wird über die Methode window.store.purchaseItemWithId (itemId, offerid, listener) der Einkauf initiiert.

Listing 4: inAd-Purchase

//Ids registrieren
window.ad.store.registerItemsForPurchase(itemId);
window.ad.store.lookupItemWithID(itemId, listener);
listener.storeItemLookupDidSucceed = function(item){
	var storeOfferId = item.offers[0].identifier;
}
//Einkauf auslösen
window.ad.store.purchaseItemWithID(itemId,
storeOfferId, listener);

			

Sowohl die Wallpaper- als auch die Store-Methoden bieten jeweils callback-Funktionen für erfolgreichen Abschluss oder Abbruch der Aktion.

Die genannten Beispiele geben nur einen kleinen Ausschnitt der Möglichkeiten des iAd JS Frameworks wieder, sie zeigen aber eines sehr deutlich: iAd Anzeigen sind mehr als nur HTML5 um ein wenig Javascript erweitert. Views, ViewController und ihre klare Trennung sind das grundlegende Konzept, auf dem das Framework aufbaut und dadurch ähneln iAd Anzeigen in der Entwicklung viel mehr den klassischen Objective-C Apps als Webseiten oder Webapplikationen.

Diese Tatsache muss auch bei der Entwicklung von iAd Anzeigen berücksichtigt werden. Das Entwicklungskonzept entspricht dem einer Applikation und nicht dem einer Webseite. Entwickler mit Erfahrung in klassischen, objektorientierten Programmiersprachen, allen voran natürlich Objective-C, werden sich schnell in dem Konzept zurecht finden und auch Javascript Entwickler, die bereits mit zumindest ähnlichen Frameworks wie z.B. ExtJS Erfahrung gesammelt haben, werden den Einstieg leichter finden. Wer sich bisher jedoch in erster Linie mit HTML und CSS beschäftigt hat sollte sich vorab mit dem zugrunde liegenden Model-View-Controller Konzept genau auseinander setzen.