Vue.jsで作ったサイトにアフリエイト広告を出したかった

A8バナー広告

この記事で書くこと

個人サイトにアフリエイト広告を貼りたい。Google Adsenseの審査に却下されるので、広告配信システムもどきを自作した。

この記事を読むとうれしい人

  • Vue.jsやらReactやらでサイト制作している人
  • サイトに広告を出したい人
  • Google Adsenseに申請だしたけど、却下される人

そもそもなんでこんなことしてるか

個人制作サイトに広告を出したかった。これだけをやりたいならば、そもそもGoogle Adsenseを使えばいい。

Google Adsenseがデザインも広告の最適化もぜーんぶ、やってくれる。じゃあ、どうしてGoogle Adsenseを使わないのかって?申請が却下されたからだよーん。

満たしたかった仕様

  • 多言語サイトなので、言語に応じて表示する広告言語を切り替えする。
  • 出稿する広告の管理を簡単に管理する。
  • 広告は表示のたびに切り替えしたい。
  • 広告は期限切れになることもある。期限きれの広告は自動的に表示対象から外す。

結局どうしたか?

APIに広告のHTMLパーツを配信するメソッドをつくった。

広告の管理はJSONファイルで管理する。JSONファイルはS3に配置する。

APIがS3のJSONファイルから読み込みして、フロントエンドに配信。

どんなことを試してみた?

メモがてらに試してみたことも書き残ししておく。

何が難しい?

日本での広告配信の大手といえば、A8があると思う。A8には「ローテーション広告」っていうシステムがある。こいつを使うと、A8の管理画面で配信する広告を管理できる。楽☆

って思った?ざんねーん!!ぜんぜん楽じゃありませーん。ローテーション広告をサイトに設置するためには、<script javascript/text>で記述するパーツを、広告表示したい箇所に設置すればいい。

A8から配信されるjavascriptには、documentに直接書き込み命令が記述されている。で、問題はここから。Vue.jsの仕様では、bodyの中に<script>を記述することができない。

でも、A8から配信されるjavascriptは「設置された箇所にdomを配置する」という仕様になっている。

というわけで、ローテーション広告の標準機能は使えないという結論。

でも、なんとかしてA8から配信されるjavascriptの内容を呼び出して使いたい。そこで、Vueコンポーネントの<script>箇所にいい感じに命令を書いて実行できないか・・・?と試してみた。

vue next tick

Vue.jsにはライフサイクルシステムがある。このうち、mountedは「Domが完成してから実行される」という命令を記述できる。

しかし、よくよく考えると、<script>命令はDomが作成される時点には実行されていないと行けない・・・?うーん。よくわからん。そこで、nextTick()機能を使ってみることにした。要するに、遅延してDomの操作ができるらしい。

で、試してみた結果は・・・ダメだった。<script>命令をDomに挿入はできる。だけど、挿入した<script>命令が実行されない。。。あきらめた。

dom + Vue component

DomをVueコンポーネントと紐付けして、Vueコンポーネントの中身でDom描写を強制的に実行する方法があるらしい

やってみた。結果、ダメだった。