2022/2/15

【Vue.js】グーグルアドセンス広告を導入する方法

この記事からわかること

Vue.jsにGoogle AdSenseを導入する方法
専用ライブラリのインストール方法
実際のtemplateへの記述

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Vue.jsを使ったアプリケーションやWebサイトにGoogle AdSenseの広告を貼って表示させる方法をまとめていきます。今回はLaravelでフレームを作り、Vue.jsでコンポーネント切り替えを行っているような場合を解説していきます。

Vue.jsにGoogle AdSenseを導入する方法

Vue.jsのtemplate内にはscriptタグが使えないのでGoogle AdSenseのコードをそのままコピペして貼り付けても当たり前ですがエラーが起きてしまいます。

<template>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=XX-XXX-XXXXXXXXXXXXX" crossorigin="anonymous"></script>
    <ins class="adsbygoogle" 
        style="display:block" 
        data-ad-format="fluid" 
        data-ad-layout-key="XXXXXXXXXXXXXX" 
        data-ad-client="XX-XXX-XXXXXXXXXXXXX" 
        data-ad-slot="XXXXXXXXXXX"></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</template>

<script>
export default {
  name: 'AdSense',

}
</script>

↓以下のようなエラーが起きてしまう

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

ライブラリ：Google Adsense for Vueのインストール方法

導入するには専用のライブラリ「Google Adsense for Vue」を使うと簡単です。

まずはプロジェクト内にライブラリを追加します。以下のコマンドをカレントディレクトリをプロジェクト内に合わせて実行します。

$ npm install vue-adsense --save

Node.jsを使ってインストールしますので未導入の方はこちらの記事を参考にインストールしておいてください。

実行すると以下のようになり、ライブラリがインストールが完了します。

added 1 package, and audited 974 packages in 3s

90 packages are looking for funding
run `npm fund` for details

18 vulnerabilities (4 low, 13 moderate, 1 high)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

Google Adsense for Vueの使い方

これでインストールは完了したので実際に使えるように設定をしていきます。

まずはプロジェクト内のファイル「resource」＞「js」＞「main.js(またはapp.js)」を編集します。

├── Laravelプロジェクト
│    ├── app
│    ├── Http
│    ├── resource
│    ├── view
│    └── js
│           ├── bootstrap.js
│           └── ★main.js(app.js)

ここで大元のVueインスタンスにコンポーネントやライブラリ(VuexやVue Routerなど)をimportしているので、先程インストールしたAdSenseライブラリも同様に使えるようにしていきます。

main.js(app.js)

require('./bootstrap');

window.Vue = require('vue').default;

import router from "./router.js"; 
import store from '../../src/store';
import App from "../../src/App.vue";

// ★追記：importでまず読み込む
import VueAdsense from 'vue-adsense'

// ★追記：コンポーネントとして<adsense>で使えるように組み込む
Vue.component('adsense', VueAdsense);

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

続いてVue.jsを使っていないレイアウト部分(index.htmlやレイアウトの元のblade.phpなど)に以下のスクリプトコードを埋め込みます。webpackなどでビルドしたものが組み込まれるbuilt files will be auto injected (ビルドされたファイルは自動挿入されます)下あたりに入れておきます。

├── Laravelプロジェクト
│    ├── app
│    ├── Http
│    ├── resource
│            └── view
│                 └── ★index.blade.php

index.blade.php

@section('main')
<div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- ↓ここに追加 -->
    <script async src="/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=XX-XXX-XXXXXXXXXXXXX"></script>
@endsection

これはAdSenseコードを取得した際のこの部分をscriptタグに置き換えたものです。

AdSenseコード

 // ここの行を抜き出す
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=XX-XXX-XXXXXXXXXXXXX" crossorigin="anonymous"></script>
<ins class="adsbygoogle" 
    style="display:block" 
    data-ad-format="fluid" 
    data-ad-layout-key="XXXXXXXXXXXXXX" 
    data-ad-client="XX-XXX-XXXXXXXXXXXXX" 
    data-ad-slot="XXXXXXXXXXX"></ins>

次にVue.jsのtemplate内に<adsense>タグを使ってAdSenseのコードを記述します。

<template>
    <adsense
      ad-client="XX-XXX-XXXXXXXXXXXXX" // ①
      ad-slot="XXXXXXXXXXXXXX"         // ②
      ad-style="display:block"
      ad-format="fluid">
    </adsense>
</template>

<script>

export default {
  name: 'AdSense',

}
</script>

ad-clientとad-slotの部分は自分のAdSenseコード部分を転記してあげればOKです。

Google AdSense

これでOKだと思ったらエラーが出ました。どうやらmain.js(app.js)でimportしているAdSenseライブラリがうまく読み込めていないようです。

WARNING in ./resources/js/app.js 14:14-24
export 'default' (imported as 'VueAdsense') was not found in 'vue-adsense' (module has no exports)

webpack compiled with 1 warning

なのでnode modules内(node_modules/vue-adsense/main.js)にインストールされたAdSenseライブラリを修正しにいきます。

中を開くと以下のようになっているのでexport defaultに書き換えます。

node_modules/vue-adsense/main.js

import VueAdsense from './VueAdsense.vue'
module.exports = VueAdsense
       ↓↓↓↓↓↓↓
import VueAdsense from './VueAdsense.vue'
export default VueAdsense

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。