Scala
GoogleAnalytics
PlayFramework
sbt
CSP

Webアプリケーション(PlayFramework)にGoogleアナリティクスを入れる際はデフォルトのCSPに注意

Googleアナリティクスのトラッキングコードをhtmlに貼ればいいかと思いますが、PlayFrameworkにはデフォルトのコンテンツセキュリティポリシー(CSP)が設定されています。そのためGoogleアナリティクスなど外部のコンテンツを利用する際には、変更する必要があります。

今回、新規で作成したPlayFrameworkのアプリケーションにGoogleアナリティクスを設定したいと思います。

環境
  • PlayFramework 2.6.7
  • sbt 1.0.2

1.Googleアナリティクスでトラッキングコードを取得します。

Googleアナリティクスのページから設定し、以下のトラッキングコードを取得します。


スクリーンショット 2017-12-02 13.26.14.png

取得までの詳細は割愛します。

※参考 Googleアナリティクス導入時の設定・設置方法【初心者向け】

2.htmlにトラッキングコードを貼り付ける

gtag.js を使用してアナリティクスのトラッキングを設定するより
HTMLのheadタグにトラッキングコードを貼る必要があるので、Playで作成された
main.scala.htmlに貼り付けます。

main.scala.html
    <head>
        <script async src="https://www.googletagmanager.com/gtag/js?id=ご自分のGoogleアナリティクストラッキングID"></script>
        <script>
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('config', 'ご自分のGoogleアナリティクストラッキングID');
        </script>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
    </head>

3.セキュリティポリシーの変更

公式チュートリアル(Configuring the security headers)より

play.filters.headers.contentSecurityPolicy - sets Content-Security-Policy, “default-src ‘self’” by default.

Playのデフォルトのセキュリティポリシーでは、全てのコンテンツをサイト自身のドメインから取得するように設定さています。

今回Googleアナリティクスを使う上で、以下の設定に変更します。

application.conf
play.filters.headers.contentSecurityPolicy = "script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com 'unsafe-inline'"

script-srcでは、JavaScriptを許可するsourceを指定し、今回は自身のドメインと、GoogleアナリティクスのJavaScriptで必要なwww.googletagmanager.com, www.google-analytics.com を指定しています。

またunsafe-inlineでは、インラインリソースの使用を許可します。

コンテンツセキュリティポリシーについてはCSP のポリシーディレクティブに詳しく書かれていますので、ご自身のアプリケーションに沿った設定をしてください。

4.実際にアクセスして計測できているか確認

playを動かしてアクセスします。

スクリーンショット 2017-12-02 15.38.28.png

Googleアナリティクスの画面で確認してみましょう

スクリーンショット 2017-12-02 15.41.34.png

正常に計測できています。

また、仮にセキュリティポリシーで設定しているscript-srcにgoogleアナリティクスのドメインがない場合や、googleアナリティクスの仕様が変わって、別のドメインのJavaScriptの呼び出しが必要になった場合は、以下のようにエラーが出て正常にアナリティクスでアクセスログを計測できません。

Refused to execute optimize.google.com because it violates the following Content Security Policy directive...

上記のエラーが出た場合は、セキュリティポリシーを見直しましょう。