Astroで作成したサイトにGoogle Analyticsを入れる

前提

• AstroでWebサイトを作成済
• Google Analytics のアカウントをすでに作成してある

手順

Google Analytics の設定

Google Analytics のトップページにアクセスし、測定を開始をクリックします。

任意のアカウント名を入力し、次へをクリックします。

次へをクリックします。

業種、ビジネスの規模をそれぞれ選択し、次へをクリックします。

任意でビジネス目標を選択し、作成をクリックします。

表示される利用規約を読み、同意します。

ウェブを選択します。

アナリティクスを導入したいWebサイトのURLと任意のストリーム名を入力し、作成して続行をクリックします。

作成したストリームをクリックします。

タグの実装手順を表示するをクリックします。

表示されたコードは後ほど使用するため、コピーしておいてください。

コードの実装

今回の実装では、サイトのパフォーマンスを低下させないためにpartytownというライブラリを使用します。

@astrojs/partytown

通常、スクリプトは読み込まれるとメインスレッドで実行されるため、ウェブサイトの表示速度を低下させます。

partytownは、スクリプトをメインスレッドではなくウェブワーカーで動作させるため、ウェブサイトのパフォーマンス低下を防ぐことが可能です。

まずは、以下のコードでpartytownをastroに追加します。

npx astro add partytown

スクリプトがウェブワーカーに読み込まれると、グローバルウィンドウオブジェクトとの通信ができなくなるため、以下の設定を追加します。

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import partytown from "@astrojs/partytown";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [
+   partytown({
+     config: {
+       forward: ["dataLayer.push"],
+     },
+   }),
  ],
});

最後に、先ほどGoogle Analyticsで生成されたコードを一部変更（type=”text/partytown” を追加）して、ウェブサイトのheadタグの直後に貼り付けます。

<script type="text/partytown" async src="<https://www.googletagmanager.com/gtag/js?id=><測定ID>"></script>
<script type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '<測定ID>');
</script>

Google Analyticsのページでテストボタンを押し、緑のチェックマークが表示されれば設定は完了です 🎉