라쿠텐 제휴를 싱글 페이지 업로케이션(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 라는 파일을 준비하고 h tps : // / mp ぇ. jp / 푸 b c / html / 라쿠텐 _ 모치온 _ 우드 t. 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 어소시에이트의 검색 위젯도 라쿠텐 제휴사의 위젯과 비슷한 소스이기 때문에 이 방법으로 표시시킬 수 있다.