Published on

DjangoでGA4を設定する

Authors

以前Renderサーバーのフリープランでサービスを公開してみたで紹介した家計簿アプリのSUMUMAに、DjangoでGA4を設定したので設定方法を紹介する。

# 設定するもの

  1. GA4の識別子をsettings.pyに設定

    • 本番環境に識別子を設定
    • ローカル環境は計測をしないため識別子の設定は不要です

  2. DjangoのテンプレートからGA4の識別子を取得するためのコンテキストプロセッサを追加

  3. 本番環境のみでGA4の計測ができるように制御

# 実際の設定

SUMUMAのリポジトリは公開しているので、こちらからも確認できる。

[project]/settings.pyでGA4の識別子を設定する。

GA_MEASUREMENT_ID = env('GA_MEASUREMENT_ID', default='')

GA_MEASUREMENT_IDはGA4の識別子を格納するための環境変数であり、サーバーに設定しておく。

次にコンテキストプロセッサを追加する。

from django.conf import settings


def google_analytics(request):
    return {
        'GA_MEASUREMENT_ID': getattr(settings, 'GA_MEASUREMENT_ID', ''),
    }

[project]/settings.pyに戻って、追加したコンテキストプロセッサを読み込む。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [str(PurePath.joinpath(SUMUMA_PROJECT_DIR, 'templates'))],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'sumuma.context_processors.google_analytics', # ここを追加
            ],
        },
    },

[project]/templates/ga.htmlを作成し、GA4から取得したscriptの実装を貼り付ける。

{% if GA_MEASUREMENT_ID %}
<!-- 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>
{% endif %}

GA_MEASUREMENT_IDが存在しているかで計測するかを決める。
本番環境にだけGA_MEASUREMENT_IDを設定しておけばローカル環境は計測されず、本番だけ計測される。

最後に、計測をしたいテンプレートファイルのheadタグ内に{% include 'ga.html' %}を追加する。

以上で、GA4の設定が完了となる。