Docusaurus(v2)製サイトにGoogle AnalyticsとGoogle Search Consoleを導入する

今年1月に 勉強記録 & ポートフォリオサイト としてDocusaurus製のサイトを作成して以来、Google AnalyticsとGoogle Search Consoleを導入したので、記事化しておきます。

はじめに #

今回使用するバージョンはこちら。

  • @docusaurus/core:2.0.0-alpha.54
  • @docusaurus/preset-classic:2.0.0-alpha.54

    ※2020/08/02追記
  • @docusaurus/core:2.0.0-alpha.61
  • @docusaurus/preset-classic:2.0.0-alpha.61
    に対応して追記しました。

ここでは便宜上、ライブラリをプラグインと書いていきます(Docusaurusのドキュメントもプラグインと書いてあるので)

@docusaurus/plugin-google-gtag #

Google AnalyticsやGoogle広告を導入する際に使用するプラグイン。

@docusaurus/plugin-google-analyticsとの違い #

@docusaurus/plugin-google-analyticsの方はanalytics.js
@docusaurus/plugin-google-gtagの方はgtag.jsになります。

恥ずかしながら、自分は最初この違いがよくわかっていなかったのですが、どうもgtag.jsの方が今の世代になるそうです。
Google Analyticsの管理画面から確認できるトラッキングコードも、そういえばgtagの方でした。

gtag.jsに対して、analytics.jsではGoogle Analyticsにしか対応していません。

公式ガイドと参考はこちら

Google Analytics導入 #

※以前、ブログに導入したときの記事はこちら

サイトをGoogle Analyticsに登録 #

※前提としてGoogleアカウントが必要になります。

  • すでに他サイト等で導入したことがある場合
    管理画面の左サイドバーの「管理」→ プロパティの「プロパティの作成」から。
    Google Analyticsの管理設定画面

  • 新規登録の場合
    Google Analyticsの「無料で利用する」から。

導入対象種別を選択した後、種別に応じた基本情報(サイトURLなど)を入力していきます。

登録が終わると管理画面へ移行します。
そこから「管理」 → プロパティの「トラッキング情報」 → 「トラッキングコード」へ行き、トラッキングIDを控えておきます。

プラグインのインストール #

@docusaurus/preset-classicプリセット使用時はすでに含まれているため、別途インストールは不要です。

$ yarn add @docusaurus/plugin-google-gtag

設定の追記 #

docusaurus.config.jsに以下のように追記。
trackingIDに先ほど控えたトラッキングIDを設定します。

※2020/08/02追記
@docusaurus/preset-classicプリセットが有効の場合(2.0.0-alpha.61にて確認)
こちらではpluginsに記述は不要で、themeConfigにgtag設定を追記のみです。

module.exports = {
  themeConfig: {
    gtag: {
      trackingID: 'UA-XXXXXXXXX-X',
      anonymizeIP: true,
    },
  },
};

@docusaurus/preset-classicプリセットが無効の場合
2.0.0-alpha.54においては、プリセットが有効でも、こちらの記述でも動作しました。

module.exports = {
  plugins: ['@docusaurus/plugin-google-gtag'],
  themeConfig: {
    gtag: {
      trackingID: 'UA-XXXXXXXXX-X',
      anonymizeIP: true,
    },
  },
};

なお、anonymizeIPに関しては任意です。
有効化することで、収集するIPアドレスの末尾を0にして匿名化します。

公式サポートはこちら

匿名化すると、地域情報といったIPアドレスで判定しているようなデータの精度が落ちてしまいますが、GDPR(EU一般データ保護規則)対応として必要になる場合もあるようです。

また、IP末尾が0に変わるため、指定IP除外のフィルタを設定する際も注意が必要です。

プライバシーポリシーの用意 #

Google Analyticsを利用する際は、プライバシーポリシーを記載したページの用意が必要です。

個人情報の保護や取り扱いについての方針を示す必要があり、

  • Cookieを使用していること
  • 設定でCookieは無効にできること
  • 個人を特定する情報は収集しないこと
  • Google Analyticsの利用規約

などの記述が必要になります。


ここまで完了したら、サイトにアクセスしてみて、リアルタイムのアクティブユーザ数がカウントされていれば無事完了です。

自分のアクセスを除外した場合はGoogle アナリティクス オプトアウト アドオンを導入するとよいです。

Google Search Console導入 #

※以前、ブログに導入したときの記事はこちら(より詳細に書いてます)

