JavaScriptのお勉強(5)
とりあえず、Google Adsense だけなら、今はGoogleの広告コードは非同期に変更されていますので、コードをそのまま貼れば良いわけですが。 でも、Google以外のアフィリエイト広告も貼りたい。 広告欄はこれ以上増やさず、同じ欄でGoogleとそれ以外の広告を切り替えて表示したい、という要望があり。 同期ですが、なんでもバリバリ実行してくれちゃう document.write でよいのなら、配列に広告コードを列挙・収納しておいて 乱数で配列を指定してやるという手法で割と簡単にできますが
num = Math.floor( Math.random() * array.length );
document.write( arr[num] );
しかし、やっぱり遅いと言われる document.write を使わずにやりたいと思いまして。 せっかくJavaScriptの同期／非同期に関連して色々勉強したので、ちょっと考えてみたわけです。
手順はそれほど難しくはないですね。素人に毛が生え始めた程度の私でもなんとか思いつく感じで…
- Googleの広告を表示するスクリプトを用意
- 非googleの広告を表示するスクリプトを用意
- アクセス時の秒数を取得（←ナイスアイデア？！笑）
- 秒数が偶数か奇数か判別
- 偶数ならGoogle、奇数なら非Googleの広告を表示
方針としては、document.writeを使わず、広告を表示する空の領域だけを用意しておき、ページ末尾でスクリプトを実行して、innerHTMLでページの読み込み最終部分で広告を差し替える。スクリプトを使わず、単純に画像とリンクだけなら問題もなく、innerHTMLで差し替えられました。Google以外の広告タグ、「A8」や「もしも」のコードは普通のリンク形式ですので、そのまま問題なく表示できます。「VC」はJavaScript非対応のコードが選択できるので、それで良いですね。（スクリプト使わないでよいならそれに越したことないですよね。。。） Googleのほうは一筋縄では行きませんでしたが、前回のやり方でなんとか表示できました。
秒数の取得
<script type="text/javascript">
var dds = new Date();
var sss = dds.getSeconds();
</script>
偶数奇数の判別(比較演算子)
num % 2 == 0
偶数か奇数かで分岐処理(三項演算子)
function command1() {
スクリプト
}
function command2() {
スクリプト
}
(num % 2 == 0)?command1:command2;
⇒ 三項演算子とは
広告表示スクリプト（非Google）
<script type="text/javascript">
var num = Math.floor( Math.random() * aff_test.length );
document.getElementById("adDiv1_test2").innerHTML = aff_test[ num ];
</script>
※別途、aff_testという名前の配列を用意して広告コードを格納しておく。
広告表示スクリプトの関数化
<script type="text/javascript">
function hogehoge() {
var num = Math.floor( Math.random() * aff_test.length );
document.getElementById("adDiv1test3").innerHTML = aff_test[ num ];
}
</script>
Google広告コードの動的生成と関数化
function gadscord() {
var elmDiv = document.createElement('div');
var adsScr = document.createElement('script');
adsScr.async = true;
adsScr.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var adsIns = document.createElement('ins');
adsIns.className = 'adsbygoogle';
adsIns.style.display = 'block';
adsIns.dataset.adClient = 'ca-pub-****************';
adsIns.dataset.adSlot= '**********';
adsIns.dataset.adFormat = 'auto';
adsIns.dataset.fullWidthResponsive = 'true';
var adsGgl = document.createElement('script');
adsGgl.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
elmDiv.appendChild(adsScr);
elmDiv.appendChild(adsIns);
elmDiv.appendChild(adsGgl);
var mntc = document.getElementById('mentechu');
document.getElementById('adDiv1test').replaceChild(elmDiv, mntc);
}
全部合成して実行テスト
広告を表示する領域を用意
<div id="adDivTest3"></div>
上記のスクリプトをまとめて、スクリプト実行 ↓↓↓
調整中…
できたー＼(^o^)／ ・・・できてますよね？(^^;) リロードする度に違う広告が表示されると思います。
※変数名／id等は環境に合わせて変更が必要ですのでご了承願います。
※やってみて分かった事、AMAZONなどの <iframe> を使った広告も、innerHTMLで普通に表示できていますね。 <script>を使ったタグでも、Google以外は試していないので、後で実験してみようと思います。。。 もしかして、iframeを利用すればgoogleなどのスクリプトもそのまま表示される？（規約違反になる可能性もありますが）
コメント