Tích hợp Admob vào ứng dụng Android

Giới Thiệu

AdMob là nền tảng quảng cáo trên thiết bị di động cung cấp dịch vụ cho các nhà quảng cáo, nhà xuất bản, đại lý và nhà phát triển ứng dụng. Trang này bao gồm các chính sách áp dụng cụ thể cho các nhà quảng cáo muốn quảng cáo trên nền tảng AdMob. Trong Android để tích hợp quảng cáo Admod vào như thế nào thì bài viết này sẽ làm rõ.

1. Các loại quảng cáo AdMob

Admob hiện tại hỗ trợ 2 loại : Banner và Interstitial.

Banner là dạng quảng cáo chiếm một phần nhỏ màn hình. Interstitial là dạng quảng cáo chiếm toàn bộ màn hình.

2. Tạo Ad Units

Ứng với mỗi banner quảng cáo hay Interstitial sẽ có 1 Id được gọi là Ad Unit. Để có thể tích hợp quảng cáo vào ứng dụng bạn phải tạo đơn vị quảng cáo trên trang chủ Admob.

Các bước làm như sau:

Bước 1: Tạo một tài khoản AdMob nếu chưa có tại: https://apps.admob.com

Bước 2: Chọn sang tab Monetize và nhấn vào Monetize new app

Bước 3: Nhập tên App và chọn nền tảng tích hợp quảng cáo nền tảng (ở đây tôi chọn Android). Và nhấn Add app

Bước 4: Chọn loại quảng cáo vào nhập tên quảng cáo (tên này bạn dùng để quản lý sau khi gắn quảng cáo để xem số lượt view, số lượt click) và nhấn Save.

Bước 5: Đăng kí thành công chúng ta sẽ thấy một chuổi dài như dưới đây thì đó là Ad Unit dùng để tích hợp vào Android.

3. Tạo Project

1. Tạo mới Project trong Android Studio : File ⇒ New Project.

2. Mở file build-gradle (Module: app) và thêm dòng dưới đây vào trong dependencies

    compile ‘com.google.android.gms:play-services-ads:8.4.0’

build.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'

    compile 'com.google.android.gms:play-services-ads:8.4.0'
}

1. Thêm Ad unit IDs vào strings.xml. Mở file strings.xml trong res ⇒ values và thêm ad units cho cả 2 loại banner Banner and Interstitial.

   strings.xml

   <resources>
    <string name="app_name">AdMob</string>
    <string name="title_activity_second_activiy">Interstitial</string>
    <string name="msg_welcome">Welcome to Admob. Click on the below button to launch the Interstitial ad.</string>
    <string name="btn_fullscreen_ad">Show Fullscreen Ad</string>

    <!-- AdMob ad unit IDs -->
    <string name="banner_home_footer">ca-app-pub-0664570763252260/3326522424</string>
    <string name="interstitial_full_screen">ca-app-pub-0664570763252260/1769900428</string>
    </resources>

1. Mở AndroidManifest.xml và thêm các Permission sau :

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.admob">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!--Include the AdActivity configChanges and theme. -->
        <activity
            android:name="com.google.android.gms.ads.AdActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            android:theme="@android:style/Theme.Translucent" />
    </application>

</manifest>

4.1. Tích hợp Banner Ad

Banner chỉ chiếm một phần nhỏ màn hình. Chúng ta sẽ thêm vào bên dưới của main Activity. Để hiển thị banner add, bạn cần sử dụng com.google.android.gms.ads.AdView trong layout :

<com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_home_footer">
    </com.google.android.gms.ads.AdView>

Mở activity_main.xml và thêm Adview vào :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.androidhive.admob.MainActivity">

    <TextView
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/msg_welcome" />

    <Button android:id="@+id/btn_fullscreen_ad"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/btn_fullscreen_ad"/>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_home_footer">
    </com.google.android.gms.ads.AdView>
</RelativeLayout>

Mở MainActivity và chỉnh sửa code như sau :

public class MainActivity extends AppCompatActivity {

    private AdView mAdView;
    private Button btnFullscreenAd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mAdView = (AdView) findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder()
                .build();
        mAdView.loadAd(adRequest);

        btnFullscreenAd = (Button) findViewById(R.id.btn_fullscreen_ad);
        btnFullscreenAd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this, SecondActivity.class));
            }
        });
    }

    @Override
    public void onPause() {
        if (mAdView != null) {
            mAdView.pause();
        }
        super.onPause();
    }

    @Override
    public void onResume() {
        super.onResume();
        if (mAdView != null) {
            mAdView.resume();
        }
    }

    @Override
    public void onDestroy() {
        if (mAdView != null) {
            mAdView.destroy();
        }
        super.onDestroy();
    }
}

Xong. Chạy ứng dụng và bạn sẽ thấy một banner nhỏ góc dưới màn hình