Vue.jsで作ったサイトにアフリエイト広告を出したかった
目次
この記事で書くこと
個人サイトにアフリエイト広告を貼りたい。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の操作ができるらしい。
|
1 2 3 4 5 6 7 8 |
mounted() { this.$nextTick(() => { # refer specific dom name # append new DOM with src HTML dom tree let targetElement = this.$refs.first_child <- first_child is dom name div.innerHTML = '<src type="text/javascript"></> }) } |
で、試してみた結果は・・・ダメだった。<script>命令をDomに挿入はできる。だけど、挿入した<script>命令が実行されない。。。あきらめた。
dom + Vue component
DomをVueコンポーネントと紐付けして、Vueコンポーネントの中身でDom描写を強制的に実行する方法があるらしい。
やってみた。結果、ダメだった。