将 Google AdMob 添加到 Expo Apps



import mobileAds from 'react-native-google-mobile-ads';

// Go inside your component/function

// Initialize Google Mobile Ads SDK
useEffect(() => {
    (async () => {
      // Google AdMob will show any messages here that you just set up on the AdMob Privacy & Messaging page
      const { status: trackingStatus } = await requestTrackingPermissionsAsync();
      if (trackingStatus !== 'granted') {
        // Do something here such as turn off Sentry tracking, store in context/redux to allow for personalized ads, etc.
      }

      // Initialize the ads
      await mobileAds().initialize();
    })();
}, [])

我们现在准备制作我们的第一个广告！

制作横幅广告

横幅广告是将广告插入应用的最简单方法之一，不会严重影响用户体验。您可以轻松地在视图/组件中的自然断点处插入它们。

要在您的应用中插入横幅广告，您必须先在 Google AdMob 上创建一个。对于 iOS 和 Android 应用，请前往每个应用 -> 广告单元 -> 添加广告单元 -> 选择横幅广告。

您可以为广告指定任意名称并根据您的喜好调整高级设置。

您将在下一阶段使用广告 ID。广告 ID与应用 ID不同。广告 ID 的结构始终为ca-app-pub-12345678910/12345678910。区分两者的一个简单方法是，应用 ID 以 ~ 结尾，而广告 ID 以 / 结尾。

首先，安装 Expo 设备才能显示正确的横幅：npx expo install expo-device。

接下来，让我们创建一个特殊的组件来保存我们的横幅广告，以便我们可以轻松地在应用程序的任何位置重复使用它。

InlineAd.tsx创建一个名为(或)的新文件InlineAd.jsx并使用类似下面的代码。

通过使用isAdLoaded和视图样式，我们可以最大限度地减少广告未加载时应用程序上显示的空白空间。

请记住，您应该将广告 ID 放入环境变量中。以下虚假 ID 仅供显示。



// InlineAd.tsx

import { View } from 'react-native';
import * as Device from 'expo-device';
import React, { useState } from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const iosAdmobBanner = "ca-app-pub-12345678910/12345678910";
const androidAdmobBanner = "ca-app-pub-12345678910/12345678910";
const productionID = Device.osName === 'Android' ? androidAdmobBanner : iosAdmobBanner;

const InlineAd = () => {
  const [isAdLoaded, setIsAdLoaded] = useState<boolean>(false);
  return (
    <View style={{ height: isAdLoaded ? 'auto' : 0 }}>
      <BannerAd
        // It is extremely important to use test IDs as you can be banned/restricted by Google AdMob for inappropriately using real ad banners during testing
        unitId={__DEV__ ? TestIds.BANNER : productionID}
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true, 
          // You can change this setting depending on whether you want to use the permissions tracking we set up in the initializing
        }}
        onAdLoaded={() => {
          setIsAdLoaded(true);
        }}
      />
    </View >
  );
};

export default InlineAd;

现在您可以InlineAd在应用程序的任何位置插入<InlineAd />。

它看起来是这样的！

创建插页式广告

插页式广告是占据整个屏幕的广告，应谨慎使用，因为如果过度使用，可能会阻止用户使用您的应用。

与上面的横幅广告一样，您需要为每个应用创建一个插页式广告，然后获取以下格式的广告ID ca-app-pub-12345678910/12345678910。

使用插页广告的最佳方式之一是分页（即）从一个页面移动到另一个页面。

下面，我将更新现有的分页功能，以便在用户移动到下一页或上一页时显示插页广告。

首先，创建您的Pagination.tsx或Pagination.jsx文件。然后，准备您的插页式广告 ID。接下来，准备包含关键字或个性化广告的广告请求。

然后，在组件内部，使用 useEffect 加载/卸载实际的插页式广告。

以下代码用于准备插页式广告，并且仅在interstitial.show();广告加载完成且用户点击按钮时显示（使用）。有时可能没有可用的广告，或者用户处于离线状态，因此我们不希望出现意外错误。

我们还使用来将插页式广告关闭后的状态unsubscribeClosed设置为 false，并重新加载新广告。这意味着无论用户点击“上一个”或“下一个”多少次，都会有新的广告呈现给他们。loaded

请记住，您应该将广告 ID 放入环境变量中。以下虚假 ID 仅供显示。



// Pagination.tsx

import { AntDesign } from '@expo/vector-icons';
import * as Device from 'expo-device';
import { Link } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import { AdEventType, InterstitialAd, TestIds } from 'react-native-google-mobile-ads';

const iosAdmobInterstitial = "ca-app-pub-12345678910/12345678910";
const androidAdmobInterstitial = "ca-app-pub-12345678910/12345678910";
const productionID = Device.osName === 'Android' ? androidAdmobInterstitial : iosAdmobInterstitial;
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : productionID;
// Make sure to always use a test ID when not in production 


const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['food', 'cooking', 'fruit'], // Update based on the most relevant keywords for your app/users, these are just random examples
  requestNonPersonalizedAdsOnly: true, // Update based on the initial tracking settings from initialization earlier
});


const Pagination = ({ }) => {

  const [loaded, setLoaded] = useState<boolean>(false);

  useEffect(() => {
    // Event listener for when the ad is loaded
    const unsubscribeLoaded = interstitial.addAdEventListener(AdEventType.LOADED, () => {
      setLoaded(true);
    });

    // Event listener for when the ad is closed
    const unsubscribeClosed = interstitial.addAdEventListener(AdEventType.CLOSED, () => {
      setLoaded(false);

      // Load a new ad when the current ad is closed
      interstitial.load();
    });

    // Start loading the interstitial ad straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      unsubscribeLoaded();
      unsubscribeClosed();
    };
  }, []);


  return (
    <View
      style={{
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        marginVertical: 8,
        paddingHorizontal: 10,
      }}>

        <Link asChild href="/previous-page">
          <Button onPress={() => {
            if (loaded) { interstitial.show(); }
          }}>
            <>
              <AntDesign name="arrowleft" size={24} color="#fdb833" />
              <Text>
                Previous
              </Text>
            </>
          </Button>
        </Link>



        <Link asChild href="/next-page">
          <Button onPress={() => {
            if (loaded) { interstitial.show(); }
          }}>
            <>
              <Text>
                Next
              </Text>
              <AntDesign name="arrowright" size={24} color="#fdb833" />
            </>
          </Button>
        </Link>

    </View>
  );
};

export default Pagination;

现在您的应用上就可以播放插页式广告了！

它看起来是这样的：

完成上述步骤后，您应该能够在应用中看到测试广告。但是，如果您想在正式版应用中展示广告，则需要执行一些额外的步骤。

配置生产广告

在您的app.json/app.config.js将以下内容添加到react-native-google-mobile-ads部分中。

user_tracking_usage_description将显示给用户以提供知情同意。
sk_ad_network_items包括所有 SKAdNetwork 名称，以确保跟踪您的应用的所有广告展示和转化。



{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-12345678910~123456459",
    "ios_app_id": "ca-app-pub-12345678910~123456459",
    "delay_app_measurement_init": true,
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you.",
    "sk_ad_network_items": [
      "cstr6suwn9.skadnetwork",
      "4fzdc2evr5.skadnetwork",
      "4pfyvq9l8r.skadnetwork",
      "2fnua5tdw4.skadnetwork",
      "ydx93a7ass.skadnetwork",
      "5a6flpkh64.skadnetwork",
      "p78axxw29g.skadnetwork",
      "v72qych5uu.skadnetwork",
      "ludvb6z3bs.skadnetwork",
      "cp8zw746q7.skadnetwork",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "3qy4746246.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "f38h382jlk.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "t38b2kh725.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "9rd848q2bz.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "n6fk4nfna4.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "av6w8kgt66.skadnetwork",
      "klf5c3l5u5.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "424m5254lk.skadnetwork",
      "ecpz2srf59.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "zq492l623r.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "3qcr597p9d.skadnetwork",
      "vutu7akeur.skadnetwork",
      "eh6m2bh4zr.skadnetwork",
      "pwa73g5rt2.skadnetwork"
    ]
  }
}

app.json在您的/的“expo”部分中app.config.js，您还需要将以下内容添加到“android”和“ios”部分。



