Ten przewodnik jest przeznaczony dla wydawców, którzy chcą zarabiać na aplikacji Flutter.
Zintegrowanie pakietu SDK do reklam mobilnych Google z aplikacją Flutter, jest to pierwszy krok w kierunku wyświetlania reklam AdMob i zarabiania. Po zakończeniu integracji możesz wybrać format reklamy, aby uzyskać szczegółowe instrukcje implementacji.
Pakiet SDK do reklam mobilnych Google dla Flutter obsługuje obecnie ładowanie i wyświetlanie banerów reklamowych, pełnoekranowych reklam pełnoekranowych, natywnych oraz reklam z nagrodą.
Wymagania wstępne
- Trzepa 1.22.0 lub nowsza
- Android
- Android Studio 3.2 lub nowszy
- Interfejs API Androida na poziomie 20 lub wyższym
- Ustaw wartość
compileSdkVersion
na 28 lub wyższą
- iOS
- Najnowsza wersja Xcode z włączonymi narzędziami wiersza poleceń
- Zalecane: utwórz konto AdMob i zarejestruj aplikację na Androida lub iOS
Importowanie pakietu SDK do reklam mobilnych
- Dodaj do projektu Flutter wtyczkę Google Mobile Ads SDK do Flutter.
Konfiguracja na poziomie platformy
Android
Aktualizowanie pliku AndroidManifest.xml
Identyfikator aplikacji AdMob musi znajdować się w AndroidManifest.xml
. Jeśli tego nie zrobisz, podczas uruchamiania aplikacji wystąpi błąd.
Dodaj identyfikator aplikacji AdMob zidentyfikowany w interfejsie internetowym AdMob do pliku android/app/src/main/AndroidManifest.xml
aplikacji, dodając tag <meta-data>
o nazwie com.google.android.gms.ads.APPLICATION_ID
. W polu android:value
wpisz identyfikator aplikacji AdMob w cudzysłowach w taki sposób:
<manifest>
<application>
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
<application>
<manifest>
Użyj tej samej wartości value
podczas inicjowania wtyczki w kodzie Dart.
Więcej informacji na temat konfigurowania AndroidManifest.xml
i konfigurowania identyfikatora aplikacji znajdziesz w przewodniku po Androidzie.
iOS
Zaktualizuj plik Info.plist
W pliku ios/Runner/Info.plist
aplikacji dodaj klucz GADApplicationIdentifier
z wartością ciągu identyfikatora aplikacji AdMob zgodnie z definicją w interfejsie internetowym AdMob:
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>
Musisz zainicjować tę samą wartość podczas inicjowania wtyczki w kodzie Dart.
Więcej informacji o konfigurowaniu Info.plist
i konfigurowaniu identyfikatora aplikacji znajdziesz w przewodniku po iOS.
Zainicjuj pakiet SDK do reklam mobilnych
Zanim wczytasz reklamy, upewnij się, że aplikacja zainicjuje pakiet SDK do reklam mobilnych, wywołując pakiet MobileAds.instance.initialize()
, który inicjuje pakiet SDK, i zwraca Future
, który kończy się po zakończeniu inicjowania lub po upływie 30 sekund czasu oczekiwania. Należy to zrobić tylko raz, najlepiej tuż przed uruchomieniem aplikacji.
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// Load ads.
}
}
Wybierz format reklamy
Po zaimportowaniu pakietu SDK do reklam mobilnych możesz wdrożyć reklamę. AdMob oferuje wiele różnych formatów reklam, dzięki czemu możesz wybrać ten, który najlepiej pasuje do Twojej aplikacji.
Baner
Prostokątne reklamy wyświetlane u góry lub u dołu ekranu urządzenia. Banery reklamowe pozostają widoczne na ekranie, gdy użytkownicy korzystają z aplikacji, a po określonym czasie mogą się automatycznie odświeżać. Jeśli dopiero zaczynasz przygodę z reklamami mobilnymi,
Pełnoekranowa
reklamy pełnoekranowe, które zakrywają interfejs aplikacji do momentu ich zamknięcia przez użytkownika. Najlepiej robić to w naturalnych przerwach w wyświetlaniu aplikacji, np. między poziomami gry lub zaraz po ukończeniu zadania.
Wdrażanie reklamy pełnoekranowej
Natywna
Reklamy, które można dostosować do wyglądu i stylu aplikacji. Ty decydujesz, jak i gdzie się wyświetlają, więc ich układ jest bardziej spójny z aplikacją.
Implementowanie reklamy natywnej
Otrzymano
Reklamy, które nagradzają użytkowników za oglądanie krótkich filmów oraz interakcje z reklamami i ankietami. Dobre rozwiązanie do zarabiania na bezpłatnych grach.