Tworząc aplikacje dla telefonów iPhone i tabletów iPad decydujemy się tym samym na udostępnianie ich za pośrednictwem sklepu AppStore. W momencie publikacji programu mamy wówczas możliwość określenia ceny, w jakiej będzie on sprzedawany. Możemy także udostępnić nasz program za Free. Na pewno wielu użytkowników ucieszy się wtedy bardzo. Jednakże przecież przygotowanie programu nas kosztuje... Samo utrzymanie konta developerskiego wiąże się ze stałą, roczną opłatą. Dlatego wielu programistów decyduje się na udostępnienie swoich aplikacji za darmo, jednak umieszczając w nich reklamy. Użytkownik jest wówczas zadowolony, gdyż dostaję aplikację za darmo. Programista ma tez możliwość zarobienia jakiś pieniędzy za pośrednictwem reklam. W tym wpisie pokażę jak tego dokonać krok po kroku.

Decydując się na wyświetlanie reklam w swoich programach mamy do dyspozycji dwóch dostawców: Apple i Google. Z własnego doświadczenia wiem, że reklamy od Apple wyświetlają się dla polskich użytkowników bardzo rzadko. Zapewne związane jest to z mała liczbą firm współpracujących z Apple i pozycjonujących swoje produkty w naszym rejonie. Sprawa wygląda znacznie lepiej w przypadku Google. Dlatego w tym wpisie pokażę w jaki sposób dodać reklamy tej firmy w naszych aplikacjach.

• Pierwszą czynnością jaką musimy zrobić jest rejestracja w serwisie http://www.admob.com/.
• Po zarejestrowaniu się w podanej stronie i zalogowaniu się na swoje konto wybieramy z menu Sites & Apps opcję Add Site/App. Na stronie, która się wówczas pokaże wybieramy iPhone App.
• Pokaże się formularz nowej aplikacji. Musimy w nim podać tytuł naszego programu, adres URL do sklepu AppStore, gdzie się on znajduje oraz określić jego kategorię i opis. Na koniec wybieramy schemat kolorystyczny i wciskamy przycisk Continue.
• Pokaże się strona informującą o dodaniu aplikacji do naszego panelu. Z tego miejsca będziemy mogli także pobrać AdMob iOS SDK. Klikamy zatem na tym przycisku i pobieramy SDK na nasz komputer.
• Zanim jeszcze będziemy mogli przejść do środowiska Xcode potrzebujemy tzw. Publisher ID naszej aplikacji. Dlatego klikamy jeszcze raz w menu Sites & Apps. Na liście naszych aplikacji odnajdujemy tę, którą przed momentem dodaliśmy i klikamy na Manage Settings. Pokaże się nowa strona a w niej odnajdziemy wspomniane ID. Możemy stąd przejść także na zakładkę App Settings, gdzie możemy zawsze zmodyfikować różne parametry reklamy.

Przyszła pora na implementację reklam w samej aplikacji. Otwieramy zatem projekt, w którym chcemy dodać obsługę reklam. W przykładzie, na którym będę się opierał, nasz projekt nosi nazwę P002 i składa się z jednego widoku wyświetlającego rysunek (splash z mojego programu Fitness MHR). Stworzona jest także właściwość rysunek zapewniająca dostęp do tego rysunku. Po uruchomieniu aplikacja ta wygląda jak na rysunku poniżej.

• Rozpakujemy pobrane SDK do dowolnego katalogu.
• Tworzymy nową grupę w naszym projekcie. W tym celu klikamy prawy klawisz myszy na liście plików i z menu wybieramy New Group. Nadajemy grupie nazwę AdMobSDK. Następnie klikamy na niej prawy klawisz myszy i z menu wybieramy Add Files do P002. Pokaże się okno umożliwiające wskazanie plików, jakie mają zostać dodane do naszego projektu. Zaznaczamy wszystkie pliki z folderu zawierającego pobrane SDK, które rozpakowaliśmy wcześniej, upewniamy się, że zaznaczona jest opcja Copy items to destination group's folder (if need) i klikamy Add.

Obsługa reklam wymaga dodania do naszego projektu kilku frameworków. W tym celu zaznaczamy nasz projekt w menu z listą plików i przechodzimy do zakładki Build Phases. Rozwijamy w niej grupę Link Binary With Libraries. Klikamy następnie w ikonę + i dodajemy frameworki: 1. AudioToolbox 2. MessageUI 3. SystemConfiguration 4. CoreGraphics

To wszystko co musieliśmy wykonać z naszym projektem. Możemy teraz przejść do dodawania reklamy w poszczególnych widokach. W naszym przykładzie przechodzimy do jedynego widoku, który mamy z wyświetlanym rysunkiem.

• Otwieramy plik nagłówkowy P002ViewController.h i dodajemy w nim jedną zmienną typu GADBannerView oraz deklarację pliku nagłówkowego GADBannerView.h. Plik ten powinien wyglądać zatem tak:

#import <UIKit/UIKit.h>
#import "GADBannerView.h"

@interface P002ViewController : UIViewController {
    IBOutlet UIImageView *rysunek;
    
    GADBannerView *bannerView_;
}

@property (nonatomic, retain) IBOutlet UIImageView *rysunek;

@end

• Przechodzimy do pliku P002ViewController.m i w funkcji viewDidLoad dodajemy obsługę naszej reklamy. W funkcji viewDidUnload zwalniamy pamięć przydzielonej zmiennej bannerView_. Cały plik powinien wyglądać tak:

#import "P002ViewController.h"

@implementation P002ViewController

