uniapp如何接入谷歌广告

我想在uniapp项目中接入谷歌广告（AdMob），但不知道具体该如何操作。请问有完整的接入流程教程吗？需要配置哪些参数？是否需要额外的插件或SDK？求大佬分享经验，最好能提供详细的代码示例和注意事项。

2 回复

在uniapp中接入谷歌广告，需使用AdMob插件。步骤如下：

  1. 安装uni-ad插件，配置AdMob广告位ID。
  2. 在页面引入广告组件，如插屏广告或横幅广告。
  3. 调用API加载和显示广告。 注意：需在谷歌AdMob后台创建应用和广告单元。

在 UniApp 中接入谷歌广告（Google AdMob），可以通过以下步骤实现。由于 UniApp 本身不支持直接集成 AdMob，需使用第三方插件或原生开发。以下是基于 UniApp 官方推荐的广告插件方法（以 HBuilderX 为例）：

步骤 1：安装广告插件

  1. 打开 HBuilderX，选择你的 UniApp 项目。
  2. 在菜单栏点击“发行” > “原生 App-云打包”。
  3. 在“模块配置”中，搜索并勾选“AdMob（Google 移动广告）”模块。确保选择适用于 Android 和/或 iOS 的版本。

步骤 2：配置 AdMob 信息

  • 在 AdMob 后台（https://admob.google.com）创建应用和广告单元，获取 App ID 和广告单元 ID。
  • 在项目的 manifest.json 文件中，添加 AdMob 配置：
    {
  "app-plus": {
    "plugins": {
      "admob": {
        "app-id": "你的 AdMob App ID（如 ca-app-pub-xxxxxxxx~xxxxxxxx）"
      }
    }
  }
}

步骤 3：编写代码调用广告

在页面中引入广告组件并初始化。以下以横幅广告为例：

// 在页面 script 部分
export default {
  data() {
    return {
      adUnitId: "你的广告单元 ID（如 ca-app-pub-xxxxxxxx/xxxxxxxx）" // 替换为实际 ID
    };
  },
  onReady() {
    // 初始化广告
    this.initAd();
  },
  methods: {
    initAd() {
      // 创建横幅广告实例
      const ad = uni.createBannerAd({
        adUnitId: this.adUnitId,
        style: {
          left: 10,
          top: 76,
          width: 350 // 根据平台调整尺寸
        }
      });

      // 监听广告加载
      ad.onLoad(() => {
        console.log("广告加载成功");
        ad.show(); // 显示广告
      });

      ad.onError((err) => {
        console.error("广告加载失败", err);
      });
    }
  }
};

步骤 4：云打包和测试

  • 使用 HBuilderX 进行云打包（选择 Android 或 iOS 平台）。
  • 测试时，确保使用 AdMob 测试广告单元 ID 以避免政策问题。例如，Android 测试 ID 为 ca-app-pub-3940256099942544/6300978111。

注意事项

  • 平台差异：Android 和 iOS 需分别配置 App ID，并在 AdMob 后台设置对应平台。
  • 广告类型：除横幅广告外，还支持插页广告、激励视频等，代码类似，但需调整广告单元类型。
  • 政策合规：遵守 AdMob 政策，避免无效点击。
  • 网络权限：确保 Android 应用有 <uses-permission android:name="android.permission.INTERNET" /> 权限（云打包通常自动添加）。

如果遇到问题，参考 UniApp 官方文档或 AdMob 指南。此方法适用于大多数场景，无需原生开发。

回到顶部