DjangoにGoogle Analyticsを導入する

今日はGoogle Analytics（グーグルアナリティクス）をDjangoのプロジェクトに導入する方法を紹介します。

Webサービスやホームページを作成した時に、アクセス数を計測したり、ユーザー属性やよく見られているページを調べたりしたいことがあると思います。そんな時に便利なのがGoogle Analyticsですが、Djangoプロジェクトにうまく組み込む方法があります。

やることはシンプルで、大きく以下の三つのステップです。

Google Analyticsのタグを取得する
独自のContext Processorを作成する
テンプレートにアナリティクスのタグを挿入する

一つずつ見ていきましょう。

Google Analyticsのタグを取得する

まずはWebサービスに埋め込むためのGoogle analyticsのタグを取得します。

Googleアカウントが必要なので、持っていない方はこちらのページの「アカウントを作成」ボタンから作ってください。

次に、Google Analyticsに登録します。先ほどのページから、「Googleアナリティクスの使用を開始」のボタンを押して情報入力に進んでください。情報入力が完了したら、一番下の「トラッキングIDを取得」を押すことで、トラッキングIDを埋め込むためのコードを確認することができます。

トラッキングコードのページで必要なのは、「グローバルサイトタグ(gtag.js)」と表示されている部分のスクリプトです。こちらをDjangoプロジェクトに埋め込むことで、アナリティクスと紐付けすることができます。基本的にはこちらのトラッキングコードをトラッキングしたいサイトの全ページに貼り付ける必要がありますが、こちらのコードをテンプレート化することで簡単に管理できるようにしていきます。

トラッキングコードを貼り付けるテンプレートを作る前に、トラッキングIDがきちんとsettingsファイルに指定されていて、かつ、DEBUG=Falseの状態（本番環境など）のときのみに利用できるテンプレート変数、GOOGLE_ANALYTICS_TRACKING_IDを作成しましょう。この変数がテンプレート内で利用できるときにのみ、トラッキングコードをテンプレート内にインポートすることによって、ローカル環境やステージング環境などの本番環境以外での情報がGoogleアナリティクスに送信されないようにすることができます。

これを実現させるためには、自分のプロジェクト独自のContext Processorを作成します。Context Processorとは何かと言うと、viewから変数を渡してあげなくても、テンプレート内で利用できる変数を作成する仕組みです。

デフォルトのContext Processorは、Djangoのプロジェクト作成時に、settings.pyに以下のように設定されています。

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

この中で、例えば、django.contrib.auth.context_processors.authは、userとpermsという変数を利用できるようにしています。テンプレート内で{% if user.is_authenticated %}のようなことができるのはこのContext Processorが設定してあるからです。(参考)

今回は、独自にこのContext Processorを作成することで、先ほど取得したトラッキングIDを、Djangoプロジェクト内でいつでも利用できるようにしていきます。

ここでは、django_blogというプロジェクトを作成していることを前提に話を進めます。この場合、プロジェクトを作成した時にdjango_blog/django_blog/settings.pyというファイルが作成されますが、そこと同じディレクトリ内にcontext_processors.pyというファイルを作成します。

django_blog/django_blog/context_processors.py

from django.conf import settings

def google_analytics(request):
    """
    DEBUG=Falseの場合に、GoogleアナリティクスのトラッキングIDを返す
    """
    # GoogleアナリティクスのトラッキングIDをsettings.pyから取得する
    # settings.py内に、GOOGLE_ANALYTICS_TRACKING_ID='自分のトラッキングID'を書き込んでおく
    ga_tracking_id = getattr(settings, 'GOOGLE_ANALYTICS_TRACKING_ID', False)

    # DEBUG=FalseかつGoogleアナリティクスのトラッキングIDを取得できたら、
    # テンプレート内で'GOOGLE_ANALYTICS_TRACKING_ID'という変数を利用できるようにする
    if not settings.DEBUG and ga_tracking_id:
        return {
            'GOOGLE_ANALYTICS_TRACKING_ID': ga_tracking_id,
        }
    return {}

これで指定の条件に当てはまる場合には、テンプレート内でGOOGLE_ANALYTICS_TRACKING_IDというテンプレート変数を利用することができるようになりました。

この作成したモジュールを実際に利用するように、settings.pyに追記しましょう。

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
                'django_blog.context_processors.google_analytics',            # 追加
            ],
        },
    },
]

あとは、この変数が利用できる時に、Googleアナリティクスのトラッキングコードをテンプレート内に呼び出すだけです。

テンプレートにアナリティクスのタグを挿入する

Googleアナリティクスのトラッキングコードを一つのテンプレートにしてベースとなるテンプレートのheadタグ内で呼び出す形をとります。今回は、全体のベースとなるHTMLテンプレートをbase.htmlとして、ga.htmlというファイルを呼び出すことにします。

まずはga.htmlです。こちらは先ほどのGoogleアナリティクス内で取得できるコードをそのまま貼り付けただけになります。

django_blog/templates/ga.html

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<自分のトラッキングID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<自分のトラッキングID>');
</script>

次に、上記のテンプレートをベースとなるテンプレートから呼び出します。このベースとなるテンプレートのheadタグは、このウェブサービスの全てのページから呼び込まれるので、基本的にここで呼び出すだけでウェブサービス全体の数値を取得するとこができるようになります。

django_blog/templates/base.html

{% load static %}

<!DOCTYPE html>
<html>
<head>
  <title>Django Blog</title>
  <meta name="description" content="Django Blogのサンプルプロジェクトです">
  <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
  {% if GOOGLE_ANALYTICS_TRACKING_ID %}
    {% include 'ga.html' %}
  {% endif %}
</head>
<body>
  <div id="main-content">
      {% block content %}{% endblock %}
  </div>
</body>
</html>

以上がGoogleアナリティクスの導入の説明になります。ポイントは、DjangoのContext Processorを利用して必要な時だけトラッキングコードをインポートすること、テンプレートをうまく使ってトラッキングコードの管理を簡単にすること、の二つになります。

思ったより難しくないと感じたのではないでしょうか。ぜひ、あなたのDjangoプロジェクトにもGoogleアナリティクスを導入してみましょう。

最新記事

タグ

関連記事

DjangoにGoogle Analyticsを導入する

Google Analyticsのタグを取得する

独自のContext Processorを作成する

テンプレートにアナリティクスのタグを挿入する