顯示具有 admob 標籤的文章。 顯示所有文章
顯示具有 admob 標籤的文章。 顯示所有文章

2023年3月22日 星期三

Flutter 開發筆記 - 使用 Admob - BannerAds 版型 @ Flutter 3.7.7, Android Studio 2022.1.1 Patch2, macOS 13.2.1




首先,透過 Android Studio 創建一個專案,預設跑 Build -> Flutter -> Build APK 可以正常跑東西:

flutter build apk

💪 Building with sound null safety 💪

Running Gradle task 'assembleRelease'...                           87.4s
✓  Built build/app/outputs/flutter-apk/app-release.apk (16.8MB).
Process finished with exit code 0

但是在 Project 視窗內,對 android 目錄 -> 右鍵 -> Flutter -> Open Android module in Android Studio 則是會看到:

Unsupported Java. 
Your build is currently configured to use Java 19.0.2 and Gradle 7.5.

Possible solution:
 - Open Gradle wrapper settings, change `distributionUrl` property to use compatible Gradle version and reload the project

解法就是 File -> Project structure -> Project

Android Gradle Plugin Version: 7.4.2
Gradle Version: 7.6.1

就可以很正常搞定了。

接著處理添加 Admob 的用法,參考 developers.google.com/admob/flutter/quick-start 流程:
  1. 先到原本的 flutter 專案上,選擇 terminal -> flutter pub add google_mobile_ads ,運行一陣子後,回去看 pubspec.yaml 可以看到添加了 google_mobile_ads: ^2.3.0 項目
  2. 對 flutter 專案的 Project 視窗內的 android 目錄 -> 右鍵 -> Flutter -> Open Android module in Android Studio ,進入開發單純的 Android 專案一樣,要進行 AndroidManifest.xml 設定,主要是添加 Admob 使用的資訊

<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-3940256099942544~3347511713"/>
    <application>
<manifest>

接著用 Build -> Rebuild Project 會看到數個錯誤訊息:
  • Cannot fit requested classes in a single dex file (# methods: 68231 > 65536) 
  • Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:google_mobile_ads]
解法就是在 build.gradle (Module: app) 更新:

defaultConfig {
    // ...

    minSdk 19
    multiDexEnabled true

    // ...
}

// ...

dependencies {
    // ...

    implementation "androidx.multidex:multidex:2.0.1"

    // ...
}

接著就是 Sync 以及 Build -> Rebuild Project ,更多資訊須參考 developer.android.com/studio/build/multidex?hl=zh-tw

3. 回到 flutter 專案上,編輯 lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const MyApp());
}

// ...

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  final BannerAd myBanner = BannerAd(
    // https://developers.google.com/admob/android/test-ads?hl=zh-cn#sample_ad_units
    // https://developers.google.com/admob/ios/test-ads?hl=zh-cn#demo_ad_units
    adUnitId: Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716' ,
    size: AdSize.banner,
    request: const AdRequest(),
    listener: BannerAdListener(
      // Called when an ad is successfully received.
      onAdLoaded: (Ad ad) => print('Ad loaded.'),
      // Called when an ad request failed.
      onAdFailedToLoad: (Ad ad, LoadAdError error) {
        // Dispose the ad here to free resources.
        ad.dispose();
        print('Ad failed to load: $error');
      },
      // Called when an ad opens an overlay that covers the screen.
      onAdOpened: (Ad ad) => print('Ad opened.'),
      // Called when an ad removes an overlay that covers the screen.
      onAdClosed: (Ad ad) => print('Ad closed.'),
      // Called when an impression occurs on the ad.
      onAdImpression: (Ad ad) => print('Ad impression.'),
    ),
  );

  @override
  void initState() {
    super.initState();
    myBanner.load();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              width: myBanner.size.width.toDouble(),
              height: myBanner.size.height.toDouble(),
              child: AdWidget(ad: myBanner),
            ),
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

更多資訊: developers.google.com/admob/flutter/banner?hl=zh-cn (英文版顯示 404 NOT Found)

以上就順玩流程,但仍有很多細節未處理,像是廣告沒 load 到,或是 App 或 View/ViewController 切換時廣告資源釋放等等。

2021年10月26日 星期二

Python 筆記 - 使用 AdSense / AdMob API 製作 Dashboard

約莫經營流量變現三年多,大部分的工作都是靠 adsense/admob 網站就夠用了,但如果要整合到其他儀表板的話,就必須靠 AdMob/AdSense API 來撈點資料。

