VuePressにGoogle Analyticsを付ける方法

こんにちは。Nakataiです。

今回は、うちのブログでGoogle Analyticsをつけたいなと思いつけてみようとしたらカスタムタグの設定方法がわからず四苦八苦していた話をしたいと思います。

ではでは早速行ってみましょう！

※ここからはGoogleアカウントの作成～Analyticsプロパティの作成までやっていることを前提にお話しします。やり方がわからなかったらググってやってください。

まず、Google Analyticsで作ったプロパティに移動します。

そしたら「ウェブサイトから受信したデータはまだありません。」と表示されるなのでその下にある青い「タグの設定手順を確認」というボタンをクリックしてやりましょう。

そしたら「ウェブ ストリームの詳細」という画面に飛ぶはずです。

「データ収集がウェブサイトで有効になっていません。タグを実装してから 48 時間以上経過している場合は、タグが適切に設定されていることをご確認ください。」の右隣、「タグの実装手順を表示する」というところから「 Google タグの実装 」というは画面に飛びます。

で、「手動でインストールする」を選択して、なんかHTMLのJavaScriptコード（以下）が出てきます。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxxx');
</script>

みたいな感じ（xxxxxxxxxxは各自の画面に合わせてください）のコードが出てきますが、これをどうやってVuePressでサイト生成するときの静的HTMLに入れ込むか、ってなったときに、公式のドキュメントをチラ見して、

["script", {
  async: true,
  src: "https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"
}],
["script", 
  `window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxxx');
 `],

みたいに、愚直に書いていたんですが、これだと無事動きませんでした。

-["script", {
+["script", {}, {
  `window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxxx');
 `],

このように{}を追加するだけで動きやがりまして、これに3日ぐらい惑わされていました。

なんなんだったんだ、と思いながらビルドされる様をドキドキしながら見ていました（デプロイされた瞬間に自分のサイトにF5アタック）

さいごに

はい、今回は、headのコードの書き方の参考にfreeserver-wikiのconfigを参考のさせていただきいました。

あざました（）

今はGoogle Tag Managerを使っていますが、こういうことで悩んでいる方の参考になればと思います。

良ければこの記事のシェア、よろしくお願いします！

以上Nakataiでした。