見出し画像

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

Yasuharu Sakai

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

前提の話

Google Analyticsを置き換える

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

やったこと

  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の仕組み上でもうまく表示されるように、コーディングする

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

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

以上です。

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


この記事が気に入ったらサポートをしてみませんか？