Posted on by yutarot

マストドンにGoogle Analytics Tracking Codeを埋め込む

分散SNSのマストドン(Mastodon)にGoogleアナリティクスのトラッキングコードを埋め込んだ際のメモ。

ソースコードをいじらないとだめかなと思ったけど、Nginxのngx_http_sub_module を利用することでソースコードをいじることなくGoogleアナリティクスのトラッキングコードを埋め込むことができた。

参考) Nginx公式ドキュメント

概要

nginxのngx_http_sub_moduleを利用し、HTTPレスポンスに含まれるHTMLタグを置換してGoogleアナリティクスのトラッキングコードを埋め込む。

前提

  • 対象のマストドンインスタンスはConoHaでマストドンのアプリケーションイメージを使用して建てたもの
  • マストドンを建てるにあたっては、上記手順にもあるConoHaのセットアップスクリプトを利用している (nginxの設定ファイルなどが上記セットアップスクリプトの利用の如何によって変わる)

各種バージョン

Ubuntu 16.04.5 LTS (Xenial Xerus)
Nginx nginx/1.10.3 (Ubuntu)
Mastodon v2.4.3

実際のところマストドンのバージョンはなんとなく書いてみただけで、別になんでも良い.

重要なのはNginxで、今回利用するngx_http_sub_moduleのモジュールが含まれていることが必要となる。

モジュールが利用可能かどうかは下記のコマンドで確認することができる。

$ nginx -V
nginx version: nginx/1.10.3 (Ubuntu)
built with OpenSSL 1.0.2g  1 Mar 2016
TLS SNI support enabled
configure arguments: --with-cc-opt='-g -O2 -fPIE -fstack-protector-strong -Wformat -Werror=format-security -Wdate-time -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -fPIE -pie -Wl,-z,relro -Wl,-z,now' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-pcre-jit --with-ipv6 --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_v2_module --with-http_sub_module --with-http_xslt_module --with-stream --with-stream_ssl_module --with-mail --with-mail_ssl_module --with-threads

configure argumentsに–with-http_sub_moduleというのが含まれていればすぐに対象モジュールを使うことができる。
含まれていない場合は対象モジュールの追加が必要となる。

今回は対象モジュールはすでに利用可能な状態を前提として話を進める。

手順

  1. /etc/nginx/sites-available/${DOMAIN_NAME}.confに置換の設定を追加
  2. 設定に問題ないか確認し、nginxを再起動
  3. ブラウザからマストドンにアクセスし、HTMLコード中にトラッキングコードが出力されていることを確認

1 /etc/nginx/sites-available/${DOMAIN_NAME}.confに置換の設定を追加

ConoHaの場合、nginxの設定は

/etc/nginx/nginx.conf  => /etc/nginx/sites-enabled/${DOMAIN_NAME}.conf  => /etc/nginx/sites-available/${DOMAIN_NAME}.conf

という具合に参照されているので、/etc/nginx/sites-available/${DOMAIN_NAME}.confの中に設定を追加すれば機能を有効化することができる。

参考) /etc/nginx/nginx.conf

$ grep "sites" /etc/nginx/nginx.conf
	include /etc/nginx/sites-enabled/*;

参考) /etc/nginx/sites-enabled/default

$ ll -d /etc/nginx/sites-enabled/*
lrwxrwxrwx 1 root root 48 Aug 17 02:07 /etc/nginx/sites-enabled/${DOMAIN_NAME}.conf -> /etc/nginx/sites-available/${DOMAIN_NAME}.conf

※sites-enabled/${DOMAIN_NAME}.confはsites-available/${DOMAIN_NAME}.confへのシムリンク。

ではさっそく/etc/nginx/sites-available/${DOMAIN_NAME}.confに置換の設定を追加する。

下記のようにlocation @proxy { のディレクティブに設定を追加する。

  location @proxy {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Proxy "";
    proxy_pass_header Server;

    proxy_pass http://127.0.0.1:3000;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    tcp_nodelay on;

    # injecting google analytics tracking code ★ここから
    proxy_set_header Accept-Encoding "";
    sub_filter '<head>' '<head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-99999999-9"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag("js", new Date());gtag("config", "UA-99999999-9");</script>';
    sub_filter_once on;
    # injecting google analytics tracking code ★ここまで
  }

ただし”UA-99999999-9″の部分は自分のGoogleアナリティクス・トラッキングIDに置き換える。

実際にHTTPレスポンスボディのHTMLタグの置換について記述しているのはsub_filter … の部分になる。

置換後のGoogleアナリティクスのトラッキングコード(<script… 以降の部分)はこの記事執筆時点のGoogleアナリティクス管理画面で確認できる公式コードを利用していますが、記事を閲覧いただいているタイミングによっては陳腐化している可能性がありますのでご自身のGoogleアナリティクスの管理画面から最新のコードを確認して置き換えて使ってください。

2 設定に問題ないか確認し、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

$ sudo systemctl restart nginx

3 ブラウザからマストドンにアクセスし、HTMLコード中にトラッキングコードが出力されていることを確認

ngx_http_sub_module利用前
ngx_http_sub_module利用前
ngx_http_sub_module利用後
ngx_http_sub_module利用後

ちゃんとアナリティクスコードが注入されている。

補足

  • リバースプロキシでgzipレスポンスを返す場合、下記設定をしないとうまく動かない、らしい。(私はこの設定がないために動かずハマった) 
    proxy_set_header Accept-Encoding "";

    参考) Stack Overflow

  • sub_filter_once on; は置換処理を繰り返すかどうか。別に設定しなくても問題ないが、あれば無駄な置換のための処理を減らせる。はず。

所感

お一人鯖＝自分だけのためのマストドン=トラッキングなんていらなくね？→それはそう

まぁでも/about/moreとかどれくらいみんなみてるんだろーとかはわかると少し面白いかなって。

あとngx_http_sub_module自体は他にもいろいろ使える場面がありそうなので今回触ることができてよかった。

ではでは。

Leave a Reply

Your email address will not be published. Required fields are marked *