@synthesize rysunek;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //tworzymy widok reklamy - określamy jego położenie
    bannerView_ = [[GADBannerView alloc] initWithFrame:CGRectMake(0.0,0.0,GAD_SIZE_320x50.width,GAD_SIZE_320x50.height)];
    //podajemy nasze ID aplikacji
    bannerView_.adUnitID = @"XXXXX";
    bannerView_.rootViewController = self;
    [bannerView_ loadRequest:[GADRequest request]];   
    [self.view addSubview:bannerView_];
    
    //pomniejszamy widok rysunku robiąc miejsce na reklame
    rysunek.frame=CGRectMake(0, 
                             GAD_SIZE_320x50.height, 
                             rysunek.frame.size.width, 
                             rysunek.frame.size.height-GAD_SIZE_320x50.height);
    
}

- (void)viewDidUnload
{
    [bannerView_ release];
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

• Przeanalizujemy kolejne kroki jakie się wykonują w metodzie viewDidLoad. Na początku tworzymy widok naszej reklamy. Ponieważ chcemy, by wyświetlała się ona na samej górze widoku naszej aplikacji określiliśmy jej współrzędne na (0,0). Do określenia szerokości i wysokości użyliśmy zapisów GAD_SIZE_320x50.width i GAD_SIZE_320x50.height. W kolejnym kroku przypisaliśmy nasze ID aplikacji oraz określiliśmy rootViewController. Następnie wykonujemy zapytanie do serwera aby pobrać reklamę, po czym dodajemy ją do widoku, w którym chcemy ją wyświetlić. Ponieważ reklama pojawi się na górze, zmniejszamy widoczny tam rysunek tak, by był cały widoczny.

Nasz program jest już w pełni sprawny i po uruchomieniu wygląda tak:

Nasza aplikacja ma pewną wadę. Co się stanie, kiedy Google nie udostępni nam żadnej reklamy lub nie będziemy mieli połączenia z internetem, przez co reklamy nie będą mogły być pobierane? W takich sytuacjach w miejscu reklamy będzie widoczny pusty obszar. Dlatego lepszym rozwiązaniem jest pokazywanie reklam tylko wtedy, kiedy się faktycznie załadują. W tym celu, w pliku nagłówkowym dodajemy obsługę protokołu GADBannerViewDelegate, czyli plik powinien wyglądać tak:

#import <UIKit/UIKit.h>
#import "GADBannerView.h"

@interface P002ViewController : UIViewController 
 <GADBannerViewDelegate>
{
    IBOutlet UIImageView *rysunek;
    
    GADBannerView *bannerView_;
}

@property (nonatomic, retain) IBOutlet UIImageView *rysunek;

@end

• W metodzie viewDidLoad dodajemy linię wskazującą klasę implementującą dodany protokół, usuwamy linię zmieniającą wymiar rysunku (ma się wyświetlać na pełny ekran), dodajemy linię usuwającą delegata w metodzie viewDidUnload oraz dodajemy metodę adViewDidReceiveAd.

#import "P002ViewController.h"

@implementation P002ViewController

@synthesize rysunek;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //tworzymy widok reklamy - określamy jego położenie
    bannerView_ = [[GADBannerView alloc] initWithFrame:CGRectMake(0.0,0.0,GAD_SIZE_320x50.width,GAD_SIZE_320x50.height)];
    //podajemy nasze ID aplikacji
    bannerView_.adUnitID = @"XXXXX";
    bannerView_.rootViewController = self;
    [bannerView_ setDelegate:self];
    [bannerView_ loadRequest:[GADRequest request]];   
    [self.view addSubview:bannerView_];
    
    
}

- (void)adViewDidReceiveAd:(GADBannerView *)bannerView {
    if (bannerView.tag==1) return;
    bannerView.tag=1;
    [UIView beginAnimations:@"BannerSlide" context:nil];
    //pomniejszamy widok rysunku robiąc miejsce na reklame
    rysunek.frame=CGRectMake(0, 
                             GAD_SIZE_320x50.height, 
                             rysunek.frame.size.width, 
                             rysunek.frame.size.height-GAD_SIZE_320x50.height);
    bannerView.frame = CGRectMake(0.0,
                                  0.0,
                                  bannerView.frame.size.width,
                                  bannerView.frame.size.height);
    [UIView commitAnimations];
}

- (void)viewDidUnload
{
    bannerView_.delegate = nil;
    [bannerView_ release];
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

Teraz po uruchomieniu aplikacji widoczny będzie cały czas pełny rysunek. Dopiero po pobraniu reklamy wywołana zostanie metoda adViewDidReceiveAd, która wyświetli reklamę i pomniejszy rysunek widoczny w widoku. Dokona tego w sposób animowany. Ponieważ reklama może być wczytywana kilkukrotnie, wspomniana metoda może być również wiele razy wywoływana. Dlatego w dwóch pierwszych liniach zabezpieczamy się przed tym korzystając w właściwości Tag.

SDK dostarczane przez Google posiada jeszcze inne metody pozwalające na dokładniejsze reakcje w różnych sytuacjach. Pozwala także na dokładniejsze precyzowanie profilu użytkownika podając jego płeć, datę urodzenia, czy współrzędne geograficzne. Podając te dane (jeśli mamy do nich dostęp) sprawiamy, że reklamy będą bardziej spersonalizowane. Dlatego zachęcam do analizy dokumentacji.

• Tags
• ·
• ios
• ·
• reklamy
• ·
• google
• ·
• admob
• ·
• iphone
• ·
• ipad