"android": {
    "versionCode": 1,
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon.png",
      "backgroundColor": "#FFFFF"
    },
    "package": "com.fakeapp.name",
    "permissions": ["com.google.android.gms.permission.AD_ID"],
    "googleServicesFile": "./google-services.json"
},
  "ios": {
    "buildNumber": "1",
    "supportsTablet": true,
    "infoPlist": {
      "NSUserTrackingUsageDescription": "Allow this app to collect app-related data that can be used for tracking you or your device and deliver personalized ads to you.",
      "SKAdNetworkItems": [
        {
          "SKAdNetworkIdentifier": [
            "cstr6suwn9.skadnetwork",
            "4fzdc2evr5.skadnetwork",
            "4pfyvq9l8r.skadnetwork",
            "2fnua5tdw4.skadnetwork",
            "ydx93a7ass.skadnetwork",
            "5a6flpkh64.skadnetwork",
            "p78axxw29g.skadnetwork",
            "v72qych5uu.skadnetwork",
            "ludvb6z3bs.skadnetwork",
            "cp8zw746q7.skadnetwork",
            "c6k4g5qg8m.skadnetwork",
            "s39g8k73mm.skadnetwork",
            "3qy4746246.skadnetwork",
            "3sh42y64q3.skadnetwork",
            "f38h382jlk.skadnetwork",
            "hs6bdukanm.skadnetwork",
            "v4nxqhlyqp.skadnetwork",
            "wzmmz9fp6w.skadnetwork",
            "yclnxrl5pm.skadnetwork",
            "t38b2kh725.skadnetwork",
            "7ug5zh24hu.skadnetwork",
            "9rd848q2bz.skadnetwork",
            "y5ghdn5j9k.skadnetwork",
            "n6fk4nfna4.skadnetwork",
            "v9wttpbfk9.skadnetwork",
            "n38lu8286q.skadnetwork",
            "47vhws6wlr.skadnetwork",
            "kbd757ywx3.skadnetwork",
            "9t245vhmpl.skadnetwork",
            "a2p9lx4jpn.skadnetwork",
            "22mmun2rn5.skadnetwork",
            "4468km3ulz.skadnetwork",
            "2u9pt9hc89.skadnetwork",
            "8s468mfl3y.skadnetwork",
            "av6w8kgt66.skadnetwork",
            "klf5c3l5u5.skadnetwork",
            "ppxm28t8ap.skadnetwork",
            "424m5254lk.skadnetwork",
            "ecpz2srf59.skadnetwork",
            "uw77j35x4d.skadnetwork",
            "mlmmfzh3r3.skadnetwork",
            "578prtvx9j.skadnetwork",
            "4dzt52r2t5.skadnetwork",
            "gta9lk7p23.skadnetwork",
            "e5fvkxwrpn.skadnetwork",
            "8c4e2ghe7u.skadnetwork",
            "zq492l623r.skadnetwork",
            "3rd42ekr43.skadnetwork",
            "3qcr597p9d.skadnetwork",
            "vutu7akeur.skadnetwork",
            "eh6m2bh4zr.skadnetwork",
            "pwa73g5rt2.skadnetwork"
          ]
        }
      ]
    },
    "bundleIdentifier": "com.fakeapp"
  }

您还需要以下所有插件来实现透明度：



"expo": {
  ...
  plugins: [
      [
        'expo-tracking-transparency',
        {
          userTrackingPermission:
            'Allow this app to collect app-related data that can be used for tracking you or your device and deliver personalized ads to you.',
        },
      ],
      [
        'expo-build-properties',
        {
          ios: {
            useFrameworks: 'static',
          },
          android: {
            extraProguardRules: '-keep class com.google.android.gms.internal.consent_sdk.** { *; }',
          },
        },
      ],
    ],
 }

Google AdMob 在 Expo/React Native 中的常见问题

1. 我的广告在测试期间展示，但在正式发布时未展示

这通常意味着您的应用 ID 或广告 ID 配置不正确。请确保您已添加正确的 ID。

注意：如果您在 Expo 中使用环境变量eas build，则需要在中包含变量eas.json并在 Expo 网站上提交机密。

2. 我的广告展示效果完美，但在 AdMob 信息中心上却没有任何展示

新应用有时可能需要几天时间才能在控制面板上正确注册广告。请确保您在 AdMob 控制面板上的所有配置和验证均已正确完成。

3. 我的广告在 AdMob 信息中心上仅显示其中一个应用的展示次数

此问题通常是由于意外在 iOS 和 Android 设备上使用了相同的广告 ID 造成的。请仔细检查每种设备类型是否使用了各自的广告 ID。（例如Device.osName === 'Android' ? androidAdmobInterstitialId : iosAdmobInterstitialId;）

感谢您学习本教程，了解如何将 Google AdMob 添加到 Expo 设备！如果您想了解更多关于我的信息，可以点击此处访问我的作品集。

如果您在使用过程中遇到任何错误，而该错误不是我已经回答过的常见问题之一，请随时在下面发表评论，我们可以尝试一起调试它！

鏂囩珷鏉ユ簮锛�https://dev.to/josie/adding-google-admob-to-expo-apps-2din

将 Google AdMob 添加到 Expo Apps

将 Google AdMob 添加到 Expo Apps

目录

入门

使用 Expo Development Builds

准备 AdMob

不要忘记遵守广告法规

使用 React Native Google 移动广告

制作横幅广告

创建插页式广告

配置生产广告

Google AdMob 在 Expo/React Native 中的常见问题

1. 我的广告在测试期间展示，但在正式发布时未展示

2. 我的广告展示效果完美，但在 AdMob 信息中心上却没有任何展示

3. 我的广告在 AdMob 信息中心上仅显示其中一个应用的展示次数