AdMob

Firebase

  |   9 min czytania
(Firebase-Ads 17.1)

Wprowadzenie

Google AdMob jest mobilną platformą reklamową, która umożliwia wyświetlanie ukierunkowanych reklam w aplikacji co przekłada się na generowanie przychodów. Reklamy pochodzą od milionów reklamodawców Google w czasie rzeczywistym i dzięki współpracy z usługą Analytics pozwalają na maksymalizowanie zysków poprzez automatyczny wybór dopasowanej treści dla danego użytkownika. Reklamy mogą być wyświetlane jako banery reklamowe, reklamy pełnoekranowe, reklamy wideo czy reklamy natywne.

Konfiguracja

Aby wykorzystać możliwości AdMob należy stworzyć konto AdMob (lub użyć konta testowego) oraz dodać wpis z kluczem AdMob App ID w pliku AndroidManifest. Następnie dokonać inicjalizacji usługi w aplikacji poprzez wywołanie metody MobileAds.initialize i wybrać format reklamy oraz jego miejsce w widoku.

<!-- The value below is for testing purpose -->
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-3940256099942544~3347511713"/>
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    //start once e.g. when app launch
    MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713") //testing key
}

Baner reklamowy

Banery reklamowe (banner ads) są prostokatnymi graficznymi lub tekstowymi reklamami zajmującymi część widoku aplikacji. Pozostają na ekranie, gdy użytkownik wchodzi w interakcje z aplikacją i odświeżają się automatycznie po pewnym czasie. Aby dodać reklamę banerową do aplikacji należy umieścić widok AdView w docelowym układzie oraz załadować reklamę oraz opcjonalnie dodać obiektu słuchacza AdListener w kodzie.

<!-- choose adSize from one of: BANNER, LARGE_BANNER, MEDIUM_RECTANGLE, 
FULL_BANNER, LEADERBOARD, SMART_BANNER or define custom size 
adUnitId as below is for developer testing purpose -->
<com.google.android.gms.ads.AdView
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:id="@+id/adView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ads:adSize="BANNER"
    ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
class AdViewActivity : AppCompatActivity() {

    private lateinit var adView: AdView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_adview)
        MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713")

        setAdView()
    }

    private fun setAdView() {
        adView = findViewById<AdView>(R.id.adView)
        val adRequest = AdRequest.Builder().build()
        adView.loadAd(adRequest)

        //setup listener methods
        adView.adListener = object: AdListener() {
            override fun onAdLoaded() {
                //some additional action when ad loaded
            }
            override fun onAdFailedToLoad(errorCode: Int) {}
            override fun onAdOpened() {}
            override fun onAdLeftApplication() {}
            override fun onAdClosed() {}
        }
    }
}

Reklama pełnoekranowa

Reklamy pełnoekranowe (inerstitial ads) obejmują cały układ widoku i przeważnie wyświetlane są w ekranach przejścia przepływu akcji między czynnościami lub naturalnymi przerwami (np. po ukończeniu zadania) tam gdzie użytkownik spodziewa się przerwy w działaniu. Użytkownik może wybrać reklamę przechodząc do miejsca docelowego lub zamknąć i powrócić do bieżącej akcji. Zanim reklamy pełnoekranowe zostaną użyte w aplikacji należy zastanowić się czy są właściwym typem reklam dla aplikacji i czy nie zakłócają jej działania oraz w przypadku implementacji zadbać o zwolnienie i wznowienie zasobów oraz akcji. Aby dodać reklamę pełnoekranową należy stworzyć obiekt InterstitialAd, załadować i wywołać reklamę oraz opcjonalnie dodać obiekt słuchacza AdListener.

class InterstitialAdActivity : AppCompatActivity() {

    private lateinit var interstitialAd: InterstitialAd

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_interstitial_ad)
        MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713")

        setInterstitialAd()
        setButtonClickListener()
    }

    private fun setInterstitialAd() {
        interstitialAd = InterstitialAd(this)
        interstitialAd.adUnitId = "ca-app-pub-3940256099942544/1033173712"
        interstitialAd.loadAd(AdRequest.Builder().build())

        //setup listener methods
        interstitialAd.adListener = object: AdListener() {
            override fun onAdClosed() {
                //reload new one
                interstitialAd.loadAd(AdRequest.Builder().build())
                //start action from point where was paused
            }
            override fun onAdOpened() {
                //pause some action
            }
        }
    }

    private fun setButtonClickListener() {
        //show ad on some action like click finish button
        finishButton.setOnClickListener {
            if (interstitialAd.isLoaded) {
                interstitialAd.show()
            } 
            else {
                //ad still not loaded    
            }
    }
}

