【毎日改善5日目】GA導入
投稿者: urumos
作成日: 2022年5月31日7:01
更新日: 2022年6月1日23:02
カテゴリ: Django
タグ:
【GA導入：追記用】
今日はGoogleアナリティクスを導入してみる。
ユニバーサルアナリティクス（UA）のサポートが2023年7月に停止される予定のため、GA4だけで作った。
Djangoへの導入についてググったが、UAのものや、UAとGA4を併用しているパターンしかない。
ただ、Googleアナリティクス画面のGA4設定方法を読んでみると、
HTMLのHEAD部分に<!-- Global site tag (gtag.js) - Google Analytics -->から始まるスクリプトをコピペするように書いてある。
そして gtag('config', 'XXXXXXXXXXX');の部分は測定IDになっている。
なので、よくわからんが、恐らく同じ方法で出来るのでは？
取り敢えずやってみよう
参考にさせていただいた記事
https://djangobrothers.com/blogs/django_google_analytics/
基本的にはgtagのスクリプトをHTMLのHEADに貼り付ければいいらしいが、
本番環境でのみ適用したいため、スクリプトをテンプレート化して利用するらしい。
①独自のContext Processorを作成
Context Processorとは？
➡viewから変数を渡さなくても、テンプレート内で利用できる変数を生成する仕組み
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を作成することで、Googleアナリティクスの測定IDを、
Djangoプロジェクト内のどこでも利用できるようになる。
settings.pyが入っているのと同じディレクトリ（自分の場合はconfig）内に下記のファイルを作成
【ファイル名】
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 {}
②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',
'config.context_processors.google_analytics', #←ここ追加★ ],
},
},
]
③テンプレートにアナリティクスのタグを挿入
base.htmlに直貼りではなく、ga.htmlというファイルを作り、そこから読み込む
base.htmlと同じディレクトリに下記を作成
【ファイル名】
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>
※内容はGoogleアナリティクスからコピペ
④base.htmlにga.htmlを読み込み
base.htmlのhead内に下記を追記
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
これでOKなはず！
gitのリモリポにプッシュして、サーバー側でpull
適用まで時間がかかるはずなので、しばらく待ってみよう
【追記】
settings.pyの末尾あたりに下記を追記すると書いてある記事も多いのだけど、どうなんだろ？
GOOGLE_ANALYTICS_TRACKING_ID = '自分の測定ＩＤ'
【追記②】
数時間待っても受信開始されないので、やっぱり上記をsettings.py追加してみる
ブログページを開く
Server Error(500)
なぜ？
管理画面は開ける。なぜだ。
色々再起動してみたけどだめだ。
追記した部分を削除し、gunicornをリスタートしたら表示できた。
原因を探ろう。
Nginxのエラーログを見みてみる
sudo cat /var/log/nginx/error.log
2022/06/01 01:43:09 [crit] 1002491#1002491: *435 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.79.146.133, server: 0.0.0.0:443
2022/06/01 02:06:30 [crit] 1002491#1002491: *462 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 113.31.125.232, server: 0.0.0.0:443
2022/06/01 03:39:35 [crit] 1002491#1002491: *529 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 172.104.4.141, server: 0.0.0.0:443
2022/06/01 05:40:05 [crit] 1002491#1002491: *607 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.56.101.209, server: 0.0.0.0:443
よく読むことが大事。
要はSSLの接続に失敗した感じだろう。
エラーでぐぐる。
うーんわからん。
Nginx設定ファイルの検証
sudo nginx -t
nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
うーん？
Debug＝Falseの時にエラーになるのでは？と思い、ローカルでrunserverしたら開けた。
さらに試しにローカルの.envをDebug=Falseに変えてrunserverしてみたら、AWSと同じくServer Error500になった。
まとめると、
・settings.pyに「GOOGLE_ANALYTICS_TRACKING_ID = 'G-YP0T2552ZF'」を入力した時、かつ、Debug＝False（本番環境）の時だけエラー発生
・エラーログでは「SSLへの接続ができなかった」と出ている。
検証がローカルだと楽なので、ローカルで色々試す。
試しにga.htmlを全てコメントアウトし、base.htmlのhead部分に直接gtagスクリプトを貼り付けてみる。
サイト表示できた！
つまり、base.htmlの下記部分がエラーの原因っぽい。
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
一応サーバー側でもやってみる。
開けない。
もう一度ローカルでやってみる。
なぜか開けない。
違いといえば後から変更部分を分かりやすくするために下記を追加しただけ
<!--ga.htmlをコメントアウトして、こちらに直貼りしてみる。
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
-->
コメントアウトしてるから影響ないと思ったけどなぞだ。。
これを消したらローカルでもサーバーでもできた！
なんなんだろうか、、、
いくつかページを回ってみたら、時々「Server Error (500)」が出る。なぜだろう。
高速でページを移動するとなる？
再度エラーログを確認
sudo cat /var/log/nginx/error.log
2022/06/01 01:43:09 [crit] 1002491#1002491: *435 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.79.146.133, server: 0.0.0.0:443
2022/06/01 02:06:30 [crit] 1002491#1002491: *462 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 113.31.125.232, server: 0.0.0.0:443
2022/06/01 03:39:35 [crit] 1002491#1002491: *529 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 172.104.4.141, server: 0.0.0.0:443
2022/06/01 05:40:05 [crit] 1002491#1002491: *607 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.56.101.209, server: 0.0.0.0:443
2022/06/01 07:39:53 [crit] 1002491#1002491: *694 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 97.107.129.164, server: 0.0.0.0:443
2022/06/01 08:01:37 [warn] 1008062#1008062: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:17:26 [crit] 1002491#1002491: *983 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 23.92.16.137, server: 0.0.0.0:443
2022/06/01 11:47:43 [alert] 1002491#1002491: *995 open socket #12 left in connection 10
2022/06/01 11:47:43 [alert] 1002491#1002491: aborting
2022/06/01 11:47:43 [warn] 1009248#1009248: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:47:43 [warn] 1009249#1009249: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:58:55 [warn] 1009356#1009356: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
エラーが変わった！
でも内容は同じような、、、？
下記を参照し、
http://psychedelicnekopunch.com/archives/1569
取り敢えず25行目の「ssl on;」を消してみる
NginxとGunicornをリスタートして、再度ページを周遊。
再度エラーを確認。
エラーが出なくなった！
Nginx設定ファイル検証も再度やってみる
sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
前の[warn]が消えた！
一旦これでGoogleアナリティクスのデータ受信が始まるか見てみよう。
10時間ほど経過
無事受信開始された！！＾＾
よしよし！
あとはga.htmlがエラーになる理由だけど、、
まぁ取り敢えずGoogleアナリティクスは設定できたからいいとするかな。
また知識が増えた時に原因を探ろう。笑
今日はGoogleアナリティクスを導入してみる。
ユニバーサルアナリティクス（UA）のサポートが2023年7月に停止される予定のため、GA4だけで作った。
Djangoへの導入についてググったが、UAのものや、UAとGA4を併用しているパターンしかない。
ただ、Googleアナリティクス画面のGA4設定方法を読んでみると、
HTMLのHEAD部分に<!-- Global site tag (gtag.js) - Google Analytics -->から始まるスクリプトをコピペするように書いてある。
そして gtag('config', 'XXXXXXXXXXX');の部分は測定IDになっている。
なので、よくわからんが、恐らく同じ方法で出来るのでは？
取り敢えずやってみよう
参考にさせていただいた記事
https://djangobrothers.com/blogs/django_google_analytics/
基本的にはgtagのスクリプトをHTMLのHEADに貼り付ければいいらしいが、
本番環境でのみ適用したいため、スクリプトをテンプレート化して利用するらしい。
①独自のContext Processorを作成
Context Processorとは？
➡viewから変数を渡さなくても、テンプレート内で利用できる変数を生成する仕組み
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を作成することで、Googleアナリティクスの測定IDを、
Djangoプロジェクト内のどこでも利用できるようになる。
settings.pyが入っているのと同じディレクトリ（自分の場合はconfig）内に下記のファイルを作成
【ファイル名】
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 {}
②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',
'config.context_processors.google_analytics', #←ここ追加★ ],
},
},
]
③テンプレートにアナリティクスのタグを挿入
base.htmlに直貼りではなく、ga.htmlというファイルを作り、そこから読み込む
base.htmlと同じディレクトリに下記を作成
【ファイル名】
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>
※内容はGoogleアナリティクスからコピペ
④base.htmlにga.htmlを読み込み
base.htmlのhead内に下記を追記
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
これでOKなはず！
gitのリモリポにプッシュして、サーバー側でpull
適用まで時間がかかるはずなので、しばらく待ってみよう
【追記】
settings.pyの末尾あたりに下記を追記すると書いてある記事も多いのだけど、どうなんだろ？
GOOGLE_ANALYTICS_TRACKING_ID = '自分の測定ＩＤ'
【追記②】
数時間待っても受信開始されないので、やっぱり上記をsettings.py追加してみる
ブログページを開く
Server Error(500)
なぜ？
管理画面は開ける。なぜだ。
色々再起動してみたけどだめだ。
追記した部分を削除し、gunicornをリスタートしたら表示できた。
原因を探ろう。
Nginxのエラーログを見みてみる
sudo cat /var/log/nginx/error.log
2022/06/01 01:43:09 [crit] 1002491#1002491: *435 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.79.146.133, server: 0.0.0.0:443
2022/06/01 02:06:30 [crit] 1002491#1002491: *462 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 113.31.125.232, server: 0.0.0.0:443
2022/06/01 03:39:35 [crit] 1002491#1002491: *529 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 172.104.4.141, server: 0.0.0.0:443
2022/06/01 05:40:05 [crit] 1002491#1002491: *607 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.56.101.209, server: 0.0.0.0:443
よく読むことが大事。
要はSSLの接続に失敗した感じだろう。
エラーでぐぐる。
うーんわからん。
Nginx設定ファイルの検証
sudo nginx -t
nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
うーん？
Debug＝Falseの時にエラーになるのでは？と思い、ローカルでrunserverしたら開けた。
さらに試しにローカルの.envをDebug=Falseに変えてrunserverしてみたら、AWSと同じくServer Error500になった。
まとめると、
・settings.pyに「GOOGLE_ANALYTICS_TRACKING_ID = 'G-YP0T2552ZF'」を入力した時、かつ、Debug＝False（本番環境）の時だけエラー発生
・エラーログでは「SSLへの接続ができなかった」と出ている。
検証がローカルだと楽なので、ローカルで色々試す。
試しにga.htmlを全てコメントアウトし、base.htmlのhead部分に直接gtagスクリプトを貼り付けてみる。
サイト表示できた！
つまり、base.htmlの下記部分がエラーの原因っぽい。
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
一応サーバー側でもやってみる。
開けない。
もう一度ローカルでやってみる。
なぜか開けない。
違いといえば後から変更部分を分かりやすくするために下記を追加しただけ
<!--ga.htmlをコメントアウトして、こちらに直貼りしてみる。
{% if GOOGLE_ANALYTICS_TRACKING_ID %}
{% include 'ga.html' %}
{% endif %}
-->
コメントアウトしてるから影響ないと思ったけどなぞだ。。
これを消したらローカルでもサーバーでもできた！
なんなんだろうか、、、
いくつかページを回ってみたら、時々「Server Error (500)」が出る。なぜだろう。
高速でページを移動するとなる？
再度エラーログを確認
sudo cat /var/log/nginx/error.log
2022/06/01 01:43:09 [crit] 1002491#1002491: *435 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.79.146.133, server: 0.0.0.0:443
2022/06/01 02:06:30 [crit] 1002491#1002491: *462 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 113.31.125.232, server: 0.0.0.0:443
2022/06/01 03:39:35 [crit] 1002491#1002491: *529 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 172.104.4.141, server: 0.0.0.0:443
2022/06/01 05:40:05 [crit] 1002491#1002491: *607 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 45.56.101.209, server: 0.0.0.0:443
2022/06/01 07:39:53 [crit] 1002491#1002491: *694 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 97.107.129.164, server: 0.0.0.0:443
2022/06/01 08:01:37 [warn] 1008062#1008062: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:17:26 [crit] 1002491#1002491: *983 SSL_do_handshake() failed (SSL: error:14201044:SSL routines:tls_choose_sigalg:internal error) while SSL handshaking, client: 23.92.16.137, server: 0.0.0.0:443
2022/06/01 11:47:43 [alert] 1002491#1002491: *995 open socket #12 left in connection 10
2022/06/01 11:47:43 [alert] 1002491#1002491: aborting
2022/06/01 11:47:43 [warn] 1009248#1009248: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:47:43 [warn] 1009249#1009249: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
2022/06/01 11:58:55 [warn] 1009356#1009356: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/sites-enabled/DjangoMyBlog:25
エラーが変わった！
でも内容は同じような、、、？
下記を参照し、
http://psychedelicnekopunch.com/archives/1569
取り敢えず25行目の「ssl on;」を消してみる
NginxとGunicornをリスタートして、再度ページを周遊。
再度エラーを確認。
エラーが出なくなった！
Nginx設定ファイル検証も再度やってみる
sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
前の[warn]が消えた！
一旦これでGoogleアナリティクスのデータ受信が始まるか見てみよう。
10時間ほど経過
無事受信開始された！！＾＾
よしよし！
あとはga.htmlがエラーになる理由だけど、、
まぁ取り敢えずGoogleアナリティクスは設定できたからいいとするかな。
また知識が増えた時に原因を探ろう。笑
