アフィリエイト

複数のアフィリエイト広告タグを切り替え配信して効果検証できるツールを作りました

2022/12/27

広告を貼って収益を得る方法としては、ASP/SSP/アドネットワークなど様々なタイプのサービスがあり、このブログで把握してるだけでも合計100社を超えるサービス事業者がいます。

【最新】ASP一覧71選

【最新】SSP一覧17選

【最新】アドネットワーク一覧42選

どの広告が一番収益が稼げるかというのは、メディアや掲載位置との相性もあるため、実際に配信してみるまではわからないのが実情です。

一定期間、複数の広告を同時に配信して、売上の高い方を採用する、というようなA/Bテストを行うのがもっとも一般的です。

そのためには、一般的にはアドサーバー等で配信比率を調整して広告配信するケースが多いかと思います。

もっと手軽に、アフィリエイト広告のA/Bテストを実装する方法がないだろうか、と思って制作してみたものが、「広告タグ配信比率設定ツール」です。

本記事はこちらのツールの解説記事です。

解説

ツールの機能を端的に説明すると、複数の広告タグと各タグの配信比率を設定してそれらをまとめ、ひとつのJavaScriptタグを作成できるツールです。

タグ内部に簡易的なアドサーバー機能を持たせることができるため、手軽に広告のスプリットテスト（A/Bテスト）を行うことが可能です。

具体的な使用例としては、4つの広告を25％の確率で切り替わるよう表示割合を設定し、各広告の収益・CTR・CPMなどを比較することで最適な広告を見出すテストが可能といったものです。

※広告タグの形式によっては正常に表示できないケースもあります。必ず表示テストを行ってからご利用ください。また、何かありましたらお手数ですがTwitterのDMまでお願いいたします。

イメージ・デモ

実際に配信するためのアフィリエイト広告タグを大量に用意することはできなかったので、簡易的にイメージできるデモページを作りました。

デモページへのリンク

※デモページ内でブラウザ更新することで、広告の切り替わりを確認することができます。

コード

今回実装したコードは以下のようになっています。

//広告タグと確率が入る
const tags = [
 { tag: 'ここにタグが入る', prob: 'ここに確率が入る'},
 { tag: 'ここにタグが入る', prob: 'ここに確率が入る'}
];

//確率(prob)を適用してルーレット
const pickTheTag = (tags) => {

 const min = 1;
 const total = tags.reduce((sum, tag) => sum + tag.prob, 0);
 const takingPerFromTotal = Math.floor(Math.random() * (total + 1 - min)) + min;
 let result = [];
 let totalProb = 0;
 let i = 0;

 while (i < tags.length) {
  totalProb += tags[i].prob;
  if (takingPerFromTotal <= totalProb) {
   result = tags[i];
   break;
  }
  i++;
 }

 return result;
}

//選ばれたタグをiframeで書き出し
const resultTag = pickTheTag(tags);
const scriptDiv = document.querySelector('.scripts');
let iframe = null;

const generateIframe = () => {
 iframe = window.document.createElement('iframe');
 iframe.setAttribute('framespacing', '0');
 iframe.setAttribute('frameborder', 'no');
 iframe.setAttribute('scrolling', 'no');
 iframe.setAttribute('style', 'width:設定した横幅を代入;height:設定した縦幅を代入;max-width:100%; max-height:100%;display:block;');
 scriptDiv.appendChild(iframe);

 iframe.contentDocument.open();
 iframe.contentDocument.write(\`<html><head></head><body style="margin:0;padding:0;">\${resultTag.tag}</body></html>\`);
 iframe.contentDocument.close();
}
window.document.addEventListener('DOMContentLoaded', generateIframe);

コード内のコメントにもある通り、一番上が広告タグと、それぞれの確率を設定している配列です。

この確率を加味してルーレットを回し、配信する一つの広告を表示します。

コード内でポイントとなっている部分はgenerateIframeの関数式にあるiframeの部分です。

最終的にルーレットを終えて選ばれた広告タグは、Document.writeを利用しても表示することはできるのですが、現在Document.writeは非推奨となっています。

そのため、一度iframeを生成し、その中にcontentDocument.writeをすることで広告を表示させることができます。

また、実際の広告タグはscriptタグで囲まれていることが多いかと思います。

scriptタグの中にscriptタグを記述してしまうと、たとえ文字列だったとしても反応してしまい、正しく読み込まれません。

そこで、実際にツールを使う際に貼り付けていただくscriptタグは、最終的にテンプレートリテラルで分割されて生成されるような機能を実装してみました。

イメージとしては、<script>が　`<sc` + `ript>`になるような感じです。

こうすることで、scriptタグの中にscriptタグを記述することが可能になります。