楽天アフィリエイトをシングルページアプロケーション(SPA)に表示させる in Vue.js

SPAで構築されたサイトに楽天アフィリエイトのモーションウィジェットを表示させたかったのだが、ただアフィリエイトソースをコピペするだけでは、表示することができなかったので解決法をご紹介。

表示させたかったアフィリエイトバナー

楽天モーションウィジェットという、ユーザーにレコメンドされた商品が表示されるウィジェット。

ソースはscriptタグで構成されており、読み込むとこのソースを貼り付けた箇所にiframeが表示される仕様のようだ。

<script type="text/javascript">rakuten_design="slide";rakuten_affiliateId="114d4165.28f68287.114d4166.99077420";rakuten_items="ranking";rakuten_genreId="100804";rakuten_size="300x250";rakuten_target="_blank";rakuten_theme="gray";rakuten_border="off";rakuten_auto_mode="off";rakuten_genre_title="off";rakuten_recommend="on";rakuten_ts="1539408256268";</script><script type="text/javascript" src="https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script>

通常であれば、ただhtmlファイルにコピペするだけで済むのだが、今回表示させようとしたサイトは、Vue.js＋SSR（SPA）で作成されているがために、上手く動かなかった。

ソースはあるのだが、表示されていない。

解決策

アフィリエイトのソースだけの静的ページを用意して、iframeで読み込むことで、表示することができた。

rakuten_motion_widget.htmlというファイルを用意して、https://sample.jp/public/html/rakuten_motion_widget.html で表示できるようにする。

rakuten_motion_widget.html

<script type="text/javascript">rakuten_design="slide";rakuten_affiliateId="114d4165.28f68287.114d4166.99077420";rakuten_items="ranking";rakuten_genreId="100804";rakuten_size="300x250";rakuten_target="_blank";rakuten_theme="gray";rakuten_border="off";rakuten_auto_mode="off";rakuten_genre_title="off";rakuten_recommend="on";rakuten_ts="1539408256268";</script><script type="text/javascript" src="https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script>

あとは、この静的ページをウィジェットを表示させたいページからiframeで読み込めばよい。

sidebar.vue

div(ref="rakuten_motion_widget")
  iframe(
    src="/public/html/rakuten_motion_widget.html",
    scrolling="no",
    border="0",
    marginwidth="0",
    marginheight="0",
    style="border:none;",
    frameborder="0",
    width="300",
    height="250"
  )

ソースを見ると、用意したiframeの中に、楽天ウィジェットのiframeが読み込まれている方になる。

最後に

今回は、楽天アフィリエイトのウィジェットを使って説明したが、このiframeを一度通す方法は、SPAでは今後もなにかしらの役に立ちそう。
Amazonアソシエイトのサーチウィジェットも楽天アフィリエイトのウィジェットと似たソースだから、この方法で表示させることができる。