WagtailにGoogle Analyticsを導入する

この記事では、Wagtailで運用するWebサイトにGoogle Analyticsを導入する方法を解説します。Google AnalyticsはJavaScriptで構成されたタグを埋め込むだけで利用することができますが、今回は管理画面からGoogle AnalyticsのIDを入力すればそれに対応したWebサイトのデータを取得することができるようにしていきます。

Google Analyticsのアカウントの作成

まずはGoogle Analyticsのアカウントを作成していきます。Google AnalyticsはGoogleのユーザーアカウントに紐づいているため、まずはGoogleアカウントを作成してください。すでにGmailなどのGoogleのサービスを利用している方はGoogleアカウントは取得済みです。

Googleアカウントにログイン済みの状態でGoogle Analyticsのページにアクセスしましょう。Google Analyticsの設定方法は公式のサポートページや、多くの解説記事があるためこの記事では解説はしません。必要な情報は、Google Analyticsの「G-」または「UA-」から始まるIDと、そのIDが含まれたJavaScriptのタグです。以下の画像のような内容を準備してください。

WagtailのSite Settingsに項目を追加する

Wagtailの管理画面では、左側のメニューにSettingsという項目があります。これはSite Settingsと呼ばれ、管理しているWebサイト全体に関わる内容を設定することができます。たとえば、ソーシャルアカウントのIDの設定やサイトのタイトルとDescriptionなどのSEOに関わる部分についてはサイト全体に影響するため、Site Settingsから設定できるようにすると便利です。

今回のGoogle Analyticsの設定もサイト全体に関わることなので、Site Settingsから設定できるようにしていきます。

INSTALLED_APPSの設定

Site Settingsを利用するために、INSTALLED_APPSにwagtail.contrib.settingsを追加しましょう。

# settings/base.py

INSTALLED_APPS = [
    ...
    'wagtail.contrib.settings', # 追加
]

BaseSettingを継承して新しい項目を作成する

Site Settingsに新しい項目を追加するには、BaseSettingというクラスを継承して必要なフィールドを追加します。今回の例では、site_settingsというアプリケーションを作成し、その中のmodels.pyで必要な設定をします。

# site_settings/models.py

from django.db import models
from wagtail.admin.edit_handlers import FieldPanel, MultiFieldPanel
from wagtail.contrib.settings.models import BaseSetting, register_setting


@register_setting(icon='site')
class Analytics(BaseSetting):
    google_analytics_tracking_id = models.CharField(
        max_length=50, null=True, blank=True, help_text='Google AnalyticsのトラッキングID')

    panels = [
        MultiFieldPanel([
            FieldPanel('google_analytics_tracking_id')
        ], heading='Analytics settings')
    ]

BaseSettingを継承したクラスを作成し、register_settingというデコレータをつけることで、Wagtail管理画面の左側にあるメニュー欄のSettingsにAnalyticsという項目が追加されます。今回の実装ではgoogle_analytics_tracking_idというフィールドを追加しているので、管理画面ではGoogle AnalyticsのトラッキングIDを設定できるフォームが表示されます。ここで入力したデータは、他のアプリケーションやテンプレートから呼び出すことができるため、この仕組みを利用してGoogle Analyticsの導入に必要なタグを作成していきましょう。

テンプレートからの呼び出し

Site Settingsで設定した値はテンプレートから呼び出すことができます。Site Settingsのデータをテンプレートで呼び出すためには、settings.pyを修正する必要があります。

# settings/base.py

TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'wagtail.contrib.settings.context_processors.settings', # 追加
            ]
        }
    }
]

これでテンプレート上でsettingsという変数を利用することができるようになりました。テンプレートからは、settings.app_label.ClassName.field_name というフォーマットでデータにアクセスすることができます。app_labelやClassName、field_nameはそれぞれmodels.pyで定義したとおりに指定をします。具体例を見てみましょう。 site_settingsアプリケーションの中にgoogle_analytics.htmlというファイルを作成し、Google Analyticsのタグを記述します。その中で利用されているトラッキング用のID（G-またはUA-で始まるID）は、Site Settingsで設定したGoogle AnalyticsのIDを呼び出します。

<!-- site_settings/templates/site_settings/google_analytics.html -->

<!-- 本番環境かつGoogle AnalyticsのIDが設定されていたらタグを挿入する -->
{% if DEBUG is False and settings.site_settings.Analytics.google_analytics_tracking_id %}

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.site_settings.Analytics.google_analytics_tracking_id }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ settings.site_settings.Analytics.google_analytics_tracking_id }}');
</script>
{% endif %}

上の例では、settings.site_settings.Analytics.google_analytics_tracking_idという形でGoogle AnalyticsのIDを読み込んでいます。その他のタグの部分はGoogle Analyticsのデフォルトのタグになります。

また、本番環境でのみタグを埋め込みするように、DEBUGというテンプレート変数も利用しています。こちらはcontext processorで定義しておきましょう。この変数はサイト全体に関わるものなので、各アプリケーションが入っているフォルダに専用のファイルを作成します。たとえば、appsフォルダの中にblogsやsite_settingsのようなアプリケーションが入っている場合にはapps/context_processor.pyというファイルを作成します。

# context_processor.py

from django.conf import settings


# テンプレート内でDEBUGという変数を使えるようにする
# settingsファイルの中で指定しているDEBUG変数の値をそのまま返す
def debug(request):
    return{"DEBUG": settings.DEBUG}

context processorを利用するにはsettingsファイルからそれを利用する指定をする必要があります。

# settings/base.py

TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'apps.context_processor.debug', # 追加
            ]
        }
    }
]

これでgoogle_analytics.htmlで指定したDEBUGというテンプレート変数が利用できるようになりました。

あとはGoogle Analyticsで計測したいページでタグを呼び出すだけです。基本的にはWebサイト全体の利用状況を把握したい場合が多いので、ベースのテンプレートから呼び出すようにしましょう。

<!-- templates/base.html -->

<!DOCTYPE html>
<html class="no-js" lang="ja">
    <head prefix="og: https://ogp.me/ns#">
        <!-- headタグの中からテンプレートを呼び出す -->
        {% include 'site_settings/google_analytics.html' %}
        ...
    </head>

    <body class="{% block body_class %}{% endblock %}">
    </body>
</html>

これでGoogle AnalyticsをWagtailの管理画面から設定できるようになりました。単純にGoogle Analyticsを追加したい場合にはSite SettingsからIDを呼び出して利用するのではなく、直接Google Analyticsのタグを追加すれば良いと思いますが、ベースとなるCMSのテンプレートとしてこのような設計にしておくと、様々なWebサイトで使い回すことができて便利です。