..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−その他(広告ローテートチェンジャー)

JavaScript 無料のフリースクリプト集...
cmchangeJavaScript
広告ローテートチェンジャー

  コンテンツが充実してページ数が増えてくると広告の管理って大変じゃないですか?広告がマンネリ化すると広告クリック数が低減します。わかっちゃいるけど大昔につくったページまで手がまわらない・・・。でも大丈夫、JavaScriptで解決!外部参照方式なので一括更新が可能なんです!広告はローテートされて表示されます。テキスト広告やサイズの異なるバナー広告も一括管理できます。
  • 表示方法は順番表示モードとランダム表示モードから選べます。クッキーが無効の場合は自動的にランダム表示モードになります。
  • 広告以外にも自サイトのコンテンツの宣伝や、アクセスランキング、バナーエクスチェンジなど、ページにHTMLを埋め込む処理ならどんなことにも活用できます。
  • プログラムファイル名を変えることでジャンル別に管理することもできます。
  • 外部参照ファイル形式でブラウザにキャッシュされるので、多岐に渡ったページで使用しても読み込み速度が早く、軽く動作します。
  • 広告の一覧を表示させることができます。
 

 HPでの使用方法
  +++ Contents +++
1.プログラムのダウンロード
2.プログラムの編集(表示モードの設定と広告HTMLの記入)
3.広告を表示するページの編集
4.管理広告の一覧表示
5.うまく動かないときはここをチェック




1.プログラムのダウンロード

  プログラムと広告一覧表示HTMLをダウンロードして下さい。プログラムファイルをサーバーにアップロードする時は、管理しやすいようにルートディレクト リ(またはトップページのディレクトリ)へアップロードすることをお勧めします。広告一覧HTMLはサーバーにアップロードする必要はありません。次のリ ンクを右クリックして「対象をファイルに保存」を選ぶとダウンロードできます。

プログラムファイル:cmchange.js
広告一覧表示HTML:cmtest.html


2.プログラムの編集(表示モードの設定と広告HTMLの記入)

  プログラムファイルをサーバーにアップロードする前に、テキストエディタ等で編集して、表示モードの設定と広告のHTMLを記入します。このプログラムではテキスト広告(短文)、テキス ト広告、バナー広告大(468*60程度)、バナー広告中(100*60程度)、バナー広告小(88*31程度)を同じプログラムで管理します。
この作業はCGIを連携させるとウエブ上で管理画面を設けることができ、アップロードもできるようになります。今後、CGIのプログラムも開発する予定です。(時期は未定)

2-1.プログラムファイルの編集
mode=0;

//*** 広告URL(広告数は任意)***

//*** テキスト広告 短文 ***
cmTxtS=[
//アフィリエトパートナー名
'<a href="#">テキスト広告(短文)1</a>',
//アフィリエトパートナー名
'<a href="#">テキスト広告(短文)2</a>',
・・・
];
      ・
      ・
      ・
//*** バナー広告 大 ***
cmPicL=[
//アフィリエトパートナー名
'<a href="#"><img src="*.gif" width="468" height="60" alt="バナー広告 大1"></a>',
//アフィリエトパートナー名
'<a href="#"><img src="*.gif" width="468" height="60" alt="バナー広告 大2"></a>'
];
      ・
      ・
      ・
←0の場合「順番表示モード」、1の場合「ランダム表示モード」

←ここでは、短いテキスト広告を記入します。

←注釈行に広告の種類がわかるように書き込んでおきましょう
←それぞれの配列に広告のHTMLを記入します
  広告の数はいくつでもかまいません
← ※シングルクォート『’』でHTMLを囲みます
  ※HTML部分は改行を入れないで記入してください




←ここではバナー広告大(468*60程度)を記入します。

←テキスト広告同様、広告の種類を記入
←※テキスト広告同様シングルクォート『’』でHTMLを囲みます
←※カンマ『,』も忘れずに!


←※最終の広告にはカンマ『,』を入れてはいけません

2-2.標準的な広告HTML
−バナー広告の例−
<a href="http://cm.net/aaa?a1net=XXXX+XXXX+XXX+XXXX" target="_blank">
<img alt="ClickHere!" src="http://www5.cm.net/cgt?abc=xxx&def=xxx&ghi=xx&jkl=xxxxx&mn=x">
</a><img border="0" width="1" height="1" src="http://www1.cm.net/x.gif?a1net=XXXX" alt="">

−テキスト広告の例−
<a href="http://cm.net/aaa?a1net=XXXX+XXXX+XXX+XXXX" target="_blank">
[PR]+1JavaScript入門&サンプル集〜今すぐ使えるフリーソフト素材集〜/A>
<img border="0" width="1" height="1" src="http://www4.cm.net/x.gif?a1net=XXXX" alt="">

※この例では『』部分に改行が入っています。改行が入ったままで実行しても広告は表示されないので、改行を削除して一行のHTMLに編集する必要があります。
この作業もCGIと連携することで自動化できます。今後、CGIのプログラムも開発する予定です。(いつかはワカリマセン・・・)



3.広告を表示するページの編集

 下記の<div>タグを広告を表示する部分に埋め込んでください。

<div class="cmTxtS">CM</div>
  テキスト広告(短文)
<div class="cmTxt">CM</div>   テキスト広告
<div class="cmPicS">CM</div>   バナー広告小(88*31程度)
<div class="cmPicM">CM</div>   バナー広告中(100*60程度)
<div class="cmPicL">CM</div>   バナー広告大(468*60程度)

 広告を表示するページの<body>〜</body>タグ間の最終行に下記のタグを埋め込んでください。プログラムファイルを置いているディレクトリと違うディレクトリのページで実行する場合はパスを通してください。(パスの設置例)

<script type="text/javascript" src="cmchange.js"></script>



4.管理広告の一覧表示

 プログラムファイルの10〜12行目のフラグを「true」にして、広告一覧表示HTML(cmtest.html)を実行してください。通常この作業はオンラインの状態で、プログラムファイルと広告一覧表示HTMLをハードディスクに置いた状態で行います。

// 広告の一覧を見る場合はtrueにしてください
//cmcheack=false;
cmcheack=true;

広告一覧表示サンプル
広告一覧表示のサンプル
(プログラムファイルのデフォルト状態なのでダミーのリンクが入っています)




5.うまく動かないときはここをチェック!

 @.広告URLはシングルクォートで囲んでいますか?【参照】
 A.広告URLの配列のカンマは適切に入っていますか?
【参照】
 B.広告URLに改行が入っていませんか?【参照】
 C.プログラムファイルが一覧表示モードのままサーバーにアップしていませんか?
 D.『<script type="text/javascript" src="cmchange.js"></script>』は<body>〜</body>タグ間に入れましたか?
 E.Dは<body>〜</body>タグ間の最終行に入れましたか?

 F.Dの『src="cmchange.js"』のパスは間違っていませんか?
■パスの設定例

   publick_html /  cmchange.js(プログラムファイル)
       |     index.html←『src="cmchange.js"』
       |
       +-- sample / menu.html←『src="../cmchange.js"』
            |
            +-- image / sozai1.html←『src="../../cmchange.js"』
                |
                +--download / dl.html←『src="../../../cmchange.js"』





..


..