vueのコンポーネント内に単にアドセンスのコードを貼り付けただけではビルド時にエラーになり、広告を表示することができません。
そこで、今回はVueのコンポーネントを使う場合のアドセンスコードをの貼り方について紹介します。
Vueコンポーネント内にアドセンスコードを貼る手順
1. アドセンスコードを貼るための設定
ちょっと面倒ですが、「vue-adsense」というプラグインを使って対応します。
なので、まずは以下のコマンドでインストールします。
npm install --save-dev vue-adsenseインストールできたら、 「node_modules/vue-adsense/main.js」を次のように修正します。
import VueAdsense from './VueAdsense.vue'
// module.exports = VueAdsense 削除
export default VueAdsense //追加続いて、htmlの</body>直前にアドセンス広告を表示させるためのスクリプトを記入します。
<body>
<div id ="app">
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>最後にコンポーネント内で「vue-adsense」を使うためのの記述を追加します。
<script>
import VueAdsense from 'vue-adsense'
export default {
components: {
'adsense': VueAdsense
},
</script>これで準備は完了です。
2. アドセンスコードの貼り方
以下のような形式で、アドセンスコードを追加します。
<adsense
ad-client="data-ad-clientの値を記入"
ad-slot="data-ad-slotの値を記入"
ad-style="スタイルを記入（display:blockやサイズなど）"
ad-format="data-ad-formatの値を記入">
</adsense>表示までには少し時間がかかりますが、これで広告が表示されるようになります。
Vueを使ってSPAサービスを作ったものの、アドセンス広告が表示できず困っているという方は試してみてください。
created by Rinker
¥3,699
(2024/04/23 22:36:10時点 Amazon調べ-詳細)
(2024/04/23 22:36:10時点 Amazon調べ-詳細)
