AstroとGA4/GTM | あっきーの教材工房

以下の記事の続きです。

Astro製Webサイトのデプロイでハマったポイント | あっきーの教材工房

この記事はAstroでWebサイトを構築した際に時間がかかった点をメモしておきます。

あっきーの教材工房

この記事の話題

Astro
GA4(Google Analytics 4)
GTM(Google Tag Manager)

重視した要件

計測関連のコードは本番環境でのみ動作させたい
固定ページ、ブログ記事、Webアプリなど、ページ種別で表示回数を分析したい

高速化は考慮しない

AstroとGoogle Analyticsで調べると、Partytownというライブラリを紹介する記事がそこそこヒットします。

これはどうやら、外部スクリプトを遅延読み込みして、Webサイトの読み込みを早くしてくれるものらしい。

導入した方が良さそう・・・とも思いましたが、自分はそもそもGA4/GTMについての理解が不足していたため、最初から導入するのはやめました。

エラーが起きた時にどこに原因があるのか切り分ける自信がなかったので。

Astroのドキュメントを読むとWindowオブジェクトの扱いが変わるようです。
ここだけ気をつければ大丈夫かも。

Webサイトの読み込みの遅さが気になってきたら導入を検討します。

@astrojs/partytown

Astroプロジェクトで@astrojs/partytownインテグレーションを使用する方法を学びます。

Docs

本番環境でのみ動作させるために

Webで検索するといくつか方法があるようですね。

採用したのは環境変数を使うもの。
.envファイルに以下のように記載。

PUBLIC_GA_MEASUREMENT_ID = G-xxxxxxxx;

その上で、Astroのレイアウトコンポーネントで以下のように分岐。

const GA_MEASUREMENT_ID = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
 :
 :
{GA_MEASUREMENT_ID && (
    // 本番環境に入れたいコード
)}

ここまでは良かったのですが、この後、GitHub Actionsでは.envではなくsecrets使わなきゃいかん、ということに気づきます。

Astro側のコードはそのままで、.envの内容をGitHubのRepository secretsに設定しました。

知っていればなんて事のない内容。
二度と忘れないように記事にしておきました。はい。

ページ種別で分析するために

Google Analyticsのカスタムディメンションにpage_typeを追加し、

固定ページ
Webアプリ
ブログ記事
ブログやタグの一覧ページ

を分けて分析したいと考えました。

最終的には以下のコードで突破。

{GA_MEASUREMENT_ID && (
    <>
        <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
        />

        <script is:inline define:vars={{ GA_MEASUREMENT_ID, pageType }}>
            window.dataLayer = window.dataLayer || [];
            function gtag(){
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', GA_MEASUREMENT_ID, { page_type: pageType });
        </script>
    </>
)}