ローカルファイルからGoogleAnalyticsのトラッキングをする

#目次
1. はじめに
2. 環境
3. 準備
4. Measurement Protocolの使い方
5. Hit Builderでトラッキングの確認
6. 実際の組み込み
7. 参考サイト

#1. はじめに
通常Webサイトのトラッキングとして利用されているGoogleAnalyticsですが、
最近はキオスク端末やデジタルサイネージなどのコンテンツが、HTML5で制作されたものも多く、
タッチパネルのタッチログを取る際にGoogleAnalyticsを利用したいけど、
gtag.jsやanalytics.jsでのトラッキングでは、ローカルファイルからのトラッキングは想定されておらず、セキュリティで引っかかったり、*http://* や *https://* からのアクセスでないとうまくトラッキングできない、などの問題があります。そこで、[Mesurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/v1/?hl=ja)を使い、トラッキングデータを取得したいと思います。
#2. 環境
- Internet Explorer11
- PCのストレージ内にあるローカルファイル（html）

#3. 準備
- GoogleAnalyticsでアカウントを作り、トラッキングIDを取得しておきます（例：UA-123456789-0）
- ログのタイプを決めておきます。ページビューを取るか、イベントを取るか、みたいな。

#4. Measurement Protocolの使い方
概要を抜粋すると、
> HTTP リクエストでユーザーの利用状況に関する生データを Google アナリティクス サーバーに直接送信できます。

とのことで、ほとんどすべての環境でトラッキングが出来るそうです。
使い方は[Measurement Protocol の操作](https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide?hl=ja)に記述されていますが、とりあえず今回はタッチログをトラッキングしてみます。
キオスク端末などでのタッチログはページビュータイプではなく、イベントタイプでのトラッキングで取得します。
（僕が使いやすい方を勧めているだけです）
## 必須の値
```
https://www.google-analytics.com/collect
```
このURLにペイロードと呼ばれる引数を追加して値を送信します
## イベントトラッキング
|引数|値|必須|説明|
|:-----------------:|:------------------:|:------------------:|:------------------|
|v|1|〇|バージョン（固定）|
|tid|文字列|〇|トラッキングIDかプロパティID|
|cid|文字列|〇|クライアントID（アクティブクユーザを設定）|
|t|文字列|〇|タイプ（eventやpageviewなど）|
|ec|文字列|〇|イベントカテゴリ|
|ea|文字列|〇|イベントアクション|
|el|文字列||イベントラベル|
|ev|整数||イベントバリュー（カウンター？）|
これを元に各値を設定すると、GoogleAnalytics内の`行動＞イベント`の項目にトラッキングされます。

## トラッキング例
休日（holiday）の動画(video）の再生ボタン（play）が押された回数（1クリック当たり)を
トラッキングしたい場合のトラッキングURLはこちらになります。

- トラッキングID：UA-123456789-0
- アクティブユーザID：USER1
- GETで送信

```
※1行で書きます。
https://www.google-analytics.com/collect
?v=1
&tid=UA-123456789-0
&cid=USER1
&t=event
&ec=video
&ea=play
&el=holiday
&ev=1
```

日本語を値としたい場合は、URLエンコードを行います。
その他のトラッキングのサンプルは[Measurement Protocol の操作 ](https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide?hl=ja)に記載されています。

#5. Hit Builderでトラッキングの確認
[Measurement Protocol Hit Builder](
上記の値が正しくトラッキングできるかどうかを確かめるオンラインツールです。
さきほどの値をこのツールで確認してみます。

[Hit Builderで確認（値入り）](https://ga-dev-tools.appspot.com/hit-builder/?v=1&tid=UA-123456789-0&cid=USER1&t=event&ec=video&ea=play&el=holiday&ev=1)

アクセスすると入力欄に値が入っています。
![input.PNG](https://qiita-image-store.s3.amazonaws.com/0/49845/f6af2940-9fe1-9ece-a5d4-82bb1cc37e63.png)
`Add parameter`を押すと、引数を追加できます。
![type.PNG](https://qiita-image-store.s3.amazonaws.com/0/49845/a9c53cec-b43c-da33-cc0b-2390f0ad8113.png)
`t`の項目はタイプで、現在7項目から選択できるようです。
![test.PNG](https://qiita-image-store.s3.amazonaws.com/0/49845/dba9da20-1caf-5099-b5aa-b274917cae0b.png)
入力欄の値を変更すると`Hit payload`の値も変更されます。
`Validate hit`をクリックすると入力が正しいか確認できます。
###入力に問題がある場合
![error.PNG](https://qiita-image-store.s3.amazonaws.com/0/49845/587dae2c-69df-2be9-7dfd-5ac2bffed07c.png)
先ほどの入力欄にエラー内容が表示されます。
###入力が問題なかった場合
![ok.PNG](https://qiita-image-store.s3.amazonaws.com/0/49845/c0de50c3-d48b-9475-72ce-8f56f74d899d.png)
`Send hit to Google Analytics`をクリックすると、GoogleAnalyticsにトラッキングが送られます。
押すタイミングでGoogleAnalyticsのリアルタイムの画面にしておくと、トラッキングされた情報が確認できます。


#6. 実際の組み込み
Hit Builderでのトラッキングを確認できたら、ローカルファイルのHTMLに記述します。
IE11でもたぶん動くはず。

```html:index.html
<html>
<head><meta charset="utf-8"></head>
<body>
<script>
    var url = "https://www.google-analytics.com/collect?v=1&t=event&tid=UA-123456789-0&cid=USER1&ec=video&ea=play&el=holiday&ev=1";
    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI(url) , true);
    xhr.withCredentials = true;
    xhr.send();
</script>
</body>
</html>
```

GoogleAnalyticsのリアルタイムでトラッキングを確認できたら、
あとはコードを関数などにして、onClickで呼び出すなどすると、トラッキングされると思います。
#7. 参考サイト
- [Measurement Protocol の概要](https://developers.google.com/analytics/devguides/collection/protocol/v1/?hl=ja)
- [Hit Builder](https://ga-dev-tools.appspot.com/hit-builder/)
- [Google Analytics](https://analytics.google.com/analytics/web/#/)