SPAの各ページビューをGoogleアナリティクス＋Googleタグマネージャーで簡単トラッキング！


SPA（Single Page Application）だとページアクセスは初回の1回のみなので、Googleアナリティクスでトラッキングするとなると、画面遷移時の処理にトラッキング用のコードを追加しないといけないかな〜？と思っていました。
しかし、Googleアナリティクス＋Googleタグマネージャーを使用すれば、タグを1つ埋め込み、あとは管理画面で設定するだけで簡単にトラッキングすることができます！
（※今回対象とするSPAはハッシュで画面制御しているものを想定しています）

# 0. GoogleアナリティクスとGoogleタグマネージャーに登録
登録していない方はまず登録してください。（登録方法の説明は省略します。。。）
■Googleアナリティクスへ登録は下記サイトなど参考に登録してください。
http://www.adminweb.jp/analytics/setup/index1.html
■Googleタグマネージャーへの登録は下記サイトなど参考に登録してください。
http://www.seohacks.net/blog/tool/google_tagmanager/#sec5

# 1. Googleアナリティクスでの設定
「アナリティクス設定」ページのプロパティのプルダウンに「新しいプロパティを作成」があるので、それを選択。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/f892a2c1-2459-1caf-40ac-d415511f6745.jpeg)

下記のような画面になるので、トラッキングしたいサイトの情報を入力して、「トラッキングIDを取得」をクリック。
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/1096e534-4eb4-a74e-e6a7-3d804e7a2ee3.jpeg)

下記画面のようにサイトの登録が完了し、トラッキングID（UA-XXXXXXXX-X）が生成されます。**トラッキングコードも生成されますが、これは使用しません**。ここに表示されるコードはサイトに埋め込まないでください。
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/4ed3b939-d917-db43-aec8-5bc7ad1a7b9e.jpeg)

# 2. Googleタグマネージャーでの設定
## 2.1 新規コンテナを作成
管理画面のコンテナのプルダウンで、「コンテナを作成...」を選択。
![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/9fb4cb88-66a3-c27a-9aed-f6f4815994d8.jpeg)

下記画面のようになるので、コンテナ名とコンテナの使用場所を選択して作成をクリック。
![5.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/5894e315-db49-d3ab-c2a9-8fce3e4c8a60.jpeg)

新規コンテナの登録が完了し、下記画面のようにサイトに埋め込むコードが生成されます。
ここで生成されたコードはサイトの方に埋め込みます。
![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/b20d559b-20a7-8189-24c9-eede30945ba7.jpeg)

bodyの直後に貼り付けるとあるので、指示通りにコードをトラッキング対象サイトのHTMLにコピペします。
![7.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/aafdd059-d4d9-cd3c-d6a9-19e43f2d696c.jpeg)

## 2.2 コンテナの設定
まず、「変数」の設定をします。サイドメニューの変数を選択すると、画面下の方に、ユーザー定義変数欄があるので、「新規」をクリックします。
![10.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/2cdc7a5e-b169-9036-a4e5-6acecef942a3.jpeg)

下記画面のように、変数名「hash」種類「URL」要素タイプ「フラグメント」と設定して変数を作成します。
![11.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/3d0d8771-e3f5-3299-601f-91e2d8479d97.jpeg)

次に、トリガーを作ります。サイドメニューのトリガーを選択して、新規をクリックしてください。そして、下記画面のようにトリガーの設定をしてトリガーを作成してください。
![12.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/fb3b94bb-4920-fed4-7267-5e32bc2e4c4b.jpeg)

次に、タグを作ります。設定は下記画面のようにします。
>プロダクト：Google Analytics
>タグの種類：ユニバーサルアナリティクス
>トラッキングID：Googleアナリティクスで生成したもの（「UA-XXXXXXXX-X」のやつ）
>設定するフィールド：フィールド名:page, 値:{{Page URL}}{{hash}}
>配信するタイミング：View遷移（その他から先ほど作成したトリガーを選択する）

![100.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/32a05937-0509-4eef-efd0-706616a73178.jpeg)

## 2.3 公開する
ここまで設定したコンテナを公開して、動作するようにします。
画面右上の「公開」ボタンを押すと下記画面が開くので、「今すぐ公開」をクリックして公開します。
![13.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/04c30b17-e242-6d47-3916-9dfc55ba362e.jpeg)


以上でトラッキングの設定準備は完了です。

# 3. Googleアナリティクスで確認する
Googleアナリティクスのレポート表示で、サイドメニューのリアルタイム＞サマリーを選択します。そして対象のサイトにアクセスし、その情報が画面にほぼリアルタイムで表示されれば成功です。
（どうやらリアルタイムの表示は色々登録してから反映されるまでに時間がかかる(?)かもしれないので、もし表示されない場合はしばらくたってから見てみるといいかもしれません。。。）
![16.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/66eae1b8-501e-de2c-9c5b-467d8872aa68.jpeg)


===============================
OnederAppliよろしくお願い致します！
＞<a href="http://onederappli.jp">ホームページ</a>
＞<a href="https://itunes.apple.com/jp/artist/koike-jun/id999607803">iPhoneアプリ</a>
＞<a href="https://play.google.com/store/apps/developer?id=OnederAppli">Androidアプリ</a>