본문으로 건너뛰기
cccskills
무료GitHub에 공개

integrating-google-ads

Integrates Google Mobile Ads (AdMob) into Flutter using google_mobile_ads v7.x with Banner, Interstitial, Rewarded, and Native ad formats. Use this skill whenever implementing app monetization, adding AdMob ads to Flutter, fixing ad loading or display errors, managing ad lifecycle (preload/dispose), preventing memory leaks from undisposed ads, handling GDPR/ATT consent flows, troubleshooting AdMob dashboard integration, or any time the words 'AdMob', 'google_mobile_ads', 'banner ad', 'interstitial', 'rewarded ad', 'native ad', or 'ad monetization' appear in the request. Supports Android (GMA SDK 24.9+) and iOS (GMA SDK 12.14+).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구Google Ads

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md9.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Flutter Ads Implementation (google_mobile_ads v7.x)

Goal

Integrate Google Mobile Ads securely and efficiently. Prevent memory leaks by strictly managing AdWidget lifecycles and ensure high fill-rates by pre-loading full-screen ads before they are needed.

Instructions

1. Core Native Initialization

Before calling any Dart code, the native manifests must be explicitly configured with the Google Mobile Ads application ID.

Android (android/app/src/main/AndroidManifest.xml) Add the <meta-data> tag immediately inside the <application> tag.

<manifest>
    <application>
        <!-- Use TEST ID for development: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="YOUR_ANDROID_APP_ID"/>
    </application>
</manifest>

iOS (ios/Runner/Info.plist) Add GADApplicationIdentifier.

<key>GADApplicationIdentifier</key>
<!-- Use TEST ID for development: ca-app-pub-3940256099942544~1458002511 -->
<string>YOUR_IOS_APP_ID</string>

Flutter (main.dart) Initialize the SDK eagerly before runApp.

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

2. Test Ad Unit IDs (CRITICAL)

Always use Google's predefined test ad units during development and testing. Using your own live production IDs on test devices will lead to immediate AdSense account suspension.

Android Test IDs:

  • Banner: ca-app-pub-3940256099942544/6300978111
  • Interstitial: ca-app-pub-3940256099942544/1033173712
  • Rewarded: ca-app-pub-3940256099942544/5224354917
  • Native Advanced: ca-app-pub-3940256099942544/2247696110

iOS Test IDs:

  • Banner: ca-app-pub-3940256099942544/2934735716
  • Interstitial: ca-app-pub-3940256099942544/4411468910
  • Rewarded: ca-app-pub-3940256099942544/1712485313
  • Native Advanced: ca-app-pub-3940256099942544/3986624511

3. Banner Ads (Inline Constrained Widgets)

Banner ads are rendered organically within the Flutter widget tree using an AdWidget.

Implementation Pattern:

  1. Maintain the BannerAd instance in the State.
  2. Load it during initState.
  3. Track an _isLoaded flag to render the AdWidget only when ready.
  4. CRITICAL: Call .dispose() in dispose.
class BannerAdWidget extends StatefulWidget {
  @override
  _BannerAdWidgetState createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  final String adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/6300978111'
      : 'ca-app-pub-3940256099942544/2934735716';

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  void _loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner, // e.g. 320x50
      listener: BannerAdListener(
        onAdLoaded: (ad) => setState(() => _isLoaded = true),
        onAdFailedToLoad: (ad, err) {
          ad.dispose(); // CRITICAL
        },
      ),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose(); // CRITICAL
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_bannerAd != null && _isLoaded) {
      return SafeArea(
        child: SizedBox(
          width: _bannerAd!.size.width.toDouble(),
          height: _bannerAd!.size.height.toDouble(),
          child: AdWidget(ad: _bannerAd!),
        ),
      );
    }
    return const SizedBox.shrink();
  }
}

4. Interstitial Ads (Full-Screen Transitions)

Interstitials are full-screen overlays. They MUST be pre-loaded before the user triggers the logic that displays them.

Implementation Pattern:

class InterstitialManager {
  InterstitialAd? _interstitialAd;

  // Utilize the test IDs defined above during development
  final String adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/1033173712'
      : 'ca-app-pub-3940256099942544/4411468910';

  /// Call this when the user ENTERS the screen/level.
  void loadAd() {
    InterstitialAd.load(
      adUnitId: adUnitId,
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              ad.dispose(); // CRITICAL
              loadAd(); // Pre-load the next one immediately
            },
            onAdFailedToShowFullScreenContent: (ad, error) {
              ad.dispose(); // CRITICAL
            },
          );
          _interstitialAd = ad;
        },
        onAdFailedToLoad: (err) => print('Failed to load: $err'),
      ),
    );
  }

  /// Call this when the user leaves the screen/finishes a level.
  void showAd(VoidCallback onDone) {
    if (_interstitialAd != null) {
      // Define a one-time wrapper if you need logic strictly after dismissal
      _interstitialAd!.fullScreenContentCallback?.onAdDismissedFullScreenContent = (ad) {
        ad.dispose();
        loadAd();
        onDone(); // Resume app logic
      };
      _interstitialAd!.show();
      _interstitialAd = null; // Prevent showing twice
    } else {
      onDone(); // Fallback if ad wasn't loaded
    }
  }
}

5. Rewarded Ads (Value-Exchange)

Used for giving users points/lives in exchange for watching a video. Similar lifecycle to Interstitials but requires secure reward handling.

Implementation Pattern:

RewardedAd? _rewardedAd;

