13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsで広告を埋め込んだコンポーネントを作る

Posted at

はじめに

エンジニア歴4年目に突入したハヤシと申します。(インフラ:2年,WEB:1年)
現在、前勤めていた会社の先輩と一緒に「Pokeloop」というアプリを作っており、そろそろ広告埋め込みたいなぁーと思ってVueで広告コンポーネントをつくってみました。google adsense等、大手の広告をvueに埋め込むやり方は結構出てくるけど、あまり有名じゃないところだと埋め込む方法が出てこなかったので備忘録的に残したいと思います!

ちなみに「pokeloop」はパーティー相性表をはじめとするポケモン対戦における便利なツールを提供しているサイトです!UI等かなりこだわってますので、ぜひ一度訪れてください!
https://pokeloop.com/

開発環境

vue: 2.6.10

扱う広告の種類

今回はjsを埋め込むと、自動的にDOMが生成されるタイプの広告を扱います。それ以外ではこのやり方ではうまく行かない場合があるかもしれません。

■動作確認広告
1.忍者AdMax
2.アスタ

作り方

自動的にDOMが生成されるタイプの広告をvueで扱うためには、iframeという他のサイトを埋め込めるhtmlのタグを使用して、広告を埋め込みます。単純にjsを埋め込むだけだとダメでした。

###OKな例
iframeタグを作成して、その中にjsタグを埋め込む形にしています。

ads.vue
<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を作ってる部分が動かないためです。

ads.vue
<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>

終わりに

いかがでしたでしょうか。これで広告コンポーネントを作成することができると思います。

なにか記事の内容に不備があればご指摘お願いします。

見ていただきありがとうございました!

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?