楽天リワードモバイルウェブ広告 - RakutenReward/RakutenRewardSDK GitHub Wiki

楽天リワードモバイルウェブ広告

楽天リワードでは、ネイティブアプリ向けの広告SDKの他にモバイルウェブアプリ、モバイルウェブサイト向けの広告を提供しております。 開発者様のモバイルウェブアプリ、モバイルウェブサイトに楽天リワードが提供する JavaScript ライブラリおよびタグを挿入することで 320x50, 300x250の広告を入れることができます。

サポートサイズ

名称 サイズ
バナー 320x50
レクタングル 300x250

サポートしているプラットフォーム

プラットフォーム サポート
Android Android 5.0〜 (※)
iOS iOS 8.0〜

※ 楽天で提供している広告のウェブページはSSL/TSLのバージョン1.0, 1.1をサポートしておりません。

導入手順

  1. アプリケーションを開発者ポータルに登録する(開発者ポータル) アプリケーションキー(AppKey, 以下app codeとします)を取得
  2. 以下の手順で導入する

バナー(320x50)の導入方法

導入する方法は以下のようになります。

  1. 楽天リワードの提供するスクリプトをheadの部分に追加(AppCodeは上記で取得したAppKeyを使います)
  2. 広告を挿入したいところにタグを入れる

楽天リワードの提供するスクリプトをheadの部分に追加

<script>
var AppCode = <% your app code %>;
</script>
<script src="https://mprewardsdk.blob.core.windows.net/sdk-ad/scripts/mobileweb.js"></script>
例
<head>
  <meta charset="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile Web Banner</title>
  <script>
  var AppCode="anAuY28ucmFrdXRlbi5yZXdhcmQuc2VjdXJpdHl0ZXN0Lmlvcy1UfmJ3OXVYS1lqSDhzMl9Qdkp6cUxBLXdIcUZMZUtWRg==";
  </script>
  <script src="https://mprewardsdk.blob.core.windows.net/sdk-ad/scripts/mobileweb.js"></script>
</head>

広告を挿入したいところにタグを入れる

<div id="Rak_Reward_SP_Offerwall_WM_Banner_nofix">
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.display('Rak_Reward_SP_Offerwall_WM_Banner');</script>
</div>
例
<body style="text-align: center; margin: 0px; padding: 0px;">
<div id="Rak_Reward_SP_Offerwall_WM_Banner_nofix">
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_Banner');</script>
  <script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.display('Rak_Reward_SP_Offerwall_WM_Banner');</script>
</div>
</body>

バナーの例

Banner Ads

レクタングル(300x250)の導入方法

手順はバナーと同様です

  1. 楽天リワードの提供するスクリプトをheadの部分に追加(AppCodeは上記で取得したAppKeyを使います)
  2. 広告を挿入したいところにタグを入れる

楽天リワードの提供するスクリプトをheadの部分に追加

<script>
var AppCode = <% your app code %>;
</script>
<script src="https://mprewardsdk.blob.core.windows.net/sdk-ad/scripts/mobileweb.js"></script>
例
<head>
  <meta charset="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile Web Rectangle</title>
  <script>
  var AppCode = "anAuY28ucmFrdXRlbi5yZXdhcmQuc2VjdXJpdHl0ZXN0Lmlvcy1UfmJ3OXVYS1lqSDhzMl9Qdkp6cUxBLXdIcUZMZUtWRg==";
  </script>
  <script src="https://mprewardsdk.blob.core.windows.net/sdk-ad/scripts/mobileweb.js"></script>
</head>

広告を挿入したいところにタグを入れる

<div id="Rak_Reward_SP_Offerwall_WM_MediumRect_nofix">
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.display('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
</div>
例
<body style="text-align: center; margin: 0px; padding: 0px;">
<div id="Rak_Reward_SP_Offerwall_WM_MediumRect_nofix">
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.prepare('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
<script type='text/javascript'>rakutentag_Rak_Reward_SP_Offerwall.display('Rak_Reward_SP_Offerwall_WM_MediumRect');</script>
</div>
</body>

レクタングルの例

Recangle Ads

React.jsなどSPA(シングルページアプリケーション)のFrameworkをご利用の場合の注意

React.jsなどのSPA(シングルページアプリケーション)のFrameworkをご使用の場合、広告が非同期でロードされることで 意図したタグ内に正しく挿入されない場合があります。 その場合の解決策の一つである iframe を利用した方法を説明します。 ※この解決策はあくまで一例です。開発者様の環境に合わせて工夫する必要があります。

広告のコードだけを入れたHTMLを用意する

HTMLは上の導入例で示したコードになります。

React.js 内で用意したiframeを使用する

render() {
  return (
    <div>
      <div
          dangerouslySetInnerHTML={{
          __html: `<iframe src="<% your ad url %>" frameborder="0" width="320" height="50" />`
          }}
        />
    </div>
  );
}
⚠️ **GitHub.com Fallback** ⚠️