void _loadRewardedAd() {
  RewardedAd.load(
    adUnitId: Platform.isAndroid 
        ? 'ca-app-pub-3940256099942544/5224354917' 
        : 'ca-app-pub-3940256099942544/1712485313',
    request: const AdRequest(),
    rewardedAdLoadCallback: RewardedAdLoadCallback(
      onAdLoaded: (ad) {
        ad.fullScreenContentCallback = FullScreenContentCallback(
          onAdDismissedFullScreenContent: (ad) {
            ad.dispose();
            _loadRewardedAd(); // Reload
          },
        );
        _rewardedAd = ad;
      },
      onAdFailedToLoad: (err) {},
    ),
  );
}

void _showRewardedAd() {
  if (_rewardedAd != null) {
    _rewardedAd!.show(
      // CRITICAL: Handle the reward logic here
      onUserEarnedReward: (AdWithoutView ad, RewardItem reward) {
        print('User earned: ${reward.amount} ${reward.type}');
        // Grant virtual currency
      },
    );
    _rewardedAd = null;
  }
}

6. Native Ads (Seamless Integration)

Native ads match the look and feel of your app. Google now provides NativeTemplateStyle to avoid writing complex custom Java/Swift factories unless absolutely necessary.

NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;

void _loadNativeAd() {
  _nativeAd = NativeAd(
    // Utilize the test IDs defined above during development
    adUnitId: Platform.isAndroid 
        ? 'ca-app-pub-3940256099942544/2247696110' 
        : 'ca-app-pub-3940256099942544/3986624511',
    request: const AdRequest(),
    // Use predefined templates for zero native code
    nativeTemplateStyle: NativeTemplateStyle(
      templateType: TemplateType.medium,
      mainBackgroundColor: Colors.white,
      cornerRadius: 10.0,
      callToActionTextStyle: NativeTemplateTextStyle(
        textColor: Colors.white,
        backgroundColor: Colors.blue,
        style: NativeTemplateFontStyle.bold,
        size: 16.0,
      ),
    ),
    listener: NativeAdListener(
      onAdLoaded: (ad) => setState(() => _nativeAdIsLoaded = true),
      onAdFailedToLoad: (ad, error) {
        ad.dispose();
      },
    ),
  )..load();
}

// In build method:
if (_nativeAdIsLoaded && _nativeAd != null)
  ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 320, // minimum recommended width
      minHeight: 320, // minimum recommended height
      maxWidth: 400,
      maxHeight: 400,
    ),
    child: AdWidget(ad: _nativeAd!),
  )

Constraints

  • Memory Leaks: Always call .dispose() on any ad instance inside onAdFailedToLoad, onAdDismissedFullScreenContent, or the parent StatefulWidget's dispose() method. Failure to do so degrades app performance significantly.
  • Initialization Timing: Never attempt to call Ad.load() prior to awaiting MobileAds.instance.initialize().
  • Test Ad Units: Always use the predefined Google Test Ad Unit IDs while in development. Using live production IDs against test devices leads directly to AdSense account suspension.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Declarative animation patterns using flutter_animate v4.5.x with composable effects (fade, scale, slide, shimmer, shake, blur), GLSL fragment shaders, and scroll-synchronized animations. Use this skill for adding UI animations and transitions, building staggered or sequenced effects, creating custom animation effects, fixing animation jank or performance issues, implementing shimmer loading states, or adding scroll-driven animations. Supports delays, curves, adaptive effects, and easy extension method chaining (.animate()).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Dart 3 modern features (through 3.10) and Effective Dart best practices including records, patterns, sealed classes, dot shorthands, null-aware collection elements, and wildcard variables. Use when adopting Dart 3.7+ syntax, using dot shorthands for enums or static members, using null-aware elements in lists or maps, using wildcard _ parameters, improving code quality, or reviewing Dart code conventions.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Expert-level guidance for Flutter production applications: architecture decisions (Clean/Layered/Hexagonal/Feature-First), advanced state management (BLoC/Riverpod/GetX), performance optimization (eliminating jank, memory profiling, reducing rebuild overhead), code review with design pattern enforcement, scalability assessments, native platform integration (MethodChannel/EventChannel/FFI), complex UI challenges (custom render objects, slivers), testing strategies (unit/widget/integration/golden), CI/CD pipeline architecture, build optimization, and accessibility compliance. Triggers: 'architecture decision', 'design pattern', 'performance issue', 'code review', 'production problem', 'scaling concerns', 'best practices', 'technical debt', 'refactoring strategy'. Essential for complex enterprise apps, critical production debugging, architectural refactors, or when choosing between competing technical approaches.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Builds SEO-friendly web applications with Dart using the Jaspr framework. Use when creating Dart-based websites, blogs, or landing pages requiring semantic HTML output; implementing server-side rendering (SSR) or static site generation (SSG); adding Tailwind CSS via jaspr_tailwind; routing with jaspr_router; testing components with jaspr_test; or building full-stack Dart web apps where Flutter Web's canvas rendering is unsuitable.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

shadcn_flutter UI component library for building accessible, themed Flutter interfaces. Use when integrating shadcn components, configuring design system theming, or building consistent widget layouts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Configures Codemagic CI/CD pipelines for Flutter using `codemagic.yaml`. Use when setting up automated Flutter builds on Codemagic, configuring iOS code signing without Fastlane Match, deploying to App Store Connect or Google Play from Codemagic, caching pub dependencies in Codemagic, setting up encrypted environment variable groups, running tests with Codemagic's test dashboard, or choosing between Codemagic and GitHub Actions + Fastlane for a Flutter CI/CD pipeline.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Poorgramer-Zack의 스킬 모두 보기

이 스킬의 문제 신고