原先一直只靠 AdSense API 做事,但是舊版 AdSense API 在 2021-10-12 下線了,接著新版 AdSense API 就不在有 AdMob 數據,因此需要分開存取。

筆記瑣事:
  • 使用 Python3 開發,並安裝套件相關套件
    • google-api-python-client
    • google-auth-oauthlib
  • AdSense 跟 AdMob 授權的 Scope 是分開的
    • 'https://www.googleapis.com/auth/admob.readonly'
    • 'https://www.googleapis.com/auth/adsense.readonly'
  • Google 專案必須分別啟用 AdSense Management api 跟 AdMob api 使用權
  • Google 專案的憑證,只需使用 "OAuth 2.0 用戶端 ID" ,並採用 "電腦版應用程式" 即可
  • AdSense 跟 AdMob API 輸出的 DATE 欄位的格式不同
    • "2021-10-26"
    • "20211026"
因此,若要符合之前舊版 Adsense 的輸出,需要分別使用 AdSense api v2 跟 AdMob API v1 來整理數據,例如先將 AdMob 收益用日期作為關鍵字紀錄,接著輸出 AdSense 來源時,在計算當日營收時,再順便查表累計 AdMob 收益。

完整程式碼:

    result = service.accounts().reports().generate(
        account=account_id,
        dateRange='CUSTOM',
        startDate_year=startDate['year'],
        startDate_month=startDate['month'],
        startDate_day=startDate['day'],
        endDate_year=endDate['year'],
        endDate_month=endDate['month'],
        endDate_day=endDate['day'],
        metrics=output['data']['metrics'],
        dimensions=output['data']['dimensions'],
        currencyCode="USD",
        reportingTimeZone="ACCOUNT_TIME_ZONE",
    ).execute()

AdMob API 片段程式碼:

    result = service.accounts().networkReport().generate(
        parent=account_id,
        body= {
            'reportSpec': {
                'dateRange' : {
                    'startDate': output['data']['startDate'],
                    'endDate': output['data']['endDate'],
                },
                'dimensions': output['data']['dimensions'],
                'metrics': output['data']['metrics'],
                'localizationSettings': {
                    'currencyCode': 'USD',
                    'languageCode': 'en-US',
                },
            },
        },
    ).execute()

2021年2月3日 星期三

Flutter 開發文件之 iOS 與 Android 實作筆記 - 使用 Admob 以 Interstitial ads 為例


關於 flutter 使用 Admob 的架構,可參考網路上數篇文章:
此例筆記 iOS & Android 的設定方式,並且記錄碰到的錯誤訊息。

Android app 設定方式:

1. 更新 flutter_app/pubspec.yaml 添加 dependencies (記得要運行 flutter pub get)

firebase: ^8.0.0
firebase_admob: ^0.11.0+1

2. 安置從 Firebase 建立專案時得到的 google-services.json 檔案,擺在 flutter_app/android/app/ 中

3. 更新 flutter_app/android/build.gradle 的 buildscript -> dependencies 設定

//classpath 'com.android.tools.build:gradle:3.5.0'
// 為了修正錯誤訊息:error: unexpected element <queries> found in <manifest>.
classpath 'com.android.tools.build:gradle:4.0.0'
classpath 'com.google.gms:google-services:4.3.3'

4. 更新 flutter_app/android/gradle/wrapper/gradle-wrapper.properties 的 gradle 版本至 6.1.1

#為了修正錯誤訊息:Minimum supported Gradle version is 6.1.1. Current version is 5.6.2. If using the gradle wrapper
distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip

5. 增加 flutter_app/app/build.gradle 的 apply 項目

apply plugin: 'com.google.gms.google-services'

6. 更新 flutter_app/android/app/src/main/AndroidManifest.xml 添加 meta data (僅範例程式數值)

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713"/>

7. 更新 flutter_app/lib/main.dart (此改自於範例程式,讓 add Button 可以產生一個插頁廣告)

iOS app 設定方式:

1. 更新 flutter_app/pubspec.yaml 添加 dependencies(記得要運行 flutter pub get)

firebase: ^8.0.0
firebase_admob: ^0.11.0+1

2. 安置從 Firebase 建立專案時得到的 GoogleService-Info.plist ,用 Xcode 打開專案,把 GoogleService-Info.plist 拖拉擺入跟 Info.plist 的同階目錄位置。

% open flutter_app/ios/Runner.xcworkspace
% ls flutter_app/ios/Runner/GoogleService-Info.plist

3. 更新 Info.plist 內容,添加資訊 GADApplicationIdentifier 等資訊(僅範例程式數值)

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

4. 更新 Podfile ,上方添加 platform :ios, '10.0'

