Docusaurus(v2)の使い方 ~プラグイン編~

今年1月に 勉強記録 & ポートフォリオサイト としてDocusaurus製のサイトを作成して以来、いくつかプラグインを利用したので記事化しておきます。

はじめに #

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

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

ここでは便宜上、ライブラリをプラグインと書いていきます(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を設定します。

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に以下のように追記。

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を指定して「送信」を選択。

参考リンクまとめ #