Notion Blog に Google Analytics を追加する

モチベーション

Notion で書いた記事がそのままブログになる notion-blog が公開されたので，早速ブログを書いていこう！と思い立ったのですが，まだまだ notion-blog には色々機能が足りていませんでした。。

エントリが先かサイトが先かという課題を抱えつつ，一緒にやっていけばよいのだということで，notion-blog の拡張をエントリ化していきます。

まずは，PV 見れないと続かないよねーということで，Google Analytics を追加します。

調査

notion-blog は Next.js で作られているので，Next.js のパッケージを使えば出来そうと思い調べ始めたのですが，ちょうど絶賛開発中のようで対応方法に悩みました。

• Next.js の Google Analytics ライブラリを探す
  • https://github.com/sergiodxa/next-ga を発見するも 2020/01/23 に非推奨に
  • https://github.com/zeit/next.js/tree/canary/packages/next-plugin-google-analytics をお奨めされるも 2020/02/16 現在 は Unstable 状態
• React.js の Google Analytics ライブラリ https://github.com/react-ga/react-ga を使う案も一瞬思ったけど，React.js 久しぶりすぎる & TypeScript 全く分からないので導入できるか不明

ということで今回はパッケージは使わず next-plugin-google-analytics を参考に直接 notion-blog に実装しました。

実装内容

https://github.com/zeit/next.js/blob/canary/packages/next-plugin-google-analytics/src/document-head-tags-server.js を参考に https://github.com/oikwsat/notion-blog/commit/d26a55e1972370fccf5f0493cdc403071346eef3 を実装しました。

<>
  <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`} />
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${process.env.GA_TRACKING_ID}');
      `,
    }}
  />
</>

補足

GA_TRACKING_ID は変数化したほうが良いよねと思い，ZEIT での設定方法を調べ https://zeit.co/docs/v2/serverless-functions/env-and-secrets#providing-environment-variables を見つけたけど，いまいち分からなかったので今回は見送りベタ書きとしました。

{
  "env": {
    "GA_TRACKING_ID": "UA-XXXXXXXXX-1"
  }
}

関連リンク

• https://twitter.com/_ijjk/status/1216812149361860608
• https://qiita.com/serinuntius/items/d4b1e9ef53b59033f607
• https://github.com/ijjk/notion-blog
• https://github.com/oikwsat/notion-blog