Hướng dẫn tích hợp quảng cáo Google AdMob vào Flat List trong React Native

Giới thiệu

Quảng cáo là một phần quan trọng trong việc tạo ra nguồn thu nhập cho ứng dụng di động của bạn. Trong bài hướng dẫn này, chúng ta sẽ đi từ bước đăng ký tài khoản Google AdMob cho đến việc tích hợp quảng cáo Google AdMob vào một Flat List trong ứng dụng React Native của bạn.

Bước 1: Đăng ký tài khoản Google AdMob

1. Truy cập Trang Đăng ký AdMob: Mở trình duyệt và truy cập Trang đăng ký AdMob.
2. Đăng nhập hoặc Đăng ký Tài khoản Google: Đăng nhập hoặc tạo một tài khoản Google mới.
3. Tạo Một Tài Khoản AdMob: Sau khi đăng nhập, bắt đầu quá trình tạo tài khoản AdMob bằng cách nhấp vào nút "Bắt đầu".
4. Nhập Thông Tin Cơ Bản: Điền thông tin cơ bản và xác nhận điều khoản sử dụng.
5. Thêm Ứng Dụng Của Bạn: Thêm ứng dụng của bạn vào AdMob để nhận Ad Unit ID.
6. Chọn Định Dạng Quảng Cáo: Chọn định dạng quảng cáo bạn muốn hiển thị.
7. Nhận Ad Unit ID: Mỗi loại quảng cáo sẽ có một Ad Unit ID riêng. Nhấp vào "Quản lý Ad Unit" để nhận Ad Unit ID cho từng loại quảng cáo.

Bước 2: Cài Đặt Thư Viện react-native-google-mobile-ads

1. Cài đặt Thư viện: Mở terminal và chạy lệnh npm install react-native-google-mobile-ads.
2. Link Thư viện: Chạy lệnh react-native link react-native-google-mobile-ads để link thư viện với dự án.

Bước 3: BannerAd component

import { useTheme } from '@rneui/themed';
import { memo, useMemo } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
import { View } from './Themed';

interface BannerAdProps {
  every?: number;
  leadingItem: any;
  data: any[];
}

const windowHeight = Dimensions.get('window').height;

const adUnitId = __DEV__ ? TestIds.BANNER : 'YOUR_REAL_AD_UNIT_ID';

function BannerAd({ every, leadingItem, data }: BannerAdProps) {
  const { theme } = useTheme();
  const leadingItemIndex = data.indexOf(leadingItem);

  const shouldShow = useMemo(() => {
    let nbr = every ?? 7;

    if (leadingItemIndex % nbr === 0) return true;
    return false;
  }, [every]);

  if (!shouldShow) return null;

  return (
    <View style={styles(theme).container}>
      <BannerAd size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} unitId={adUnitId} />
    </View>
  );
}

const BannerAdComponent = memo(BannerAd);

const styles = (theme: any) =>
  StyleSheet.create({
    container: {
      marginLeft: -windowHeight * 0.01,
      marginBottom: windowHeight * 0.008,
      paddingBottom: 10,
      borderBottomWidth: 1,
      borderBottomColor: theme?.colors?.divider,
      backgroundColor: theme?.colors?.background,
    },
  });

export default BannerAdComponent;

Bước 4: Tích Hợp Quảng Cáo vào Flat List trong React Native

1. Sử dụng Component FeedBannerAd: Sử dụng component FeedBannerAd đã được cung cấp trong hướng dẫn.
2. Truyền Ad Unit ID vào Component: Thay thế 'YOUR_REAL_AD_UNIT_ID' trong component FeedBannerAd bằng Ad Unit ID thực tế từ AdMob.
3. Tích Hợp vào Flat List:

import React from 'react';
import { FlatList } from 'react-native';
import BannerAdComponent from './đường-dẫn-đến-component';
// ...

const YourComponent = () => {
  // ... (Khởi tạo dữ liệu và các biến cần thiết)

  return (
    <FlatList
      data={yourDataArray}
      renderItem={({ item }) => (
        <View>
          {/* Hiển thị mục */}
        </View>
      )}
      keyExtractor={(item) => item.id.toString()}
      ItemSeparatorComponent={({ leadingItem }) => (
        <BannerAdComponent leadingItem={leadingItem} data={yourDataArray} every={10} />
      )}
    />
  );
};

export default YourComponent;

Vậy là chúng ta đã tích hợp được các banner quảng cáo xen kẽ giữa các item trong một list mà không làm khó chịu người dùng như đặt ở các vị trí như là footer.

Hy vọng bài viết này có ích với anh em.