今回は、Google Analyticsを先に導入しているものとして進めていきます。

サイトをGoogle Search Consoleに登録 #

  • すでに他サイト等で導入したことがある場合
    管理画面の左上のプロパティ(URLなど)を選択して「プロパティの追加」から。
    Google Search Consoleのプロパティ選択画面

  • 新規登録の場合
    Google Search Consoleにアクセスして、「今すぐ開始」から。

プロパティタイプをどちらか選択(自分はURLプレフィックスにしています)

  • URLプレフィックス:そのURLのみの集計
  • ドメイン:「www」のありなしや「http://」「https://」の違いに関わらず一括で登録し、それぞれを集計

所有権の確認では、Google Analyticsを導入済みだと、そこから所有権を確認してくれますが、プロパティタイプがドメインの場合はDNSの確認が必要になるようです。

プライバシーポリシーの用意 #

Google Search Consoleに関しても、プライバシーポリシーに記述が必要になります。

Google Analytics導入時に作成したページをベースにして、追記しましょう。

@docusaurus/plugin-sitemap #

サイトマップを自動生成してくれるプラグイン。

プラグインのインストール #

@docusaurus/preset-classicプリセット使用時はすでに含まれているため、別途インストールは不要です。

$ yarn add @docusaurus/plugin-sitemap

設定の追記 #

docusaurus.config.jsに以下のように追記。

※2020/08/02追記
@docusaurus/preset-classicプリセットが有効の場合(2.0.0-alpha.61にて確認)
こちらでは、pluginsでなく、presetsで使用プリセット設定を記述するところにサイトマップの設定を記述します。

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        // 追記
        sitemap: {
          cacheTime: 600 * 1000, // 600 sec - cache purge period
          changefreq: 'weekly',
          priority: 0.5,
        }
      },
    ],
  ],
}

@docusaurus/preset-classicプリセットが無効の場合
2.0.0-alpha.54においては、プリセットが有効でも、こちらの記述でも動作しました。
こちらでは、pluginsに使用プラグイン定義とともに設定を記述します。

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-sitemap',
      {
        cacheTime: 600 * 1000, // 600 sec - cache purge period
        changefreq: 'weekly',
        priority: 0.5,
      },
    ],
  ],
};

cacheTime #

サイトマップの更新頻度。

changefreq #

ページの更新頻度。設定値はいかのいずれか。

  • always
  • hourly
  • daily
  • weekly
  • monthly
  • yearly
  • never

priority #

サイト内の他のURLと比較したこのURLの優先度。
0.0から1.0までの値を指定。0.5がデフォルト。

これらの設定が全体のデフォルト設定になり、各ページで個別にchangefreqとpriorityを設定できる?と思ったのですが、いまいちやり方がわからず…。


これでサイトマップが自動生成されるようになり、(ドメイン)/sitemap.xmlから確認できます。

サイトマップの読み込み #

Google Search Console にサイトマップを読み込ませることで、サイトを認識させ検索結果に表示させやすくすることができます。

Google Search Console 管理画面の「サイトマップ」から、サイトマップのURLを指定して「送信」を選択。

2.0.0-alpha.60前後か、@docusaurus/preset-classicプリセットの有効無効で設定方法が違う理由(※2020/08/02追記) #

バージョン2.0.0-alpha.60から、1つのDocusaurus製サイトにおいて、同じプラグインを複数回使用することができるという仕様が追加されたようです。

ただ、この場合は以下のようにプラグインにそれぞれIDを振るようにしなければならないとのこと。

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-xxx',
      {
        id: 'plugin-xxx-1',
        // other options
      },
    ],
    [
      '@docusaurus/plugin-xxx',
      {
        id: 'plugin-xxx-2',
        // other options
      },
    ],
  ],
};

もしこのIDを振っていなかった場合は、defaultがIDとなり、ID重複ということで以下のようなエラーになりました。

Error: Plugin docusaurus-plugin-google-gtag is used 2 times with id=default.
To use the same plugin multiple times on a Docusaurus site, you need to assign a unique id to each plugin instance.

自分の場合、Docusaurusのバージョンアップ対応をした際に、このエラーに遭遇しました。
設定を重複して書いたりしてないのになんで?と思いましたが、@docusaurus/preset-classicが有効になっていると、このプリセットに含まれているプラグインも有効となる。

pluginsに別途設定を書く
と、2回使用しているとみなされるようです。

なので、pluginsの方には書かないようにしたところ、無事にエラーが出なくなりました。

参考リンクまとめ #