はじめに
エンジニア歴4年目に突入したハヤシと申します。(インフラ:2年,WEB:1年)
現在、前勤めていた会社の先輩と一緒に「Pokeloop」というアプリを作っており、そろそろ広告埋め込みたいなぁーと思ってVueで広告コンポーネントをつくってみました。google adsense等、大手の広告をvueに埋め込むやり方は結構出てくるけど、あまり有名じゃないところだと埋め込む方法が出てこなかったので備忘録的に残したいと思います!
ちなみに「pokeloop」はパーティー相性表をはじめとするポケモン対戦における便利なツールを提供しているサイトです!UI等かなりこだわってますので、ぜひ一度訪れてください!
https://pokeloop.com/
開発環境
vue: 2.6.10
扱う広告の種類
今回はjsを埋め込むと、自動的にDOMが生成されるタイプの広告を扱います。それ以外ではこのやり方ではうまく行かない場合があるかもしれません。
作り方
自動的にDOMが生成されるタイプの広告をvueで扱うためには、iframeという他のサイトを埋め込めるhtmlのタグを使用して、広告を埋め込みます。単純にjsを埋め込むだけだとダメでした。
###OKな例
iframeタグを作成して、その中にjsタグを埋め込む形にしています。
<template>
<div ref="ads" class="ad"></div>
</template>
<script>
export default {
async mounted() {
const iframe = document.createElement('iframe');
const head = document.getElementsByTagName('head')[0];
this.$refs.ads.appendChild(iframe);
const html = '<body><script src="https://cdn.com/somescript.js"><\/script><\/body>';
const iframeDocument = iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.write(html);
iframeDocument.close();
}
}
</script>
###ダメな例
これではうまくいきません。多分document.writeでDOMを作ってる部分が動かないためです。
<template>
<div ref="ads" class="ad"></div>
</template>
<script>
export default {
async mounted() {
// スクリプトタグを生成
let scriptEl = document.createElement('script');
// スクリプトタグにjsをセットする
scriptEl.setAttribute('src', 'https://cdn.com/somescript.js');
// this.$refsを使い、DOMに埋め込む
this.$refs.ads.appendChild(scriptEl);
}
}
</script>
<style lang="scss" scoped>
</style>
終わりに
いかがでしたでしょうか。これで広告コンポーネントを作成することができると思います。
なにか記事の内容に不備があればご指摘お願いします。
見ていただきありがとうございました!