はじめに
Astroで作ったWebサイトにGoogle Analyticsを導入したときのメモです。
Google Analyticsを使うとアクセス数やユーザ情報が分かるので便利です。
手順
Google Analyticsのトラッキングコードを取得する
Google Analyticsの登録方法についての解説は省略します。
UAは2023年7月に廃止となるので、GA4がよいでしょう。
登録ができたら、トラッキングコードを取得します。
トラッキングコードは以下のような形式です。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
ライブラリインストール
ここからはAstroのメンテナの方が書いた記事 の通りに設定しました。
Partytown をインストールします。
npm install -D @astrojs/partytown
設定ファイル追記
astro.config.mjsにPartytownの設定を追加します。
import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";
export default defineConfig({
integrations: [
partytown({
// Adds dataLayer.push as a forwarding-event.
config: {
forward: ["dataLayer.push"],
},
}),
],
});
headタグに追加
レイアウト用のファイルにGoogle Analyticsのトラッキングコードを埋め込みます。
そのまま張り付けると動かないので、少し修正して使います。
-
GA_MEASUREMENT_IDは自身のトラッキングIDに置き換えます。 - scriptタグ に
type=text/partytownを追加します。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: https://ogp.me/ns#">
<!-- Google tag (gtag.js) -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
(略)
</head>
<body>
<slot />
</body>
</html>
(略)
これでAstro製WebサイトでGoogle Analyticsを使ったアクセス解析が可能になりました。
参考文献