インフィード広告実装方法 - glossom-dev/AdfurikunSDK-ReactNative GitHub Wiki

インフィード

アドフリくんでは、次の3種類の広告を総称して「インフィード広告」と呼んでいます。
それぞれの詳細はこちらをご参照ください。

  • ネイティブ広告
  • モバイルバナー広告
  • レクタングル広告

このページでは、「ネイティブ広告」を基に、実装方法を説明します。
広告タイプによって使用するクラス名は異なりますが、実装手順は概ね同じです。
以下のテーブルを参考に、用語を読み替えて実装してください。

広告種類 クラス名
ネイティブ AdfurikunNative
モバイルバナー AdfurikunBanner
レクタングル AdfurikunRectangle

コンストラクタ設定、デリゲートコールバック実装

NativeAd

ネイティブ広告の場合は引数に広告のwidth,heightのdipサイズを渡す必要があります。

import { AdfurikunNative } from "react-native-adfurikunsdk";
    
export const NativeScreen: React.FC = () => {

  const banner: any = useRef(null);

  function onAdLoadFinish(data: any) {
    // 広告準備完了
  }

  function onAdLoadError(data: any) {
    // 広告準備失敗
  }

  function onPlayStart(data: any) {
    // 動画再生開始
  }

  function onPlayFinish(data: any) {
    // 動画再生完了
  }

  function onAdClick(data: any) {
    // 広告クリック
  }

  function onPlayFailed(data: any) {
    // 動画再生失敗
  }

  return (
    ...
    <View>
      <View>
        <AdfurikunNative appId = { 広告枠ID } 
                        width = { 320 }
                        height = { 180 }
                        ref = { banner } 
                        onAdLoadFinish = { onAdLoadFinish }  
                        onAdLoadError = { onAdLoadError }
                        onADFMediaViewPlayStart = { onPlayStart }
                        onADFMediaViewPlayFinish={ onPlayFinish }
                        onADFMediaViewPlayFail={ onPlayFailed }
                        onADFMediaViewClick = { onAdClick }/>
      </View>
    </View>
  );
}
Rectangle 
import { AdfurikunRectangle } from "react-native-adfurikunsdk";
    
export const RectangleScreen: React.FC = () => {

  const rectangle: any = useRef(null);

  function onAdLoadFinish(data: any) {
    // 広告準備完了
  }

  function onAdLoadError(data: any) {
    // 広告準備失敗
  }

  function onPlayStart(data: any) {
    // 動画再生開始
  }

  function onPlayFinish(data: any) {
    // 動画再生完了
  }

  function onAdClick(data: any) {
    // 広告クリック
  }

  function onPlayFailed(data: any) {
    // 動画再生失敗
  }

  return (
    ...
    <View>
      <View>
        <AdfurikunRectangle appId = { 広告枠ID } 
                        ref = { rectangle } 
                        onAdLoadFinish = { onAdLoadFinish }  
                        onAdLoadError = { onAdLoadError }
                        onADFMediaViewPlayStart = { onPlayStart }
                        onADFMediaViewPlayFinish={ onPlayFinish }
                        onADFMediaViewPlayFail={ onPlayFailed }
                        onADFMediaViewClick = { onAdClick }/>
      </View>
    </View>
  );
}
Banner 
import { AdfurikunBanner } from "react-native-adfurikunsdk";
    
export const BannerScreen: React.FC = () => {

  const banner: any = useRef(null);

  function onAdLoadFinish(data: any) {
    // 広告準備完了
  }

  function onAdLoadError(data: any) {
    // 広告準備失敗
  }

  function onPlayStart(data: any) {
    // 動画再生開始
  }

  function onPlayFinish(data: any) {
    // 動画再生完了
  }

  function onAdClick(data: any) {
    // 広告クリック
  }

  function onPlayFailed(data: any) {
    // 動画再生失敗
  }

  return (
    ...
    <View>
      <View>
        <AdfurikunBanner appId = { 広告枠ID } 
                        ref = { banner } 
                        onAdLoadFinish = { onAdLoadFinish }  
                        onAdLoadError = { onAdLoadError }
                        onADFMediaViewPlayStart = { onPlayStart }
                        onADFMediaViewPlayFinish={ onPlayFinish }
                        onADFMediaViewPlayFail={ onPlayFailed }
                        onADFMediaViewClick = { onAdClick }/>
      </View>
    </View>
  );
}

広告のロード

まず広告をロードするため、refを利用して対象になる<AdfurikunNative/>の instance を保存します。

<AdfurikunNative ref = { native }
                .../>

その後、広告ロードしたい時点でloadAd関数を呼び出すことで、広告のロードを行います。

native.current?.loadAd();

広告の表示

広告を表示したい時点でplayAd関数を呼び出すことで、広告の表示を行います。
この時、再生準備が完了したアドネットワークの中から1つ選択されます。

native.current?.playAd();

インフィード広告の実装ガイドライン

サイズ目安について

広告の視認性確保のため、以下を目安に実装をお願いします。

  • 縦画面: 動画広告の横幅が画面横幅の50％以上であること
  • 横画面: 動画広告の横幅が画面横幅の25％以上であること

※上記基準を下回る場合は、広告の配信が停止される可能性がございますので、ご了承ください。

複数表示について

  • 現在、複数枠には対応していません。
  • 広告枠IDを使いまわすことも可能ですが、1画面で1箇所の設置を推奨します。
  • また、設置箇所ごとのレポートは参照できず合算されます。
  • 同一ページや1アプリ内で複数設置する場合は、メモリー負荷や通信量を抑制するため、不要なインスタンスは破棄することを推奨します。

広告の自動切り替えの実装方法

広告の表示内容を一定時間おきに更新するには、アプリケーション側での実装が必要です。
以下に記載したサンプルアプリのバナー広告における実装例を参考にしてください。

// アドフリくん広告のインポート
import { AdfurikunBanner } from "react-native-adfurikunsdk";

var loadRetryCount = 0;
    
export const BannerScreen: React.FC = () => {

  const banner: any = useRef(null);

  function onAdLoadFinish(data: any) {
    // リトライカウントを初期化
    loadRetryCount = 0;
    // 広告を表示する
    banner.current?.playAd();
    // 60秒後に再ロードを行う
    setTimeout(() => {
      banner.current?.loadAd();
    }, 60 * 1000)
  }

  function onAdLoadError(data: any) {
    // エラーの確認および広告表示のリトライ処理
    if (data.error != 999 && data.error != 2 && loadRetryCount < 5) {
      loadRetryCount++;
      banner.current?.loadAd();
    }
  }

  return (
    ...
    <View>
      <View>
        // コンストラクタ・デリゲートを設定
        <AdfurikunBanner appId = { 広告枠ID } 
                        ref = { banner } 
                        onAdLoadFinish = { onAdLoadFinish }  
                        onAdLoadError = { onAdLoadError }
                        onADFMediaViewPlayStart = { onPlayStart }
                        onADFMediaViewPlayFinish={ onPlayFinish }
                        onADFMediaViewPlayFail={ onPlayFailed }
                        onADFMediaViewClick = { onAdClick }/>
      </View>
    </View>
  );
}
⚠️ **GitHub.com Fallback** ⚠️