👋

[Flutter]Application Tracking Transparency対応方法

2 min read

こんにちは、daisukeです。😉
iOS 14.5以降では、IDFAを使用する場合、App Tracking Transparency(以下、「ATT」)への対応が必須となりました。
今回はATTの実装方法を書いていきます。
間違っていた場合はコメントで指摘していただけると幸いです。

以下、導入方法となります。


パッケージ

https://pub.dev/packages/app_tracking_transparency

インストール

コマンドラインからインストールする場合:
flutter pub add app_tracking_transparency

pubspec.yamlに追加する場合:

pubspec.yaml
dependencies:
  app_tracking_transparency: ^2.0.1

実装

インストールが完了したら、iOSのファイルを編集します。
今回追加するコードです。

<key>NSUserTrackingUsageDescription</key>
<string>許可すると、最適化された広告が表示されます。</string>

以下のように実装します。

ios/Runner/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

<!-- 中略 -->
	<key>NSUserTrackingUsageDescription</key>
	<string>許可すると、最適化された広告が表示されます。</string>
    
</dict>
</plist>

以上、iOSの設定です。

続いてはFlutterの実装です。
こちらのattCheck()でATTの設定の取得とダイアログの表示を行います。

import 'package:app_tracking_transparency/app_tracking_transparency.dart';
  Future<void> attCheck() async {
	//ATT設定取得
    final status = await AppTrackingTransparency.trackingAuthorizationStatus;
	//ATTが設定されていない場合実行
    if (status == TrackingStatus.notDetermined) {
      await Future.delayed(const Duration(milliseconds: 200));
	//ダイアログ表示
      await AppTrackingTransparency.requestTrackingAuthorization();
    }
  }

今回はFutureBuilderを使ってText Widgetが読み込まれる前にATTの確認を行います。

 
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ATT Example'),
      ),
      body: FutureBuilder(
          //ATT確認メゾットを呼び出します。
          future: attCheck(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              // ATT確認中
              return const Center(
                child: CircularProgressIndicator(
                  semanticsLabel: 'Loading',
                ),
              );
            }
            //ATTの設定が完了次第、Text Widgetが表示されます。
            return const Center(
              child: Text('確認完了'),
            );
          }),
    );

実装すると以下のように表示されます。

https://github.com/tk-daisuke/ATT_Example.git