Googleアナリティクスのトラッキングコードをhtmlに貼ればいいかと思いますが、PlayFrameworkにはデフォルトのコンテンツセキュリティポリシー(CSP)が設定されています。そのためGoogleアナリティクスなど外部のコンテンツを利用する際には、変更する必要があります。
今回、新規で作成したPlayFrameworkのアプリケーションにGoogleアナリティクスを設定したいと思います。
環境
- PlayFramework 2.6.7
- sbt 1.0.2
1.Googleアナリティクスでトラッキングコードを取得します。
Googleアナリティクスのページから設定し、以下のトラッキングコードを取得します。
取得までの詳細は割愛します。
※参考 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を動かしてアクセスします。
Googleアナリティクスの画面で確認してみましょう
正常に計測できています。
また、仮にセキュリティポリシーで設定しているscript-src
にgoogleアナリティクスのドメインがない場合や、googleアナリティクスの仕様が変わって、別のドメインのJavaScriptの呼び出しが必要になった場合は、以下のようにエラーが出て正常にアナリティクスでアクセスログを計測できません。
Refused to execute optimize.google.com because it violates the following Content Security Policy directive...
上記のエラーが出た場合は、セキュリティポリシーを見直しましょう。