VuePress に Vue-Google-AdSense を導入するための手順とサンプルサイトを作成しました。

https://vuepress-google-adsense.doc.tacck.net/ja/

すぐに導入したい人は、上記を参照してください。

作った経緯

先日こういうことがありました。

もともと Laravel+TDDの基礎 を作成した時に、 VuePress と Vue Google AdSense の導入をやっていて、結構試行錯誤して完成させていました。

実際まとまった情報がなく、こうやって悩む人もいたので需要があるなぁ、と思い、サンプルコード付きの解説サイトを作成しました。

https://vuepress-google-adsense.doc.tacck.net

実際の表示サンプル、コードサンプル、設定の流れを一通り記載したのでこちらを見てもらえれば導入できると思います。
不具合ややりづらい点などあれば、お気軽にコメントください。

少しコードの解説

ヘッドレス(ブラウザレス)環境のために enhanceApp.js を作成

ここは、 VuePress の中で Vue.js 用のプラグインを使う場合に、色々と調整をする場所になります。

今回は、ここで import や Vue.use() を実行して、 VuePress 内で Vue-Googel-AdSense プラグインを使えるようにしています。

ただ、素直にやるとドキュメントのビルド時にエラーが発生します。
これは、 Vue-Googel-AdSense プラグインがブラウザで実行される前提のため、 window オブジェクトが存在する前提の実装となっているからです。

そのため、 VuePress のドキュメントビルド時には window オブジェクトが無いためエラーが発生してしまいます。
これを回避するため、 window オブジェクトが存在する場合にのみプラグインを有効にする処理が必要となりました。

それが下記の部分となります。

  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)
      })
  }

import 文だとファイルの先頭でしか宣言できないのですが、 import() メソッドを使うことで、動的に必要なプラグインを読み込むことができるようになります。

マークダウンでの調整

また、マークダウン側での記載方法も少し工夫が必要でした。
それが <ClientOnly></ClientOnly> タグですね。
使う理由についても本家のドキュメントに記載されています。

理由は前と同じで、ヘッドレス環境の場合にうまくビルドできないコンポーネントをこのタグで囲むと、うまく回避してビルドしてくれるようになるわけです。

これらをうまく整理してあげれば、VuePress用のプラグインとして作れそうですね。時間をみてトライしてみたいと思います。