Startleitfaden

In diesem Leitfaden erfahren Sie, wie Sie ein neues iOS-Projekt erstellen, das Google Mobile Ads SDK einbinden und die erste Banneranfrage ausführen.

Voraussetzungen

DFP-Bannerbeispiel herunterladen

Neues Projekt erstellen

Zunächst erstellen Sie ein neues Projekt in Xcode. Wenn Xcode noch nicht ausgeführt wird, öffnen Sie die App.

Neues Xcode-Projekt erstellen

Gehen Sie zu File > New > Project (Datei > Neu > Projekt). Wählen Sie unter "iOS Application" (iOS-Anwendung) Single View Application (Anwendung mit Einzelansicht) aus und klicken Sie auf Next (Weiter).

Projekt benennen

Geben Sie dem Projekt den Namen "DFPBannerExample". Wählen Sie unter "Language" (Programmiersprache) "Swift" oder "Objective-C" aus. Klicken Sie anschließend auf Next (Weiter).

Speicherort auswählen

Wählen Sie einen Speicherort für das Projekt aus und klicken Sie auf Create (Erstellen).

Build des neuen Projekts erstellen und Projekt ausführen

Wenn Sie einen Simulator verwenden möchten, gehen Sie zu Product > Destination (Produkt > Ziel) und wählen Sie einen iPhone-Simulator aus. Wählen Sie nun Product > Run (Produkt > Ausführen) aus, um zu prüfen, ob der Build Ihrer App fehlerfrei erstellt und die App ausgeführt wird. Vorläufig ist in der App nur ein leerer weißer Bildschirm zu sehen. Content wird in den nächsten Schritten hinzugefügt.

SDK in das Xcode-Projekt einbinden

Es gibt zwei Möglichkeiten, um das Google Mobile Ads SDK Ihrem Xcode-Projekt hinzuzufügen:

Mit CocoaPods

Podfile erstellen

Erstellen Sie im Verzeichnis mit der Datei DFPBannerExample.xcodeproj die Datei Podfile. Sie enthält Folgendes:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'

target 'DFPBannerExample' do
  pod 'Google-Mobile-Ads-SDK', '~> 7.8'
end

"pod install" ausführen

Führen Sie auf dem Computer pod install im gleichen Verzeichnis wie Podfile aus. Schließen Sie DFPBannerExample.xcodeproj nach Abschluss der Installation und öffnen Sie DFPBannerExample.xcworkspace.

Jetzt sollte in den Projektdateien ein Projekt Pods mit dem Verzeichnis Pods/Google-Mobile-Ads-SDK enthalten sein.

Neuen Build des Projekts erstellen

Erstellen Sie einen neuen Build und führen Sie das Projekt aus. In der App ist weiterhin nur ein weißer Bildschirm zu sehen, doch wird jetzt auf das Google Mobile Ads SDK verwiesen. Sie können nun mit dem Erstellen der ersten Banneranfrage fortfahren.

Manuell, unter Verwendung des SDK-Downloads

Wenn Sie das Google Mobile Ads SDK noch nicht haben, laden Sie es von der Downloadseite herunter und entpacken Sie es.

Framework hinzufügen

Klicken Sie mit der rechten Maustaste auf das Projekt "DFPBannerExample" und wählen Sie Add Files To "DFPBannerExample" (Dateien zu "DFPBannerExample" hinzufügen) aus.

Fügen Sie GoogleMobileAds.framework hinzu.

Neuen Build des Projekts erstellen

Erstellen Sie einen neuen Build und führen Sie das Projekt aus. Zu sehen ist noch immer nur ein weißer Bildschirm. Allerdings ist jetzt in der Xcode-Konsole auch ein Protokoll enthalten, aus dem die verwendete Version des Google Mobile Ads SDK hervorgeht.

Die erste Banneranfrage

Ihr Projekt enthält jetzt einen Verweis auf das SDK. Nun fügen Sie ihm Banneranzeigen hinzu.

DFPBannerView kann auf dem Storyboard oder mit Code erstellt werden. Da Layouts im Allgemeinen auf dem Storyboard definiert werden, wird in diesem Leitfaden die Storyboard-Methode beschrieben.

DFPBannerView auf dem Storyboard hinzufügen

Öffnen Sie Main.storyboard. Suchen Sie in der Object library (Objektbibliothek) unten rechts nach UIView und ziehen Sie ein UIView-Element in "View Controller" (Ansichtsteuerung). Weisen Sie dann dieser Ansicht im Identity inspector oben rechts die "Custom Class" (benutzerdefinierte Klasse) DFPBannerView zu.

Einschränkungen für DFPBannerView hinzufügen

Definieren Sie die folgenden Einschränkungen für DFPBannerView: am unteren Bildschirmrand zentriert und Größe 320 x 50.

Wählen Sie die Ansicht aus und klicken Sie auf das Anheften-Symbol am unteren Bildschirmrand. Fügen Sie unten am Banner die Einschränkung Spacing to nearest neighbor (Abstand zum nächsten Nachbarn) mit dem Wert 0 hinzu. Dadurch wird die Ansicht am unteren Bildschirmrand angeheftet.

Klicken Sie auch die Einschränkungen für Breite und Höhe an und geben Sie die Werte 320 bzw. 50 ein. Damit wird die Größe der Ansicht festgelegt.

