お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓

広告ランダム表示スクリプトv2

WEBデザイン
JavaScriptのお勉強(5)
とりあえず、Google Adsense だけなら、今はGoogleの広告コードは非同期に変更されていますので、コードをそのまま貼れば良いわけですが。

でも、Google以外のアフィリエイト広告も貼りたい。

広告欄はこれ以上増やさず、同じ欄でGoogleとそれ以外の広告を切り替えて表示したい、という要望があり。

同期ですが、なんでもバリバリ実行してくれちゃう document.write でよいのなら、配列に広告コードを列挙・収納しておいて
乱数で配列を指定してやるという手法で割と簡単にできますが
num = Math.floor( Math.random() * array.length ); document.write( arr[num] );
しかし、やっぱり遅いと言われる document.write を使わずにやりたいと思いまして。

せっかくJavaScriptの同期/非同期に関連して色々勉強したので、ちょっと考えてみたわけです。

手順はそれほど難しくはないですね。素人に毛が生え始めた程度の私でもなんとか思いつく感じで…
  1. Googleの広告を表示するスクリプトを用意
  2. 非googleの広告を表示するスクリプトを用意
  3. アクセス時の秒数を取得(←ナイスアイデア?!笑)
  4. 秒数が偶数か奇数か判別
  5. 偶数なら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などのスクリプトもそのまま表示される?(規約違反になる可能性もありますが)

コメント