Gatsby.js + Google Analytics + Programable Search Engine で参考になった記事を紹介します

こんにちは、@sakay_yです。実は、サイボウズのエンジニアサイト Cybozu Tech の運用管理人をやってます。
この記事は先人の知恵をお借りして、無事にGoogle AnalyticsとGoogle検索を置くことができたのでその作業メモです。

前提の話

• Cybozu Tech は Gatsby.js で作っています

• 旧Google Analyticsは2023年7月1日で利用できなくなります

Google Analyticsを置き換える

これは以下の記事のお世話になりました。

GatsbyでGoogle Analytics 4が動かなかった

やったこと

1. Google Analyticsのホーム画面に出るヘッダから「Google アナリティクス 4 プロパティの設定アシスタント」を開始

2. タグを生成

3. gatsby-plugin-google-analyticsをアンインストール

4. gatsby-plugin-google-gtagをインストール

5. gatsby-config.jsに2で生成したタグの設定を追加

以上です。設定は以下のような感じです。

module.exports = {
    ...
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["G-XXXXXXXXXX"],
        pluginConfig: {
          head: true,
        }
      }
    }
  ]
}

反映されたら、リアルタイムの情報が更新されるようになりました。

Programable Search EngineでGoogleのサイト内検索を設置する

よく見るGoogle提供のサイト内検索です。これを今回Cybozu Techのトップページに配置してみました。

やったこと

1. 検索エンジンの作成

2. サイトに貼り付けるためのコードをコピー

3. Gatsby.jsの仕組み上でもうまく表示されるように、コーディングする

検索エンジンの作成方法は公式のヘルプにあります。

検索エンジンの作成 - Programmable Search Engine ヘルプ

Gatsbyで上手に表示する方法ですが、以下の投稿が参考になりました。

Google Custom Search Box doesn't appear on first load in my Gatsby project, only appears second load - Programmable Search Engine Community

以上です。

なお、Cybozu Tech内のProgramable Search Engineですが、Cybozu Techだけではなく、ブログであるCybozu Inside Outなども検索対象に含めてみました。反応を見ながら調整できれば良いかなと思っています。（Programable Search Engineは統計データも確認できます！）