index.htmlに以下のような標準コードを加えるだけで広告の表示自体はできる。
|
1 2 3 4 |
<script type="text/javascript"> var nend_params = {"media":xxx,"site":xxx,"spot":xxx,"type":x,"oriented":x}; </script> <script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script> |
ただ位置を調整したり複数表示する場合に使いにくいのと、アプリ化したときにリンクの不具合が起きる。
検索してコンポーネントを見つけたがSDKを使う用途の本格的なものだったので簡単なものを作った。
DOM準備後にスクリプトを挿入して、ロード完了時にリンク設定をしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import React, { Component } from 'react'; class Nend extends Component { nendManage = ()=>{ var nend_links = document.querySelectorAll('.nend_wrapper a'); for(var i = 0; i < nend_links.length; i+=1){ (function() { var href = nend_links[i].href; nend_links[i].href = "#"; nend_links[i].onclick = function(){window.open(href); return false;} })(); } } componentDidMount(){ const dom = document.querySelector(".nend_wrapper"); const p = this.props.params; const s1 = document.createElement("script"); s1.type = 'text/javascript'; s1.async = true; s1.innerHTML = `var nend_params = {media:${p.media},site:${p.site},spot:${p.spot},type:${p.type},oriented:${p.oriented}};`; dom.appendChild(s1); const s2 = document.createElement("script"); s2.src = "http://js1.nend.net/js/nendAdLoader.js"; s2.async = true; dom.appendChild(s2); window.addEventListener("load",this.nendManage); } render() { return ( <div className="nend_wrapper"></div> ); } } export default Nend; |
呼び出す側でnend_paramsを渡します。
|
1 |
<Nend params={{media:xxx, site:xxx, spot:xxx, type:x, oriented:x}}/> |
クラスやIDを付けて調整するときはラッパーに入れてそちらを設定します。