Vueのコンポーネント内にGoogle Adsenseのコードを書く方法

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
¥4,555 (2022/12/05 22:31:30時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA