モチベーション

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

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

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

調査

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

ということで今回はパッケージは使わず 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"
  }
}

関連リンク