Klicken Sie nun links vom Symbol Anheften auf das Symbol Ausrichten und fügen Sie eine Beschränkung für Horizontal Center in Container (Im Container horizontal zentrieren) mit dem Wert 0 hinzu.

Nachdem Sie Änderungen an den Einschränkungen vorgenommen haben, können Sie eine Vorschau der Positionierung der Ansicht anzeigen, indem Sie auf das Symbol Resolve Auto Layout Issues (Probleme mit automatischem Layout beheben) rechts von Anheften klicken und Update frames (Rahmen aktualisieren) auswählen.

Das Banner ist jetzt richtig positioniert.

Verweis auf DFPBannerView in den Code einfügen

Für DFPBannerView ist ein Verweis im Code erforderlich, damit Anzeigen in die Ansicht geladen werden können. Öffnen Sie den Assistant Editor: View > Assistant Editor > Show Assistant Editor (Ansicht > Assistant Editor > Assistant Editor anzeigen). Im Assistant Editor muss die Datei ViewController.h zu sehen sein. Halten Sie die Ctrl-Taste gedrückt, klicken Sie auf DFPBannerView und ziehen Sie den Cursor auf ViewController.h. Bei einem Swift-Projekt führen Sie die Schritte von oben aus, fügen jedoch in die Datei ViewController.swift einen Verweis auf DFPBannerView ein.

Xcode generiert nun automatisch eine Property und verknüpft sie. Nennen Sie die Property "bannerView" und klicken Sie auf Connect (Verknüpfen).

Objective-C

ViewController.m
#import <UIKit/UIKit.h>

@import GoogleMobileAds;

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet DFPBannerView  *bannerView;

@end

Swift

ViewController.swift
import UIKit
import GoogleMobileAds

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: DFPBannerView!

} 

Um Kompilierungsfehler zu vermeiden, fügen Sie in ViewController.h noch @import GoogleMobileAds ein bzw. import GoogleMobileAds in ViewController.swift, damit der Compiler erkennt, dass DFPBannerView eine gültige Klasse ist.

Anzeigen in DFPBannerView laden

Fügen Sie zum Abschluss in ViewController.m bzw. ViewController.swift Code ein, mit dem eine Anzeige in die Banneransicht geladen wird.

Objective-C

ViewController.m
- (void)viewDidLoad {
  [super viewDidLoad];

  NSLog(@"Google Mobile Ads SDK version: %@", [DFPRequest sdkVersion]);
  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[DFPRequest request]];
}

Swift

ViewController.swift
override func viewDidLoad() {
  super.viewDidLoad()

  print("Google Mobile Ads SDK version: \(DFPRequest.sdkVersion())")
  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.loadRequest(DFPRequest())
}

Nehmen Sie diese drei Änderungen vor:

  1. Legen Sie in der Methode viewDidLoad eine Anzeigenblock-ID für das Banner fest. Sie müssen schließlich auf der DFP-Benutzeroberfläche Ihre eigene Werbebuchung trafficken, diese Werbebuchung als Ziel für einen Anzeigenblock angeben und die Anzeigenblock-ID in Ihrer App verwenden. Zu Testzwecken können Sie jedoch das Beispiel einer Anzeigenblock-ID von oben verwenden. Diese wird für eine Testwerbebuchung getraffickt.

  2. Legen Sie den Root View Controller als Controller zur Aufnahme der DFPBannerView fest. Mithilfe des View Controller wird nach dem Klick auf die Anzeige ein Overlay präsentiert.

  3. Rufen Sie mit einem DFPRequest-Objekt loadRequest: für DFPBannerView auf.

App ausführen

Erstellen Sie einen Build der App und führen Sie sie aus. Dieses Mal sehen Sie am unteren Bildschirmrand ein Testbanner.

Sie haben damit die erste Anzeigenanfrage fertiggestellt.

Das fertige Beispiel auf GitHub ansehen

Objective-C

Swift

Sehen Sie sich die vollständige Implementierung des Bannerbeispiels auf GitHub an:

Objective-C Swift

Weitere Informationen

Im Leitfaden zu Interstitial-Anzeigen erfahren Sie mehr über Vollbild-Interstitial-Anzeigen.

Informationen zum Optimieren der Bannerimplementierung finden Sie in den folgenden Leitfäden:

FAQ

Ich verwende CocoaPods. Wie aktualisiere ich das SDK?
Führen Sie auf dem Computer pod update in dem Verzeichnis aus, in dem sich Podfile befindet.
Wie erhalte ich eine DFP-Anzeigenblock-ID?
Das Format der DFP-Anzeigenblock-ID ist /networkCode/adUnitName. Sie können die Anzeigenblock-ID in DFP generieren. Melden Sie sich dazu zunächst in Ihrem DFP-Konto an. Gehen Sie auf dem Tab Inventar zu dem Anzeigenblock und klicken Sie auf Tags erstellen. Sie finden den Werbenetzwerkcode für Ihr Konto auch auf dem Tab Admin unter Werbenetzwerkeinstellungen.
Weshalb erhalte ich immer den folgenden Fehler: "Invalid unknown request error: Cannot determine request type. Is your ad unit id correct?"
Überprüfen Sie, ob Ihre Anzeigenblock-ID richtig ist. Sie muss folgendes Format haben: /<network_code>/<ad_unit_path>

Feedback geben zu...

SDK for DFP Users on iOS