Introduction to iAds

Presentation given at iOS DevCamp at pinch/zoom in Seattle

Transcript

1. Confidential pinch/zoom August 21, 2010 Kevin Stewart Geek Wrangler kevin@pinchzoom.com tel. +1 425 802-4922 INTRODUCTION TO IADS
2. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices ADVERTISING BASICS • Advertiser: Create products and services to advertise • Ad Agencies: Develop creative concepts and advertisements • Ad Network: Aggregates and distributes advertisements to publishers • Publishers: Display advertisements to customers • Customers: End users, such as Web site visitors. In the iAd Context • Ad Network: iAd Network (Apple) • Publishers: App Developers (You) THE TRADITIONAL ADVERTISING STACK MODEL DESIGNED FOR PUBLICATIONS SUCH AS NEWSPAPERS. THE BASIC MODEL HAS NOT CHANGED. Advertiser Ad Agencies Ad Network Publishers Customers
3. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices SHOW ME THE MONEY! iTunes Connect • New iAd portal added Registration • “Sign” paid app and iAd agreements Configure Applications • Enable iAds for your app • Toggle between test and live ads • Select target audience (< 17 years old) • Set keyword and/or URL exclusions Monitor Revenue • Total Revenue (last 7 days and today) • Average eCPM (last 7 days and today) • 60% - Developer, 40% - Apple
4. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices IAD FRAMEWORK How it works • App developers integrate an AdBannerView into their app • The iAd framework is responsible for retrieving inventory from the iAd network and displaying banners within the AdBannerView • Ad Units are interactive HTML5 applications that can retrieve information from the Internet and leverage functionality, such as Geolocation APIs iAds are small HTML5 applications that overlay iOS applications when triggered by a user interacting with an in-app banner. The iAd framework encapsulates the mechanics of communicating with Apple’s ad server and providing inventory for display. Developing Ads Is Like Developing Apps You Already Know How To Do This! The iAd framework leverages Web developers’ existing skills and tools. Creating an iAd uses the same workflow as one used to create microsites, only now enhanced by the capabilities of HTML5, CSS3 and JavaScript. #U [QW GODCTM QP ETGCVKPI CP K#F KV¨U UWIIGUVGF VJCV [QW WUG C FGXGNQROGPV RTQEGUU VJCV¨U UKOKNCT VQ VJG HNQY FKCITCO UJQYP KP (KIWTG  (KIWTG  # UWIIGUVGF K#F FGXGNQROGPV RTQEGUU Project kickoff Creative brief & SOW Storyboards Design comps Client review Asset creation Ad build Client review QA Launch 7UG 5VQT[DQCTFU +V¨U TGEQOOGPFGF VJCV [QW ETGCVG UVQT[DQCTFU VQ UJQY GCEJ NC[QWV CPF KPVGTCEVKQP CPF VJG VTCPUKVKQPU DGVYGGP VJGO 7UKPI UVQT[DQCTFU CNNQYU [QW VQ KVGTCVG SWKEMN[ QP VJG FGUKIP CPF VQ ENCTKH[ JQY WUGTU ECP %*#26'4  )GV 5VCTVGF YKVJ K#F &GXGNQROGPV
5. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices How it works • View is added to the view hierarchy (requires a view controller) • Retrieves and displays advertisements from the iAd network • Manages user interaction • A background process runs the ad Benefits • The user is in control • User never leaves the app • Ad is displayed on top of the current app • User dismisses the ad ADBANNERVIEW
6. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices BANNERS How it works • Banners can be on top or bottom and either portrait (320x50) or landscape (480x32) • Banners clicks are caught by container and launches the ad unit • iAd Design Guidelines are geared towards iPhone. No mention of how iAds would work in an iPad context. Responding To The Tap Action • Reduce activity by pausing: • Media Playback • Network Access • Graphic Computation • Save Minimal State • Resume when action completes IAD CONSTRAINS BANNERS IN TERMS OF SIZE AND LOCATION. THE DESIGN GUIDELINES EMPHASIZE PERFORMANCE AND SMOOTH TRANSITIONS FROM BANNER TO AD UNIT VIEWS. 6JG #F 7PKV 6TCPUKVKQP 6JG CF WPKV VTCPUKVKQP IKXGU WUGTU C XKUWCN EQPPGEVKQP DGVYGGP VJG DCPPGT CF CPF VJG URNCUJ RCIG QT EQTG CF WPKV EQPVGPV ;QW FQP¨V YCPV VQ FTCY CVVGPVKQP VQ VJG CF WPKV VTCPUKVKQP KVUGNH DGECWUG [QW YCPV WUGTU VQ HQEWU QP VJG K#F GZRGTKGPEG VJG[¨TG CPVKEKRCVKPI (QT VJKU TGCUQP VJG CF WPKV VTCPUKVKQP KU DQVJ UKORNG CPF DTKGH 6JGTG CTG VYQ V[RGU QH CF WPKV VTCPUKVKQPU [QW ECP WUG VQ NCWPEJ VJG EQTG CF WPKV HTQO VJG DCPPGT CF ! 6JG UNKFG VTCPUKVKQP UNKFGU VJG CF WPKV KPVQ RNCEG HTQO VJG DQVVQO QH VJG UETGGP EQORNGVGN[ EQXGTKPI VJG CRRNKECVKQP 7+ 6[RKECNN[ VJG GNGOGPV VJCV UNKFGU KPVQ RNCEG KU C URNCUJ RCIG DWV KV OKIJV KPUVGCF DG VJG EQTG CF WPKV EQPVGPV ! 6JG TGXGCN VTCPUKVKQP RWUJGU VJG CRRNKECVKQP 7+ CRCTV VQ TGXGCN C UVCVKE HWNNUETGGP ITCRJKE VJCV CRRGCTU VQ GZRCPF HTQO VJG DCPPGT 6JKU UVCVKE ITCRJKE TGOCKPU QPUETGGP XGT[ DTKGHN[ #U UQQP CU RQUUKDNG VJG CF WPKV TGRNCEGU VJG ITCRJKE YKVJ GKVJGT C URNCUJ RCIG QT RTKOCT[ CF EQPVGPV (KIWTG  UJQYU JQY C TGXGCN VTCPUKVKQP ECP FKURNC[ C HWNNUETGGP ITCRJKE CHVGT VJG WUGT VCRU VJG DCPPGT CF (KIWTG  6JG TGXGCN VTCPUKVKQP FKURNC[U VJG TGXGCN ITCRJKE 6JG 5RNCUJ 2CIG +P IGPGTCN CP K#F UJQWNF EQPVCKP C URNCUJ RCIG UQ VJCV WUGTU JCXG UQOGVJKPI VQ XKGY YJKNG VJG CF¨U KPKVKCN KPVGTCEVKQP CUUGVU NQCF KP VJG DCEMITQWPF %*#26'4  7PFGTUVCPF VJG K#F 'ZRGTKGPEG 'NKIKDNG $CPPGT #FU #RRGCT KP VJG K#F (TCOG 9KVJKP CP CRRNKECVKQP¨U FGUKIPCVGF DCPPGT XKGY GNKIKDNG DCPPGT CFU FKURNC[ KPUKFG VJG K#F HTC QH YJKEJ CTG UJQYP KP (KIWTG   6Q DG GNKIKDNG VQ WUG VJG DTCPFGF K#F HTCOG CFU OWUV OGG IWKFGNKPGU CXCKNCDNG UGRCTCVGN[  (KIWTG  6JG K#F HTCOG FGPQVGU C SWCNKV[ GZRGTKGPEG 320 px 480 px 32 px Portrait iAd 50 px iAd 7UKPI VJG K#F HTCOG EQPHGTU C UKIPKHKECPV CFXCPVCIG DGECWUG KV TGRTGUGPVU C DTCPF WUGTU VTWU UGG CP CF KPUKFG VJG K#F HTCOG VJG[ JCXG C IQQF KPFKECVKQP QH VJG SWCNKV[ QH GPICIGOGPV VJG[ $CPPGT #FU *CXG 5RGEKHKE 5K\GU CPF (QTOCVU 6Q HKV YGNN QPUETGGP CPF VQ RGTHQTO YGNN DCPPGT CFU CTG EQPUVTCKPGF KP DQVJ QPUETGGP FKOG UK\G ;QW UJQWNF MGGR VJGUG EQPUVTCKPVU KP OKPF CU [QW FGUKIP [QWT DCPPGT CFU # DCPPGT CF OWUV HKV KPUKFG CP CRRNKECVKQP¨U DCPPGT XKGY 6Q FQ VJKU [QWT DCPPGT CFU UJQW !  Z  RKZGNU HQT WUG KP RQTVTCKV QTKGPVCVKQP !  Z  RKZGNU HQT WUG KP NCPFUECRG QTKGPVCVKQP 'NKIKDNG $CPPGT #FU #RRGCT KP VJG K#F (TCOG ^Š#RRNG+PE#NN4KIJVU4GUGTXGF
7. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices BANNER VIEW LIFECYCLE Retrieving Ads • Ads require network connection • Network conditions and server inventory are dynamic • Ad content comes from iAd server • Ads are targeted - may lead to no inventory Handling Ad Availability • Create banner views offscreen • Animate into view when ad content available • Hide banner views when no ad content available START No Content Content Loaded content cycled error loads content
8. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices NISSAN LEAF IAD
9. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices ADS ARE MOBILE WEB APPS Apple considers iAds to be mini apps. Powered by WebKit, you can create highly engaging experiences using HTML5, CSS3 and JavaScript. Design for Performance • Observe File Size Limits • Use Appropriate File Formats • Format Video to Balance Size and Quality • Use Appropriate Audio Settings for Best Quality • See the iAd Design Guide for more details
10. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices IAD JS iAd JS is a pure JavaScript framework that provides many of the features of UIKit. What You Get • In-ad App Store/iTunes Store purchases • Save as Wallpaper/Save to Photo Album • Inline video and audio • In-ad mapping • Menus and Galleries • CoverFlow • Sharing/Social Networking • Email • Facebook • Twitter (KIWTG  # OCR YKVJ EWUVQO FGVCKNU FKURNC[GF DGNQY +H [QW YCPV VQ FKURNC[ C UGRCTCVG HWNNUETGGP XKGY VJCV CRRGCTU YJGP WUGTU VCR VJG FGVCKN FKUENQUWTG DWVVQP [QW HKTUV PGGF VQ JKFG VJG OCR XKGY 6JGP [QW ECP FKURNC[ C XKGY VJCV RTQXKFGU VJG OCRRGF NQECVKQP¨U FGVCKNU CU YGNN CU YC[U WUGTU ECP KPVGTCEV YKVJ CPF UJCTG VJG KPHQTOCVKQP (QT GZCORNG [QW OKIJV YCPV VQ KPENWFG C ¥VCR VQ ECNN¦ DWVVQP WUKPI VJG tel 74. UEJGOG VQ OCMG KV GCU[ HQT WUGTU VQ ECNN VJG RTQXKFGF RJQPG PWODGT 1T [QW ECP CFF VJG CFFTGUU VQ C PGY GOCKN OGUUCIG VQ OCMG KV GCU[ HQT WUGTU VQ UGPF VJGOUGNXGU QT QVJGTU CP KPHQTOCVKXG GOCKN /QUV KORQTVCPVN[ [QW PGGF VQ RTQXKFG C YC[ HQT WUGTU VQ TGVWTP VQ VJG OCR UETGGP +H [QW FQP¨V FQ VJKU WUGTU JCXG PQ YC[ VQ EQPVKPWG VJG K#F GZRGTKGPEG YJKEJ ECP NGCXG VJGO YKVJ C DCF KORTGUUKQP (KIWTG  UJQYU CP GZCORNG QH C HWNNUETGGP FGVCKN XKGY VJCV RTQXKFGU KPHQTOCVKQP KPVGTCEVKXG EQPVTQNU CPF CP QDXKQWU YC[ VQ TGVWTP VQ VJG RTGXKQWU OCR UETGGP %*#26'4  &GUKIP YKVJ K#F ,5 %QORQPGPVU CPF K2JQPG 15 (GCVWTGU KP /KPF (KIWTG  # HWNNUETGGP FGVCKN XKGY ECP RTQXKFG KP &GXKEG 1TKGPVCVKQP ;QW ECP RTGUGPV [QWT K#F EQPVGPV KP GKVJGT RQTVTCKV QT NCP [QW ECP WUG K#F ,5 HWPEVKQPCNKV[ VQ FGVGEV QTKGPVCVKQP E #NVJQWIJ WUGTU VGPF VQ GZRGEV EQPVGPV VQ CFLWUV YJGP %*#26'4  &GUKIP YKVJ K#F ,5 %QORQPGPVU CPF K2JQPG 15 (GCVWTG
11. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices IAD TESTER The iAd JS Developer SDK includes a tool for testing ads on the iPhone Simulator and your device...iAd Tester. Testing in the Simulator • Install the iAd JS SDK • In the iPhone simulator, drop .ad bundles on the simulator for iAdTester to display the ad Testing on your Device • Install the iAd JS SDK • Drag and drop iAdTester.app onto iTunes and sync to your device • On the File Sharing pane in iTunes, drop a zipped ad bundle into the file table Installation Click on iAdJSDeveloper.mpkg and the installer runs you through the st tion steps. Using the iAdTester Use iAdTester to test your iAds on your device. To install the application drag and drop iAdTester.app onto iTunes. After syncing your device with plication will be installed.  Installing iAdTester on your device Drag the iAdTester-Device/iAdTester.app into iTunes, and then sync it to a device. The first time you run iAdTester youʼll see a dialog confirming that you want to open iAdTester. 
12. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices The Future At some point, Apple will extend iAd to the iPad...this is just the first step. iAd JS points to the future of Mobile Web apps that are as rich as native apps. What’s Next? • Download and install the iAd JS Developer SDK • Study the samples • Build your own ads and/or ad support for iAds to your app Don’t know how to develop for the Mobile Web?
13. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices SHAMELESS PLUG!!! We have over a decade of experience in creating mobile experiences, working with everyone from carriers to device makers to startups. We can safely say we know how to design for the medium better that just about anyone else in the US market. We offer a full service, custom mobile design and development for mobile web, iOS, Android, Blackberry and Windows Mobile.
14. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices WWDC 2010 Session Videos • Session 112: Integrating Ads with iAd • Session 508: Adding Touch and Gesture Detection to Web Pages on iPhone OS • Session 509: Creating Info Graphics with Standard Web Technologies • Session 510: Creating Content with iAd JS, Part 1 • Session 511: Creating Content with iAd JS, Part 2 • Session 512: Using HTML5 Offline Storage
15. Confidential pinch/zoom August 21, 2010 Creating Amazing Experiences for all Mobile Devices Kevin Stewart Geek Wrangler kevin@pinchzoom.com tel. +1 425 802-4922 THANK YOU