制作したウェブサイトの情報を調べる時、Google アナリティクスを利用すると、流入経路やコンバーションなど様々なことがわかるようになります。

今回は、Gatsbyjs で Google アナリティクスを設定する方法を紹介します。

Google アナリティクスを設定する

Google アナリティクスのサイトへ移動します。

アカウント作成後、ダッシュボードの左下にある、管理のアイコンをクリックします。

image2

管理の『プロパティを作成』をクリックします。

image3

プロパティ名を入力し、タイムゾーン、通過を選択したのち、『次へ』をクリックします。

image4

ビジネス情報を選択した後、『作成』をクリックします。

image5

プラットフォームは、ウェブを選択します。

image6

ウェブサイトの URL とストリーム名を入力し、『ストリームを作成』をクリックします。

image7

ウェブストリームの詳細の G で始まる測定 ID を覚えておいてください。覚えておいてください。 後ほど必要になります。

image8

もし、測定 ID がわからなくなったら、管理の『データストリーム』をクリックします。

image9

設定したストリーム名をクリックすると、先程のウェブストリームの詳細画面になります。

image10

プラグインをインストールする

Gatsby のプラグインである、gatsby-plugin-google-gtagをインストールします。

インストールのコマンドは、以下の通りです。

npm install gatsby-plugin-google-gtag

プラグインを追加する

開発しているサイトのgatsby-config.jsに gatsby-plugin-google-gtag のプラグインを追加します。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [process.env.GATSBY_TRACKING_ID],
      },
    },
  ],
}

plugins のすぐ下に設定しないと、うまく作動しないことがあるので、gatsby-plugin-google-gtag は、一番目に設定してください。

環境変数を設定する

プラグインに、先程 Google アナリティクスで作成した測定 ID を入力すると危険なので、環境変数を設定しましょう。

ルート直下に.env.development ファイルを作成します。

ファイルの中に、GATSBY_TRACKING_ID = G-xxxxxxxを入力します。

G-xxxxxxx は、測定 ID になります。

次にお使いのホスティングサービスに測定 ID を設定します。

例えば、Netlify でお話しします。

Netlify の『Site Settings』へ移動します。

『Build & deploy』をクリックします。

image11

『Edit variables』をクリックします。

image12

Key に環境変数で設定した変数名『GATSBY_TRACKING_ID』を入力し、Value に測定 ID を入力します。

image13

『Save』をクリックします。

Google アナリティクスが設置されているか確認する

開発サイトをデプロイした後、サイトを開きます。

デベロッパーツールで、Elements を開きます。

ソースに google-analytics が設定されていれば完成です。

image14

サイトの計測に役立ちますので、ぜひ試してみてください。

ブログ一覧