VuePress で作ったブログに Google Adsense を導入する

📆January 10, 2020🔖 VuePress

昨日無事 Google Adsense の審査が通りました 👏

早速 VuePress 製のこのブログに Google Adsense を導入し、記事ページの最下部にのみ広告を表示するようにしました。思い通りに表示させるまでに、ちょこちょこハマったので、その手順を記事化しておこうと思います。

調べながら進めたのですが、なかなか体系的にまとまっている記事もなく、うまくいかず諦めてしまった方もいたようだったので、この記事が誰かの参考になれば幸いです。

前提条件

  • Google Adsense の審査が通っていること
  • VuePress を eject していること(コードを埋め込むのに必要です)
  • 必要なライブラリのインストール

    vue-script2 と vue-google-adsense が必要なので、それぞれインストールします。 yarn をお使いの方は以下のコマンドで。 npm の方は適宜読み替えてください。

    yarn add vue-script2 vue-google-adsense

    enhanceApp.js の準備

    Vue.use() を使用して、グローバルで Google Adsense のコードを読み込めるようにする必要があるのですが、そのためには、enhanceApp.js を編集する必要があります。enhanceApp.js 以下のように編集してください。まだ enhanceApp.js がない場合は、こちらの VuePress の公式ドキュメント を参考に、新規でファイルを作成してください。Vue.use() について詳しくはこちらの Vue.js の公式ドキュメントを参照してください。

    // path/to/.vuepress/enhanceApp.js
    
    export default ({ Vue, options, router, siteData }) => {
      if (typeof window !== "undefined") {
        import("vue-google-adsense")
          .then(module => {
            const Ads = module.default;
            Vue.use(require("vue-script2"));
            Vue.use(Ads.Adsense); // ディスプレイ広告
            // Vue.use(Ads.InArticleAdsense); // 記事内広告
            // Vue.use(Ads.InFeedAdsense); // フィード内広告
          })
          .catch(e => {
            console.log(e);
          });
      }
    };

    ポイントとしては、if (typeof window !== "undefined") { で window 関数の有無をチェックしていること。ライブラリ内部で window 関数を使用しているので、フロントで実行される場合のみスクリプトが読み込まれるようにしています。

    現時点では Ads.Adsense のディスプレイ広告しか使っていないので、他の広告に関してはコメントアウトしておくことにします。

    広告表示用コンポーネントの作成

    ここはお好みですが、広告を表示するためのコンポーネントを作成しました。Adsense を薄くラップするイメージです。以下のように ResponsiveAdsense.vue というファイルを作成しました。このファイルを、広告を表示したい箇所でインポートして使用します。data-ad-clientdata-ad-slot の部分は Google Adsense 管理画面から広告を作成し、番号を取得してください。Adsense コンポーネントは、先程の Vue.use() でグローバルに登録されているので、インポートする必要はありません。

    // ResponsiveAdsense.vue
    <template>
      <div class="ads-area" v-if="shouldShowAd()">
        <p class="ads">ADS</p>
        <div>
          <Adsense data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></Adsense>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        // note: 記事ページにのみ広告を表示する
        shouldShowAd() {
          return this.$frontmatter.layout === "Post";
        }
      }
    };
    </script>

    僕の場合は、記事ページでのみ広告を表示したかったので、shouldShowAd() で判定を加えています。(ここはちょっと判定と実装が微妙かもしれないので、適宜書き換えてください。)

    広告表示用コンポーネントの表示

    好きな位置で、先程作成した ResponsiveAdsense.vue をインポートして使用してください。ここで、VuePresseject しておかないと、柔軟にコードを書くことができないので、eject しておくことをオススメします。実装イメージは以下のような感じです。僕は PageEdit.vue らへんに以下を追記しました。

    <template>
      <!-- 中略 -->
      <!-- 表示したい箇所でコンポーネントの読み込み -->
      <ResponsiveAdsense />
      <!-- 中略 -->
    </template>
    
    <script>
    // 中略
    import ResponsiveAdsense from "../global-components/ResponsiveAdsense";
    // 中略
    components: {
      ResponsiveAdsense
    },
    // 中略
    </script>

    これで VuePress に広告を表示させることができました。