為了修正錯誤訊息: 
Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile.

5. 更新 flutter_app/lib/main.dart (此改自於範例程式,讓 add Button 可以產生一個插頁廣告)

如此就收工啦!而 flutter_app/lib/main.dart 內容如下:

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_admob/firebase_admob.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
    keywords: <String>['flutterio', 'beautiful apps'],
    contentUrl: 'https://flutter.io',
    childDirected: true,
    nonPersonalizedAds: true,
  );

  InterstitialAd _interstitialAd;

  InterstitialAd createInterstitialAd() {
    return InterstitialAd(
      adUnitId: InterstitialAd.testAdUnitId,
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        print("InterstitialAd event $event");
      },
    );
  }

  @override
  void initState() {
    super.initState();
    FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
    //_interstitialAd = createInterstitialAd()..load();
  }

  @override
  void dispose() {
    _interstitialAd?.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    _interstitialAd?.dispose();
    _interstitialAd = createInterstitialAd()..load()..show();
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

2016年2月27日 星期六

Android 開發筆記 - 在 Android Studio 環境上,使用 Google Analytics SDK / Admob SDK

使用 Android Studio 1.5.1 版,原先參考 Google 官方文件,結果一直爆問題 :P 其中 Google Analytics SDK 跟 Admob SDK 都會需要 Google Service 的環境,而碰到 Google Service 的引入不斷出錯,以下單純記錄修正流程。

參考 https://developers.google.com/analytics/devguides/collection/android/v4/https://developers.google.com/admob/android/app 資訊,更新 AndroidManifest.xml 位置,添加:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>


接著在 build.gradle (Project) 添加:

classpath 'com.google.gms:google-services:2.0.0-alpha6'

在 build.gradle (app) 添加:

dependencies {
//...
compile 'com.google.android.gms:play-services-analytics:8.4.0'
}
apply plugin: 'com.google.gms.google-services'


結果一直出錯:Gradle sync failed: Unable to load class 'com.android.sdklib.repository.FullRevision'. 這種很 general 的訊息。

甚至跑去看看 googlesample 檔案,如:
分別查看:build.gradleapp/build.gradle 和 gradle/wrapper/gradle-wrapper.properties 三個檔案。

改採用:

dependencies {
        //classpath 'com.android.tools.build:gradle:1.5.0'
        classpath 'com.android.tools.build:gradle-experimental:0.4.0'

        classpath 'com.android.tools.build:gradle:2.0.0-beta5'
        classpath 'com.google.gms:google-services:2.0.0-beta5'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
}


仍是一樣的現象,最後靠直覺,嘗試亂改 classpath 'com.google.gms:google-services:1.0.0+' 後,會看到錯誤訊息引導說,可以查看 metadata 得知有哪些版本可用:

https://jcenter.bintray.com/com/google/gms/google-services/maven-metadata.xml

就這樣,直接挑沒有 beta/alpha 字眼:

dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'
        classpath 'com.android.tools.build:gradle-experimental:0.4.0'
        classpath 'com.google.gms:google-services:1.5.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
}


以及 gradle/wrapper/gradle-wrapper.properties 使用:

#distributionUrl=https\://services.gradle.org/distributions/gradle-2.8-all.zip distributionUrl=https\://services.gradle.org/distributions/gradle-2.11-all.zip

如此一來,終於解掉編譯問題。接續就可以參考 Google Analytics SDK/Admob SDK 的文件,例如產生 google-services.json 以及 AnalyticsApplication extends Application 等用法等。

最後,我自己的用法:

AndroidManifest.xml:
...
<application
        android:name=".MyApplication"
        ...
>
...
</application>


MyApplication.java:
import android.app.Application;
import com.google.android.gms.analytics.GoogleAnalytics;
import com.google.android.gms.analytics.Tracker;
public class MyApplication extends Application {
        private Tracker mTracker;
        synchronized public Tracker getDefaultTracker() {
               if (mTracker == null) {
                      GoogleAnalytics analytics = GoogleAnalytics.getInstance(this);
                      // To enable debug logging use: adb shell setprop log.tag.GAv4 DEBUG
                      //mTracker = analytics.newTracker(R.xml.global_tracker);
                      mTracker = analytics.newTracker("UA-XXXXXXX-XX");
               }
               return mTracker;
        }
}


build.gradle (app):
dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'

        compile 'com.android.support:appcompat-v7:23.2.0'
        compile 'com.android.support:design:23.2.0'

        // Google Analytics & Admob
        compile 'com.google.android.gms:play-services:8.4.0'
        compile 'com.google.android.gms:play-services-ads:8.4.0'
        compile 'com.google.android.gms:play-services-analytics:8.4.0'
}


build.gradle (Project):
dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'
        classpath 'com.android.tools.build:gradle-experimental:0.4.0'

        classpath 'com.google.gms:google-services:1.5.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
}


MainActivity.java:
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        MyApplication application = (MyApplication) getApplication();
        Tracker mTracker = application.getDefaultTracker();
        mTracker.setScreenName("main");
        mTracker.send(new HitBuilders.ScreenViewBuilder().build());
        //...
}

2014年7月27日 星期日

iOS 開發筆記 - Admob SDK: Must set the rootViewController property of GADBannerView before calling loadRequest

又有一陣子沒把玩 Admob 了 XD 每次把玩的方式不同,這次看到錯誤訊息:
<Google> Must set the rootViewController property of GADBannerView before calling loadRequest:
以及:
didFailToReceiveAdWithError:Error
其他訊息:
<Google> To get test ads on this device, call: request.testDevices = @[ GAD_SIMULATOR_ID ];
現況與解法:

@interface YourViewController() <GADBannerViewDelegate>

@property (nonatomic, strong) GADBannerView *banner;

@end

@implementation YourViewController

- (GADBannerView *)banner {
    if (!_banner) {
        // 468*60
        _banner = [[GADBannerView alloc] initWithAdSize:kGADAdSizeFullBanner];
        _banner.adUnitID = @"ca-app-pub-###############";
    }
    return _banner;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.banner.frame = CGRectMake(0, self.view.frame.size.height > self.view.frame.size.width ? self.view.frame.size.width - 60 : self.view.frame.size.height - 60, 468, 60 );
    self.banner.delegate = self;
    [self.view addSubview:self.banner];

    // <Google> Must set the rootViewController property of GADBannerView before calling loadRequest:
    self.banner.rootViewController = self;

    GADRequest* req = [GADRequest request];
    // <Google> To get test ads on this device, call: request.testDevices = @[ GAD_SIMULATOR_ID ];
    req.testDevices = @[GAD_SIMULATOR_ID];
    [self.banner loadRequest:req];


    NSLog(@"self.banner: %@", self.banner);
}

- (void)adViewDidReceiveAd:(GADBannerView *)view
{
    NSLog(@"adViewDidReceiveAd");
}

- (void)adView:(GADBannerView *)view
didFailToReceiveAdWithError:(GADRequestError *)error
{
    NSLog(@"didFailToReceiveAdWithError:%@", error);
}

@end

iOS 開發筆記 - 使用 CocoaPods 與 Google Admob iOS SDK

繼續用 CocoaPods 練功,順手弄一下 Google Mobile Admob iOS SDK 6.10.0 版(changyy/GoogleMobileAdsSdkiOS.git),有需要可以從這邊使用:

$ vim Podfile
pod 'GoogleMobileAdsSdkiOS', :git => 'https://github.com/changyy/GoogleMobileAdsSdkiOS.git'


不過在 GoogleMobileAdsSdkiOS.podspec 這邊關於 authors, license 填寫反而是個問題 Orz 不知哪邊有好的介紹方式,暫時參考前輩們的用法。

此次撰寫 GoogleMobileAdsSdkiOS.podspec 時,花了不少時間在測試,主因是想要用 symbolic link 來管理版本更新的,例如建立 GoogleMobileAdsSdkiOS-latest 指向最新版版,藉以降低 podspec 的更動頻率:

project:
  • $ ln -s GoogleMobileAdsSdkiOS-6.10.0 GoogleMobileAdsSdkiOS-latest
podspec:
  • s.source_files = 'GoogleMobileAdsSdkiOS-latest/*.{h}'
  • s.preserve_paths = 'GoogleMobileAdsSdkiOS-latest'
  • s.xcconfig = { 'LIBRARY_SEARCH_PATHS' => "$(PODS_ROOT)/GoogleMobileAdsSdkiOS/GoogleMobileAdsSdkiOS-latest/**" }
結果發現 s.preserve_paths 就只會 copy 那則 symbolic link 而已,也指不到東西 XD  雖然可以添加  GoogleMobileAdsSdkiOS-6.10.0 來解決,但 s.source_files 那邊似乎不支援 symbolic link 用法,直接去看 Pods/Header 沒法看到產生,這導致無法正常 import header 來使用,最後只好作罷,變成每次更新版本時,要更動與版本敘述相關的資料了( s.source_files、s.preserve_paths 跟 s.scconfig)