رفتن به مطلب اصلی
Version: 4.x.x

React Native

در این مستند نحوه‌ی استفاده از کتاب‌خانه‌ی تبلیغات ادیوری در react-native را شرح می‌دهیم. کتاب‌خانه‌ی ادیوری امکان نمایش تبلیغات بنری، همسان، میان‌صفحه‌ای و جایزه‌ای را در اپلیکیشن‌های اندروید فراهم می‌کند. همچنین با استفاده از این کتاب‌خانه می‌توانید نمایش تبلیغات شبکه‌های خارجی را نیز مدیریت کنید.

افزودن کتابخانه ادیوری به پروژه#

برای اضافه کردن ادیوری به پروژه خود وارد مسیر پروژه شوید و دستور زیر را در کنسول وارد کنید.

npm install [email protected]

راه‌اندازی کتابخانه ادیوری#

برای راه‌اندازی کتابخانه ادیوری مطابق کد زیر ادیوری را در سورس کد خود import کنید

import { Adivery } from 'adivery';

سپس مطابق کد زیر دستور configure را صدا بزنید و مقدار APP_ID را با شناسه اپلیکیشن که از پنل کاربری دریافت می‌کنید، جایگزین کنید.

const adiveryAppId = "APP_ID"
Adivery.configure(adiveryAppId)

تبلیغات میان‌صفحه‌ای#

برای نمایش تبلیغات میان‌صفحه‌ای مطابق کد زیر دستور prepareInterstitialAd را صدا بزنید و مقدار PLACEMENT_ID را با شناسه جایگاه که از پنل کاربری دریافت می‌کنید، جایگزین کنید.

const interstitialPlacement = "PLACEMENT_ID"
Adivery.prepareInterstitialAd(interstitialPlacement)

نمایش تبلیغ میان‌صفحه‌ای#

برای نمایش تبلیغ میان‌صفحه‌ای مطابق کد زیر پس از بررسی موجود بودن تبلیغ، آن را نمایش دهید.

Adivery.isLoaded(interstitialPlacement).then((isLoaded) => {
if ( isLoaded ){
Adivery.showAd(interstitialPlacement)
}
})
اطلاعات

دقت داشته باشید مقدار interstitialPlacement همان شناسه جایگاهی باید باشد که در مرحله قبل استفاده شده است.

تبلیغات جایزه‌ای#

برای نمایش تبلیغات جایزه‌ای مطابق کد زیر دستور prepareRewardedAd را صدا بزنید و مقدار PLACEMENT_ID را برابر شناسه جایگاه که از پنل کاربری دریافت می‌کنید، قرار دهید.

const rewardedPlacement = "PLACEMET_ID"
Adivery.prepareRewardedAd(rewardedPlacement)

نمایش تبلیغ جایزه‌ای#

برای نمایش تبلیغ جایزه‌ای مطابق کد زیر پس از بررسی بارگذاری تبلیغ، آن را نمایش دهید.

Adivery.isLoaded(rewardedPlacement).then((isLoaded) => {
if ( isLoaded ){
console.log("calling show")
Adivery.showAd(rewardedPlacement)
}
})
اطلاعات

دقت داشته باشید مقدار rewardedPlacement همان شناسه جایگاهی باید باشد که در مرحله قبل استفاده شده است.

تبلیغ اجرای اپلیکیشن#

برای نمایش تبلیغ اجرای اپلیکیشن مطابق کد زیر دستور prepareAppOpenAd را صدا بزنید و PLACEMENT_ID را برابر با مقدار شناسه جایگاه که از پنل کاربری دریافت می‌کنید، قرار دهید.

const appOpenPlacement = "PLACEMENT_ID"
Adivery.prepareAppOpenAd(appOpenPlacement)

نمایش تبلیغ اجرای اپلیکیشن#

برای نمایش تبلیغ اجرای اپلیکیشن مطابق کد زیر پس از بررسی بارگذاری تبلیغ، آن را نمایش دهید.

Adivery.isLoaded(appOpenPlacement).then((isLoaded) => {
if ( isLoaded ){
Adivery.showAppOpenAd(appOpenPlacement)
}
})

دریافت کالبک تبلیغات#

