Amazon Payバナープログラムを簡単に設置したいです。（デザイン変更不要で設置する方法をご紹介）

Amazon Payバナープログラムとは

Amazon Pay バナープログラムとは、指定のバナーURLをECサイトに配置することで、ECサイト側で切り替えることなく、Amazon Payキャンペーンバナーを自動で切り替える仕組みです。
このプログラムを利用することで、Amazon Payが開催する最新のキャンペーンに、手間なく参加することができます。
詳細は、Amazon Payバナープログラムを参照してください。

サイトデザインを変更せずに設置するには

プログラムに参加するためには、サイトに合うバナーの種類やサイズを選定、サイトデザインの変更などの作業が必要です。
このような場合、EasyBannerの利用を検討してください。
このソリューションを利用すると、ECサイトに単純なjavascriptタグを設置するだけで、バナープログラムに簡単に参加することができます。
このjavascriptタグにより、Amazon Payキャンペーンバナーが自動的にあなたのECサイト上にポップアップで表示されます。
スマートフォンでは、スクリーン右横にタグとしてキャンペーンを表示することもできます。

EasyBannerの表示イメージ

デバイス	イメージ
PCの場合
スマートフォンの場合

スマートフォンで利用したイメージ

導入方法

1.サンプルコードをダウンロード

サンプルコード(amazonpayEasyBanner.js)をダウンロード

末尾のサンプルコードの利用規約をご確認のうえ、ご利用ください。

2.サンプルコードをAmazon Payバナーを表示するページへ設置し、以下を参考にロジックを設定

###出品者ID### に自身の出品者ID（merchantId）を設定してください。出品者IDは出品者IDの確認方法をご参考ください。

設置例

    <!-- ダウンロードしたamazonpayEasyBanner.jsを設置 -->
    <script type="text/javascript" src="amazonpayEasyBanner.js"></script>

    <!-- amazonpayEasyBanner.jsを実行 -->
    <script>
        amazonpayEasyBanner('###出品者ID###').fadeIn(5).sideTab();
    </script>

機能の説明

fadeIn

特定秒後にポップアップを表示します。
設置例では、5秒後にポップアップを表示します。

sideTab

この機能を利用することで、スマートフォンでは画面右横にキャンペーンバナーのタブを表示できます。
デフォルトでは、ページ表示時にタブを表示します。
スマートフォンに表示されたページをスクロールし、特定の項目が画面内に表示された際にタブを開くには、以下のように設定してください。

sideTab利用時のイメージ

sideTab設置例

idに'payment'が設定されているHTMLの要素が、スマートフォンの画面に表示された場合にタブを表示

    <script>
        amazonpayEasyBanner('###出品者ID###').fadeIn(5).sideTab('#payment');
    </script>

3. 貴社サイトの購入完了画面（サンクスページ）への設置

###出品者ID### に自身の出品者ID（merchantId）を設定してください。出品者IDは出品者IDの確認方法をご参考ください。
react.js, vue.js等を用いたSPA (Single Page Application)でページの遷移を伴わずに購入完了画面表示処理を行う場合、amazonpayEasyBanner.jsの実行はページ読み込み時ではなく、購入完了画面表示処理の度に実行するようご実装下さい。

設置例

    <!-- ダウンロードしたamazonpayEasyBanner.jsを設置 -->
    <script type="text/javascript" src="amazonpayEasyBanner.js"></script>

    <!-- amazonpayEasyBanner.jsを実行 -->
    <script>
        amazonpayEasyBanner('###出品者ID###').thanks();
    </script>

機能の説明

本FAQ掲載時点（2024/09/12）では購入完了画面には何も表示されませんが、バナー表示と合わせて設置いただくことでキャンペーン対象者を正しく把握することが可能となります。

4.EasyBannerが表示されることを確認

期待通り、Amazon Payバナーを表示したいページにバナーが表示されることを確認してください。

ご留意事項

Amazonは、本ページで紹介している対応案やサンプルコード（以降、本サンプル）の機能または性能に関して、明示的にも黙示的にも、法律上の瑕疵担保責任、商品性の保証および特定目的適合性の保証についての暗黙の保証を含め（ただし、これらに限定されません）、いかなる保証または表明もいたしません。
本サンプルは現状有姿にて提供され、利用者は自己の単独の責任で使用するものとします。
本サンプルの使用に起因または関連する直接的、間接的、結果的、特別、付随的、懲罰的損害賠償（営業権の喪失、事業の中断、利益もしくはデータの逸失、補償費用、コンピュータの障害もしくは故障を含みます。）を含むがこれらに限定されることなく、原因の如何を問わずおよび責任の法理にかかわらず、Amazonが当該損害の可能性につき通知を受けていた場合であっても、Amazonは、いかなる損害に対しても、責任を負いません。
上記を条件に、本サンプルをご利用いただけます。