【2023年5月版】
GoogleアナリティクスのタグをAstroサイトに追加
公開日: 2023/05/07
読了時間: 約 2分
せっかくサイト立ち上げたのにアクセス解析しないなんて！ということでサイトにGoogleアナリティクス追加したいと思います。
参考サイトは以下のページになります。
https://www.kevinzunigacuellar.com/blog/google-analytics-in-astro/
このサイトの手順に沿って進めてまいります。
Googleアナリティクスでトラッキングタグを取得
まずGoogleアナリティクスでアカウント、プロパティ、ストリームの追加を行ってください。 これは画面の入力フォーム通りで問題ないかと思います。
ストリームの追加が終わって測定ID(Tracking ID)が取得できればOKです。
“partytown” プラグインの追加
以下のコマンドで “partytown” プラグインを追加します。
npm install -D @astrojs/partytown“partytown” とはなんぞや？ということですが、ブラウザの’web worker’を使って遅延ロードできるライブラリは別スレッドで読み込ませ、画面の描画のためのメインスレッドとは切り離そう、というライブラリです。
- Partytown サイト: https://partytown.builder.io/
プラグイン設定の追加
astro.config.mjs を編集して’partytown’プラグインを有効にします。
‘defineConfig’の’integrations’に’partytown’を追加します。
import partytown from "@astrojs/partytown";
...
export default defineConfig({
...
integrations: [
...
partytown({
// Adds dataLayer.push as a forwarding-event.
config: {
forward: ["dataLayer.push"],
},
}),
],
...
});‘head’タグに追加
最後に ‘head’タグ内に’script’タグを追加します。基本となる astro ファイルに以下のようなタグを仕込めばOKです。 以下の’[GA_MEASUREMENT_ID]‘の箇所は’G-XXXXX’のような測定ID(Tracking ID)に置き換えてください。
...
<head>
...
<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>
...ミソな部分は’script’タグの’type’に’text/partytown’を設定し、‘partytown’にスクリプトの処理をさせている箇所です。 なんとなくはわかりますが、詳しくは ‘partytown’ を見てみないとですね…