برای دریافت کالبک تبلیغات مطابق کد زیر دستور addGlobalLostener را صدا بزنید.

Adivery.addGlobalListener(
{
onRewardedAdLoaded: (placementId) => {
console.log("rewarded loaded")
},
onRewardedAdShown: (placementId) => {
console.log("rewarded shown")
},
onRewardedAdClicked: (placementId) => {
console.log("rewarded clicked")
},
onRewardedAdClosed: (plcementId, isRewarded) => {
console.log("rewarded closed: " + isRewarded)
},
onInterstitialAdLoaded: (placementId) => {
console.log("interstitial loaded")
},
onInterstitialAdShown: (placementId) => {
console.log("insterstitial shown")
},
onInterstitialAdClicked: (placementId) => {
console.log("interstitial clicked")
},
onInterstitialAdClosed: (placementId) => {
console.log("interstitial closed")
},
onAppOpenAdLoaded: (placementId) => {
console.log("appOpen loaded")
},
onAppOpenAdShown: (placenentId) => {
console.log("appOpen shown")
},
onAppOpenAdClicked: (placementId) => {
console.log("appOpen clicked")
},
onAppOpenAdClosed: (placementId) => {
console.log("appOpen closed")
},
onError: (placementId, message) => {
console.log("onError: " + message)
}
}
)
اطلاعات

تمای فیلد های کالبک ادیوری اختیاری هستند و در صورت نیاز می‌توانید هرکدام را حذف کنید.

نمایش تبلیغ بنری#

برای نمایش تبلیغ بنری کد زیر را در هر بخش از render برنامه خود قرار‌ دهید و مقدار PLACEMENT_ID را با مقدار شناسه جایگاه که از پنل کاربری دریافت می‌کنید، جایگزین کنید.

import { AdiveryBanner, Banner, LargeBanner, MediumRectangle } from 'adivery';
const placementBanner = "PLACEMENT_ID"
bannerLoaded = function(){
// بنر بارگذاری و نمایش داده شد.
}
bannerClicked = function() {
// کاربر روی بنر کلیک کرده است.
}
bannerError = function(message){
// خطایی رخ داده است. لطفا خطا را چاپ کنید تا از جزئیات خطا مطلع شوید.
}
renderBanner() {
return <AdiveryBanner placementId={bannerPlacementId} bannerSize={Banner}
onAdLoaded={this.bannerLoaded} onAdClicked={this.bannerClicked} onError={this.bannerError} />
}

نمایش تبلیغ همسان#

برای نمایش تبلیغ همسان مطابق کد زیر دستور requestNativeAd را صدا بزنید و مقدار PLACEMENT_ID را با مقدار شناسه جایگاه که از پنل کاربری دریافت می‌کنید، جایگزین کنید.

const nativePlacementId = 'PLACEMENT_ID'
try {
const nativeAd = await Adivery.requestNativeAd(nativePlacementId)
Adivery.recordNativeAdImpression(nativePlacementId)
} catch (error){
console.log(error)
}

دریافت اطلاعات تبلیغ همسان#

برای دریافت اطلاعات تبلیغ همسان مطابق دستور زیر عمل کنید.

this.setState({
nativeAdLoaded: true,
nativeAdHeadLine: nativeAd.headline,
nativeAdDescription: nativeAd.description,
nativeAdAdvertiser: nativeAd.advertiser,
nativeAdCallToAction: nativeAd.call_to_action,
nativeAdIcon: nativeAd.icon,
nativeAdImage: nativeAd.image,
})

نمایش تصاویر تبلیغ همسان#

دو مقدار icon و image در تبلیغ همسان بصورت base64 دریافت می‌شوند و برای نمایش آنها باید مطابق کد زیر عمل کنید.

<Image style={{width: 300, height:200}} source={{uri:"data:image/png;base64," + this.state.nativeAdImage}}/>

کلیک تبلیغ همسان#

برای ثبت کلیک کاربر بر روی تبلیغ همسان باید دستور recordClick را مطابق کد زیر صدا بزنید.

nativeClick() {
Adivery.recordNativeAdClick(nativePlacementId)
}
render() {
...
<Button title={this.state.nativeAdCallToAction} onPress={this.nativeClick} />
...
}