Reklama wideo

Reklamy wideo (video ads) wyświetlane są w trybie pełnoekranowym i w ramach obejrzenia całości przyznają użytkownikowi pewien profit w aplikacji. Aby dodać reklamę wideo należy pobrać instancję typu RewarderVideoAd, zaimplementować obiekt słuchacza RewarderVideoAdListener oraz zadbać o właściwe zarządzanie obiektem reklam w cyklu życia komponentu.

class RewarderVideoAdActivity : AppCompatActivity(), RewardedVideoAdListener {

    private lateinit var rewardedVideoAd: RewardedVideoAd

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_rewarder_video_ad)
        MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713")
        setRewarderVideoAd()
    }

    private fun setRewarderVideoAd() {
        rewardedVideoAd = MobileAds.getRewardedVideoAdInstance(this)
        rewardedVideoAd.rewardedVideoAdListener = this
        rewardedVideoAd.loadAd("ca-app-pub-3940256099942544/5224354917", AdRequest.Builder().build())
    }

    //setup RewarderVideoAd instance in lifecycle methods
    override fun onPause() {
        super.onPause()
        rewardedVideoAd.pause(this)
    }

    override fun onResume() {
        super.onResume()
        rewardedVideoAd.resume(this)
    }

    override fun onDestroy() {
        super.onDestroy()
        rewardedVideoAd.destroy(this)
    }

    //implement RewardedVideoAdListener methods
    override fun onRewarded(reward: RewardItem) {
        //reward user based on RewardItem instance
    }
    override fun onRewardedVideoAdLeftApplication() {}
    override fun onRewardedVideoAdClosed() {
        //reload new one
        rewardedVideoAd.loadAd("ca-app-pub-3940256099942544/5224354917", AdRequest.Builder().build())
    }
    override fun onRewardedVideoAdFailedToLoad(errorCode: Int) {}
    override fun onRewardedVideoAdLoaded() {
    	//check ad has been showed already
    	if(rewardedVideoAd.isLoaded)
            rewardedVideoAd.show()
    }
    override fun onRewardedVideoAdOpened() {}
    override fun onRewardedVideoStarted() {}
    override fun onRewardedVideoCompleted() {}
}

Reklama natywna

Reklamy natywne (native ads) składają się z zasobów reklamowych, które są wyświetlane za pośrednictwem standardowych natywnych widoków interfejsu użytkownika. Dzięki temu treść otrzymanych reklam może być sformatowana w taki sposób, aby pasowała do szaty graficznej aplikacji. Aby dodać reklamę natywną należy przy użyciu instancji AdLoader uzyskać obiekt UnifiedNativeAd zawierający zasoby reklamowe, zaimplementować obiekty słuchaczy, stworzyć kontrolki widoku osadzone w rodzicu UnifiedNativeAdView, a następnie wyświetlić załadowaną reklamę w widoku. Reklamy natywne wspierają także materiały wideo oraz obsługę preferencji niepożądanej treści.

class NativeAdActivity : AppCompatActivity() {

    private lateinit var adLoader: AdLoader

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_native_ad)
        MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713")
        loadUnifiedNativeAd()
    }

    private fun loadUnifiedNativeAd() {
        adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
            .forUnifiedNativeAd { ad : UnifiedNativeAd ->
                showUnifiedNativeAd(parentView, ad)
            }
            .withAdListener(object: AdListener() {
                //add custom behavior to listener methods
                override fun onAdClicked() {
                    //some action
                }
            })
            .withNativeAdOptions(NativeAdOptions.Builder() //setup builder
                .setImageOrientation(ORIENTATION_PORTRAIT)
                .build())
            .build()

        adLoader.loadAd(AdRequest.Builder().build()) //or use loadAds to load multiple items
    }

    private fun showUnifiedNativeAd(parent: ViewGroup, ad: UnifiedNativeAd) {
        //inflate view where adView root should be UnifiedNativeAdView instance
        val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val adView = inflater.inflate(R.layout.custom_ad_layout, null) as UnifiedNativeAdView

        //use ad data into some views like text or image
        val headlineView = adView.findViewById<TextView>(R.id.adHeadline)
        headlineView.text = ad.headline
        adView.headlineView = headlineView

        //clear parent and put new add
        adView.setNativeAd(ad)
        parent.removeAllViews() 
        parent.addView(adView)
    }
}