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


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

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

###### 環境
- PlayFramework 2.6.7
- sbt 1.0.2

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

---
<img width="850" alt="スクリーンショット 2017-12-02 13.26.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/159733/54e9620f-3803-79b1-3eb7-f5b7d37ef97e.png">
-
取得までの詳細は割愛します。 

※参考 [Googleアナリティクス導入時の設定・設置方法【初心者向け】](https://wacul-ai.com/blog/access-analysis/google-analytics-setting/ga-beginner/)

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

[gtag.js を使用してアナリティクスのトラッキングを設定する](https://support.google.com/analytics/answer/1008080?hl=ja)より
HTMLのheadタグにトラッキングコードを貼る必要があるので、Playで作成された
`main.scala.html`に貼り付けます。

###### main.scala.html

```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](https://www.playframework.com/documentation/2.6.0/SecurityHeaders#configuring-the-security-headers))より
>play.filters.headers.contentSecurityPolicy - sets Content-Security-Policy, “default-src ‘self’” by default.

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

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

###### application.conf
```text
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 のポリシーディレクティブ](https://developer.mozilla.org/ja/docs/Web/Security/CSP/CSP_policy_directives)に詳しく書かれていますので、ご自身のアプリケーションに沿った設定をしてください。

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

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

<img width="460" alt="スクリーンショット 2017-12-02 15.38.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/159733/9d91da2b-eb4b-f850-28a4-cb3b6795c002.png">

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

<img width="1274" alt="スクリーンショット 2017-12-02 15.41.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/159733/c2da9d7f-5bc4-4a23-44db-0b80bb5b2472.png">

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

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

```text
Refused to execute optimize.google.com because it violates the following Content Security Policy directive...
```
上記のエラーが出た場合は、セキュリティポリシーを見直しましょう。