39,59 €
Think of an iAd as a micro-app contained within an app on a user's iPhone or iPad that they've downloaded from the App Store. When the user taps your advert's banner it bursts into life filling the entire screen of their device.
iAd Beginner's Guide takes you through the start to finish process of building rich, compelling, interactive iAds. You will learn to create beautiful multi-page ads with store finders, social sharing, 3D images and video galleries.
You will create ads that utilize the powerful technologies in the iPhone to make your brand shine. Once you have engaged the user you can carry out targeted advertising campaigns with location-based coupons, store finders and social engagement. Using the iTunes Store you will see how it's even possible to add one-click digital content purchasing right within your ad. Learn how iAd producer manages all the HTML5, JavaScript, and CSS3 behind your iAd. You will be creating emotive, gripping and effective mobile advertising campaigns in no time.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 387
Veröffentlichungsjahr: 2012
Copyright © 2012 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: February 2012
Production Reference: 1160212
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-84969-132-1
www.packtpub.com
Cover Image by Asher Wishkerman (<[email protected]> )
Author
Ben Collier
Reviewers
Karl Norsen
Olivier Rabenschlag
Acquisition Editor
Sarah Cullington
Lead Technical Editor
Susmita Panda
Technical Editors
Apoorva Bolar
Naheed Shaikh
Copy Editor
Brandt D'Mello
Project Coordinator
Shubhanjan Chatterjee
Proofreader
Aaron Nash
Indexer
Monica Ajmera Mehta
Graphics
Manu Joseph
Production Coordinator
Prachali Bhiwandkar
Cover Work
Prachali Bhiwandkar
Ben Collier is based in Brighton, UK and specializes in responsive HTML5 websites/cross-platform web-apps, and great native iOS apps on Apple's App Store. He enjoys the constraints and challenges of working with small-screen mobile devices, as it forces focus on the important content and functionality within an app. You can visit Ben's personal website at http://bencollier.net or follow him on Twitter at @ben_c.
Ben is a partner at Ocasta Studios, who make and manage mobile and small-screen apps across all the leading mobile platforms. Visit http://ocastastudios.com for more info.
I'd like to thank those key into making this book a reality; the countless cups of coffee, fresh olives, and episodes of Mad Men. My friends and family were incredibly patient through the late nights and long weekends during which they didn't get the attention they deserved, and for that I'm extremely grateful. The team at Packt Publishing did a fantastic job at keeping me on schedule and turning this book into a reality; working with them has been a pleasure.
Karl Norsen is a technology strategist, manager, and technical lead. He is passionate about leveraging new and emerging technologies in marketing and expanding on how businesses can use technology to further connect their brand with consumers. His background in both technology and advertising has given him a unique perspective on brand awareness, innovative digital media, and utilizing technology to facilitate lasting consumer connections. His future interests include further expanding the reach of a creative technical director and continuing to provide innovative solutions that build on the ever-increasing role of technology in brand and business success.
For more information, you can find his full profile on LinkedIn.
Olivier Rabenschlag's roots are back in the UK where he worked for a variety of advertising agencies as a creative director. He launched numerous Axe body spray campaigns for Unilever and took on digital duties for Sony Ericsson in Europe. In 2006 Olivier moved to Miami to work for Crispin Porter & Bogusky on clients including Burger King, Coke Zero, Sprite, and Volkswagen. After a year in New York following Crispin he eventually moved to Los Angeles where he's now the Group Creative Director of Media Arts at TBWA\CHIAT\DAY responsible for the agency's innovation and integration capabilities across emerging media platforms. Clients include Activision, The Grammys, Nissan, Infiniti, Pedigree and Visa. Olivier helped launch the world's first iAd for the Nissan Leaf that was also presented as a case study at Apple's worldwide developers conference in 2010 by Steve Jobs.
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Think of an iAd as a micro-app contained within an app, on a user's iPhone or iPad, that they've downloaded from the App Store. When the user taps your advert's banner, it bursts into life, filling the entire screen of their device.
iAd Beginner's Guide takes you from start to finish of building rich, compelling, and interactive iAds. You will learn how to create beautiful multi-page ads with store finders, social sharing, 3D images, and video galleries.
You will create ads that utilize the powerful technologies in the iPhone to make your brand shine. Once you have engaged the user, you can carry out targeted advertising campaigns with location-based coupons, store finders, and social engagement. Using the iTunes Store, you will see how it's even possible to add one-click digital content purchasing, right within your ad. Learn how iAd producer manages all the HTML5, JavaScript, and CSS3 behind your iAd. You will be creating emotive, gripping, and effective mobile advertising campaigns in no time.
Chapter 1, Getting Started with iAd, introduces you to iAd, the immersive mobile advertising platform from Apple. We'll look at what an iAd is, why they're awesome, and the underlying technologies they're written in.
Chapter 2, Preparing Your Content, shows the best techniques to get the most out of your media content.
Chapter 3, Making Your iAd, shows you how to install iAd Producer—the tool from Apple that allows us to make rich iAds. With drag-and-drop simplicity and step-by-step examples, we'll create our first demo iAd!
Chapter 4, Making Sure it Works, shows you how to test your ads on the device, or in the iOS Simulator, if you don't have access to the required hardware.
Chapter 5, Templates and Objects, presents the benefits and limitations of a large selection of templates and objects as we build another example iAd, using a range of the pre-built templates and objects in iAd Producer.
Chapter 6, iAd Destinations, shows you how to use the core of our ad to engage your user and induce them to perform an action, such as sharing your brand with a friend via email or downloading your digital content from the iTunes Store.
Chapter 7, Building for the Big Screen, shows you how to build more immersive iAds for the iPad. With its large multi-touch screen, we'll make an ad with even richer interactivity that'll work exclusively on the iPad.
Chapter 8, Creating Interactive Ads, teaches you how to modify the JavaScript code that powers your iAd by adding simple code snippets to enhance your ad with dynamic SMS/e-mail sharing and calendar events, to keep engaging the user with your brand after they've left your advertisement.
Chapter 9, Managing a Successful iAd Campaign, presents the best ways to manage a successful iAd campaign, adding tracking analytics into your ad, measuring user insights, and the targeting options available, to ensure you reach the ideal target audience.
Chapter 10, Adding iAds into Your App, teaches you how to add iAd into an existing application, to begin generating revenue, and intelligently animate banners in and out of view, depending on their availability.
Chapter 11, Tracking Revenue and Fallbacks, shows you how to integrate additional ad solutions when the iAd Network doesn't have an available banner in its inventory. Finally, you'll learn how to analyze the number of ads your app is displaying, and more importantly, how much you're earning!
You’ll need to be a member of the iOS Developer program and have a Mac running Snow Leopard, OS 10.6 or later. We’ll look at getting or updating a Mac and joining the iOS Developer program in the first chapter. It’ll be useful to have an iPhone or iPad to test on, but isn’t vital as you’ll learn how to preview your ads without a device.
This book is for brands, advertisers, and developers who want to create compelling and emotive iAd advertisements that generate revenue and increase brand awareness. You don't need previous experience of creating adverts or apps for iPhone and iPad, as you'll be taken through the entire process of making motion-rich, beautiful ads.
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
Instructions often need some extra explanation so that they make sense, so they are followed with:
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
These are short multiple choice questions intended to help you test your own understanding.
These set practical challenges and give you ideas for experimenting with what you have learned.
You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Duplicate, by copying and pasting, the line that contains CGPoint bannerOrigin and rename bannerOrigin to fallbackBannerOrigin."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "From the right-hand menu, select Set Up iAd Network."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to<[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail<[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at<[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at<[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
iAd is an exciting mobile advertising opportunity from Apple.
In this chapter, we will look at:
Announced by Apple in the summer of 2010, an iAd allows you to directly target customers with amazingly interactive ads integrated into applications purchased on the App Store. Each iAd begins as a small exciting banner on a user's personal device that once activated bursts to fill the screen, giving you, the advertiser, a chance to craft a deeply immersive experience.
Application developers on the Apple App Store designate space within their app for your iAd to be shown, with the banner sitting at the bottom of the screen throughout the use of the app. Often, iAds can be more interesting than the app they're in!
iAds are built into iOS 4.0 and, later, the operating system used by the Apple iPhone, iPod touch, and iPad.
Think of an iAd as a mini-app contained within another third-party application that a user has downloaded from the Apple App Store.
With an iAd, your advertisement is viewed by an audience that:
Apple sets a degree of quality in their products, which is often mirrored in the extensive range of applications available on their App Store. However, mobile advertising is often a jarring and unpleasant experience for the user. Unhappy with this, Apple decided to build a unique advertising platform right into the handsets of millions of users.
In early 2011, Apple announced iAd support for iPad, which gives us full access to a rich interactive multi-touch canvas to promote our brands or products in a way that was previously only imaginable to advertisers.
Many companies using iAds create a promotional video just to show off their ad! You'll sometimes find that you get additional PR opportunities with iAd, as each experience is so dynamic and different people love talking about them.
Each iAd impression can be targeted towards:
Apple manages the entire process of delivering your ads, including hosting them on the iAd Network and wirelessly delivering them to your audience on iOS devices.
Apple allows users to opt out of interest-based ads by visiting http://oo.apple.com/ on their iOS 4.0+ device. This still delivers iAd's to the user, but without any user-specific targeting. Obviously, Apple doesn't publicize this and only a handful of power users ever opt-out.
Mobile advertising isn't a new idea but, until iAd, it was never quite right. It was filled with ringtones, wallpapers, and premium SMS that would unwittingly sign the user up to a subscription service. It was more about publicizing paid mobile media direct to the customer than promoting great brands and products.
In-application advertising is beginning to target more specific brands, but nearly all mobile adverts take you out of the application you're currently in and make it impossible to easily get back to where you just were. Typically, the user is pushed out of the app into the mobile browser, to a webpage that often isn't meant for mobile and lacks interaction and responsiveness for the user. Before iAd, a typical mobile banner would be a plain static strip hidden within a user's app, not an interactive ad built into the core operating system.
On the desktop, most advertising revenue comes from search, but mobile users are using more specific apps for finding the information they want. If you want to find a great place to eat, you're more likely to open up a restaurant directory app than go into the mobile browser and use a search engine. Context-aware applications are becoming the way users find things on mobile. Your iAd intelligently positions itself in these applications, providing relevant, contextual, and exciting marketing opportunities.
Unlike traditional mobile advertising, each iAd provides an in-app interactive advertisement, which doesn't push the user out of the app. Never before have you been able to promote your brand or product with such an immersive experience, interacting with the fingertips of the users.
A study by Nielsen compared Campbell's Soup TV advertising campaign with their iAd mobile advertisement and found that users interacting with the iAd were:
People remember better when there's interactivity with the information that we want them to absorb. Each iAd is given access to deeply immersive device features, from the full multi-touch screen (allowing users to pinch and flick around images of your really cool product close up) to physical movements of the device (allowing them to use a shake to show a random message or fact about your brand), iAds offer an unparalleled opportunity for a compelling, interactive, and memorable experience.
The unique features integrated in an iAd make it possible to let users interact with your brand in several engaging ways, such as the following:
At any time, the user can click on the close button, always in the top-left of an iAd, and get back to the app that they were in, which makes them more comfortable about tapping on an iAd and associates your brand with a positive experience. Here, you can see the close button in a demo ad:
With iAd, Apple has built an experience that simultaneously combines the interactivity of traditional online advertising with the emotive aspects of television advertising.
Check out the Nissan Leaf iAd promotional video (search for Nissan Leaf iAd on a video site such as YouTube); it's an amazing example of inciting emotion within an iAd and demonstrates the vast flexibility of the iAd platform.
An iAd consists of four key parts, which are as follows:
The banner is the first impression of your advert; it's vital that it inspires the user to tap on it and explore all the other great content you've got waiting in your iAd. Banners are identifiable by their small logo in the bottom-right of the banner, as shown in the following screenshot:
The iAd logo increases the chance of the user tapping on your advert, as they know they'll be delivered a rich immersive ad without losing the place of the app they're in.
The banner is typically displayed either at the bottom of the screen or above the tab bar of a user's application, as shown in the following screenshot:
There are two types of banners you can use for your iAd - a static image banner or a dynamic HTML5 banner.
A static image banner is a much more traditional banner and is often chosen because it's quick and simple to create.
Your static banner can either be the size of the banner frame or can be a screen-size static banner with only a slice of the image visible in the banner, revealing the full image when the user taps to view your ad.
An HTML5 dynamic banner opens up much more opportunity for user engagement, as it allows for animated text and graphics. Adding motion and animation to your banner makes it stand out on the user's device, drawing their attention to your ad and increasing the chance they'll tap to find out more about your brand.
With an HTML5 banner you're able to update data in the banner remotely with real-time information, like latest sports scores or stock quotes.
The transition occurs when the user taps the banner to enter your iAd; it softens the entry to the splash page and creates a visual connection between the two. The transition can either be a slide or a reveal.
The slide transition is the most common way of presenting your splash page. It pushes a full color block up from your banner covering the app the user is currently in. A progress bar shows the status of the loading of your splash screen.
You should only use reveal transition if you're using a screen-size static banner. It pushes apart the user interface elements in the users app to reveal your iAd splash screen. The following screenshot shows the reveal transition in an ad that we'll create later in the book:
The splash page is an optional screen; it is shown while the main iAd resources load, in between the user's tapping of your banner and their being able to interact with the core ad unit.
Although the splash page is optional, it's an ideal opportunity to convey your brand message while the resources for your ad load.
Apple estimates you've got 15 seconds to win the user's attention once they've entered your iAd, so an engaging splash page ensures that we keep them happy while they wait.
The splash page can be used to show interesting stats or features about your brand or product before transitioning into the main ad.
Even if you think your iAd is lightweight and won't need time to download, users are often on slow mobile data connections where small ads won't load immediately.
A pre-roll video can also be used in the splash page although, with the lightweight CSS3 animations and styles available, we can apply dynamic effects to images and text that can often mimic video, without the large (and slow) download associated with streaming video.
This is the main part of your iAd where there is a real opportunity to deliver your content in a range of exciting ways. The core ad unit is built up of multiple views; think of these as different pages of a website, each with a range of media and content to excite the user about your brand or product.
The ad unit starts with the root view, which is generally used for navigation, to toggle between the different views within your iAd.
The subpages of the root view offer the chance to provide: dynamic maps showing the location of the user to your nearest store or retailer, amazing 3D interactive video carousels and image galleries, or a blank canvas only limited by your own imagination! Here is a selection of the templates that can be used in your iAd to give you an understanding of the types of the content you can include:
An iAd is essentially a rich dynamic webpage contained within an application a user has installed. For the most part, we don't need to be concerned with what's going on, as the tools Apple provides manage this for us. That having been said, it is good to have an understanding of the magic that powers your iAd.
HTML5 is the underlying technology of the iAd framework. It is based on the future of the web with the next generation of HTML (and mistakenly marketed as including enhancements to JavaScript and CSS). Our iAds can use HTML5 in conjunction with many of the latest features in JavaScript and CSS.
HTML5, the fifth generation of HTML(Hypertext Markup Language), is the content and semantic structure of your page.
Video, audio, and other things that traditionally would require a plug-in, such as Flash (which iOS famously doesn't support), can now be done with HTML5.
For those curious, if you right-click on a webpage and choose View Source, you can look at the underlying HTML that creates the structure and contains the content of that page.
The third revision of CSS (Cascading Style Sheets) allows visual styling in your iAd. With CSS3, styling of rounded corners and background gradients can be done without images, which means that your iAd is lightweight and delivers your brand message much faster to the user. CSS3 has rich animation capacity, which can bring life to your iAd and banner.
CSS3 has smooth, hardware-accelerated 3D effects that you can apply to your iAd assets, combined with animations. Rich 3D motion adds to the interactivity of your ad.
JavaScript is a programming language used to control the interactivity inside your iAd. Whenever tapping or pinching somewhere causes interaction with your iAd, behind the scenes, JavaScript will be controlling this. JavaScript is able to access user location to find local stores and provide location-sensitive promotions. JavaScript can be used to remotely fetch the latest offers and information from your website, using a technology called AJAX to create a dynamic, up-to-date experience.
Each iAd is a folder full of the HTML, CSS, JavaScript, and media used for your banner and ad unit. In the following screenshot, we can see the file structure of a typical iAd:
If you wanted to, you could create an entire iAd using just a text editor to manipulate these files. Luckily, iAd Producer creates and updates these files for us, when we're using it to create our iAd.
The main tool we'll be using to create our iAds is iAd Producer, a simple drag-and-drop tool for building, testing, and distributing amazing interactive iAds.
iAd Producer manages all the HTML5, CSS3, and JavaScript in your iAd without your having to write a single line of code. In the following screenshot, we can see the rich visual interface of iAd Producer:
iAd Producer gives a visual overview of the structure and flow of your iAd. With it, you can add additional subpages and restructure your entire iAd in just a few clicks.
All your media assets are stored in the central asset library, which automatically manages support for high- and low-resolution displays by optimizing assets for the Retina display used in newer Apple iOS devices.
The Retina display is Apple's high-resolution screen found in the iPhone 4 and iPod Touch onwards. It has double the resolution of older devices, giving it such a high pixel density that your eyes are unable to see the individual pixels. Such a vibrant, crisp, sharp screen can be taken full advantage of by your brand in your iAd. To find out more about Retina display, visit http://www.apple.com/ iphone/features/retina-display.html.
We can build entire ads just by dropping images and videos onto motion-rich 3D carousels with iAd Producer's pre-built templates. Menus are auto generated for the user to explore and navigate around your iAd.
iAd Producer makes it easy to apply visual animations and effects to your content, a great way of adding character and excitement to your iAd, without the heavy overhead of video. These animations includes wipes, fades, spinning effects, and cube transitions that can be applied to media items, text, or even entire pages.
To create a visually impacting experience that users are familiar with, iAd Producer includes a rich library of carousels, buttons, audio or video players, and galleries; all these can be added into your iAd with a simple drag-and-drop.
Throughout making your ad, iAd Producer validates and checks your project, identifying common problems, such as images being the incorrect size or format, or you're having forgotten to configure a certain page. This means you can catch issues early and focus on creating your ad.
To extend your iAd's functionality beyond the inbuilt features of iAd Producer, we're able to view, edit, and extend the code it creates to create even cooler stuff like social sharing of your content, quizzes, or competitions.
Once you've finished your iAd, iAd Producer packages and optimizes your assets to reduce the size and time spent, delivering your complete ad experience to the user.
The iOS Simulator is a virtual iPhone or iPad that runs on your Mac's desktop and a quick way of testing on devices that you can't buy or that aren't publicly available yet. It supports most of the features a real device would have, such as orientation and shakes. Orientation allows the device to know when it has been rotated and update the screen content accordingly. Similarly, with shakes, we can update on-screen content when the users shake their device. In the iOS Simulator, we can emulate these rotations and shakes from the menu; unfortunately, shaking or rotating your Mac won't have similar results.
Even though you can test your iAd without a device, it's vital to test on a real iPhone, as an iAd will typically load and work faster in the simulator. This is because the simulator is able to use your entire system resources.
The iAd Tester app is a mobile application you can install on your iPhone, iPod, or iPad, through iTunes. The iAd Tester app is able to remotely connect to iAd Producer on your Mac and lets you test how your iAd will appear in other developers' apps.
To access iAd Producer, the iPhone/iPad simulator, or to test your iAd on a device, you'll need to join the Apple Developer Program.
If you have your own iOS application, Apple has a pre-built iAd package to drive downloads to your app, called iAd for Developers. To use this, you'll need to have an app live on the App Store, then contact Apple through the form available at http://advertising.apple.com/contact/, and choose iAd for Developers, to promote an app. The single page iAd is almost identical to your App Store listing and looks similar to the example, shown as follows:
To access full Apple documentation and iAd tools, you need to be a member of the paid Apple iOS Developer Program. This costs $99 per year and gives you access to iAd Producer, the tool we'll use throughout this book to build some great iAds for your brand.
Don't worry, despite it being called the developer program, you don't need to be a developer or have development skills for the techniques explored in this book.
The Apple software we'll be using in this book requires you to be on a recent version of their Mac OS X operating system and hardware.
If you've already got a Mac it needs to be an Intel Mac, running Mac OS X Snow Leopard, or later.
