VuePressで作成したブログ(当ブログ)にgoogleアナリティクスを連携させたいと思ったのですが、 各ページの内容を実際に触って編集するファイルはHTMLファイルじゃなくてmdファイルなので、「あれ、どうやってheadにコードを追加すればいいんだ?」ってなった訳です。
調べて見ると...アナリティクスを連携させる為のプラグインがありました。
まずはプラグインをインストールしましょう。
プラグインをインストール
yarn add -D @vuepress/plugin-google-analytics
又は↓
<!-- npm install -D @vuepress/plugin-google-analytics -->
yarn 又は npmでプラグインをインストールします。
私はnpmでインストールしました。
※VuePress運営側はYarnでプラグインをインストールすることを推奨しています。
config.jsに追記
module.exports = {
plugins: [
[
'@vuepress/plugin-google-analytics',
{ga: 'トラッキングID'},
]
],
}
上記の記述をconfig.jsに追記してあげましょう。
トラッキングIDは、本来headに挿入する予定だったトラッキングコードから取得できます。
トラッキングコードの例↓
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=トラッキングID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'トラッキングID');
</script>
あとは通常通りbuildして反映してあげましょう。