集成
在本页面中,您将了解到如何下载、导入和配置 AppLovin React Native 模块。
下载最新模块
执行以下指令,通过 npm
下载 AppLovin MAX React Native 模块:
npm install react-native-applovin-max
要接收版本更新,请订阅 AppLovin MAX React Native 模块 GitHub 库。
启用 Ad Review
要启用 MAX Ad Review 服务,请按照下列说明操作:
针对 Android 的说明
在 build.gradle
文件末尾添加下列行:
针对根层级 build.gradle
文件的补充行
buildscript { repositories { maven { url 'https://artifacts.applovin.com/android' } } dependencies { classpath "com.applovin.quality:AppLovinQualityServiceGradlePlugin:+" }}
buildscript { repositories { maven { url = uri("https://artifacts.applovin.com/android") } } dependencies { classpath ("com.applovin.quality:AppLovinQualityServiceGradlePlugin:+") }}
针对应用层级 build.gradle
文件的补充行
apply plugin: 'applovin-quality-service'applovin { apiKey "«your-ad-review-key»"}
plugins { id("applovin-quality-service")}applovin { apiKey = "«your-ad-review-key»"}
您可以在 AppLovin 控制面板的 Account > General > Keys 部分找到 Ad Review Key。
针对 iOS 的说明
下载 AppLovinQualityServiceSetup-ios.rb
并将其移动到您的项目文件夹中。
打开终端窗口,将cd
转到您的项目目录中,然后运行:
ruby AppLovinQualityServiceSetup-ios.rb
初始化 SDK
将以下代码片段添加至应用的主屏幕:
import AppLovinMAX, { Configuration } from "react-native-applovin-max";
⋮
AppLovinMAX.initialize("«your-SDK-key»").then((conf: Configuration) => { // SDK is initialized, start loading ads}).catch(error => { // Failed to initialize SDK});
您可以在 AppLovin 控制面板的 Account > General > Keys 部分找到 SDK Key。
完全缓存的广告素材能带来更好的用户体验。 因此,请务必在应用启动时初始化 AppLovin SDK。 这样,聚合平台就有最充裕的时间来缓存广告。 这一点对于视频广告尤为重要。
iOS 14 支持
在 iOS 14 中,Apple 对全局隐私政策进行了调整。 Apple 要求应用遵守这些新政策。 否则,您可能会损失收入。 本节将介绍如何遵守新政策。
SKAdNetwork
使用特定于平台的标识符更新应用的 Info.plist
。
请参阅 SKAdNetwork documentation 中的说明。
许可和数据 API
在某些司法管辖区,您必须代表 AppLovin 的变现合作伙伴获得用户的许可,还必须向 AppLovin 正确发送许可值。 要了解操作方法,请查看 Privacy–Consent, Age-Related Flags, and Data APIs 文档。
React Native v5 迁移指南
React Native 模块版本 5 加入了重大更新,能支持 Promises 和回传。 不过,该更新打破了向后兼容性。 本节将总结这些更新的信息。
原生 UI 组件 (AppLovinMAX.AdView
和 AppLovinMAX.NativeAdView
) 可以直接在组件内声明回传。
Type-specific event listeners take the type as an argument.
These replace generic event listeners.
For example there is now AppLovinMAX.addInterstitialLoadedEventListener(listener)
instead of AppLovinMAX.addEventListener(type, listener)
.
Twelve formerly synchronous methods with return values now use the Promises architecture.
You can use chaining via then
/catch
or async
/await
when you access the value passed by the Promise
.
The following table shows the updated methods.
方法 | resolve 返回类型 | reject 返回类型 |
---|---|---|
AppLovinMAX.getAdaptiveBannerHeightForWidth(width) | 高度 (float ) | ⸺ |
AppLovinMAX.hasUserConsent() | boolean | ⸺ |
AppLovinMAX.initialize(sdkKey) | 配置对象 | error |
AppLovinMAX.isAgeRestrictedUser() | boolean | ⸺ |
AppLovinMAX.isAppOpenAdReady(adunitId) | boolean | error |
AppLovinMAX.isDoNotSell() | boolean | ⸺ |
AppLovinMAX.isInitialized() | boolean | ⸺ |
AppLovinMAX.isInterstitialReady(adUnitId) | boolean | error |
AppLovinMAX.isMuted() | boolean | ⸺ |
AppLovinMAX.isRewardedAdReady(adunitId) | boolean | error |
AppLovinMAX.isTablet() | boolean | ⸺ |
AppLovinMAX.showConsentDialog() | null | error |
您也可以引用 演示应用中的此提交,了解迁移后如何使用这些新方法。
React Native v6 迁移指南
React Native 模块版本 6 加入了重大更新,能支持 TypeScript 和模块。 不过,该更新打破了向后兼容性。 本节将总结这些更新的信息。
TypeScript
自 React Native 0.71 版本起,TypeScript 成为了 React Native 的默认应用程序编程语言。 React Native 模块版本 6 将代码库迁移到了 TypeScript。
模块
Previous versions exported a single module, AppLovinMAX
, which encompassed all the functions of MAX.
Version 6 categorizes these functions into a set of modules.
The architecture of version 6 resembles that of version 5, but updates function signatures to adapt to this introduction of modules.
The major new modules are as follows:
模块 | function |
---|---|
AppLovinMAX (默认) | 集成 (初始化和通用功能) |
隐私 | 隐私、条款流程 |
AppOpenAd | 应用开屏广告 |
BannerAd | 横幅广告 |
InterstitialAd | 插屏广告 |
MRecAd | 中等矩形 (MREC) 广告 |
NativeAdView | 原生广告 |
RewardedAd | 激励广告 |
AdView | 横幅和 MREC (UI 组件) |
迁移示例
import AppLovinMAX from 'react-native-applovin-max';
AppLovinMAX.addInterstitialLoadedEventListener((adInfo) => { const isInterstitialReady = await AppLovinMAX.isInterstitialReady(«ad-unit-ID»); if (isInterstitialReady) { AppLovinMAX.showInterstitial(«ad-unit-ID»); }});
AppLovinMAX.loadInterstitial(«ad-unit-ID»);
import { InterstitialAd, type AdInfo } from 'react-native-applovin-max';
InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => { const isInterstitialReady = await InterstitialAd.isAdReady(«ad-unit-ID»); if (isInterstitialReady) { InterstitialAd.showAd(«ad-unit-ID»); }});
InterstitialAd.loadAd(«ad-unit-ID»);
React Native v9 迁移指南
Version 9 of the React Native module introduces support for the new architecture in React Native while preserving the existing APIs and functionalities. Due to certain limitations in the new architecture, it modifies some capabilities.
主要变更
- 移除了 AdInfo 中 Waterfall Information API 的支持
AdInfo
对象不再支持 waterfall information API。AdView
和NativeAdView
中的extraParameters
和localExtraParameters
发生调整- 这些参数现在仅支持字符串和布尔值。如果您之前将这些值设为了
null
,现在请将其变为空字符串 (""
)。