Googleタグマネージャーを使った仮想ページビューの設定方法

#仮想ページビューとは
Googleアナリティクスでページビューとしてカウントされないページに仮想ページを割り当てることで、ページビューを発生させて計測を行う方法のことです。

#活用例
- 同一URL内でページが遷移するお問い合わせや資料請求などの各ページ（入力→確認→完了）のページビューを計測したい時
- 異なるドメインのサイトを同一サイトとして計測したい時
- PDFファイルのページビューを計測したい時

#設定方法
今回は、お問い合わせフォームの各ページ（入力・確認・完了）に仮想ページビューの設定を行う方法について説明します。なお、下記は完了していることを前提とします。

- Google アナリティクスアカウントの登録
- Google タグマネージャーの登録
- Google タグマネージャーとGoogle アナリティクスの紐づけ
- Google タグマネージャーのウェブサイトへの記述

##（1）仮想ページのURLとページタイトルを決める
お問い合わせフォームの各ページのURLとページタイトルを予め割り当てておきます。

| 　仮想ページ<br>タイトル　| 仮想URL |
|:-:|:-:|
| お問い合わせ（入力） | https://www.sample.com/contact/input |
| お問い合わせ（確認） | https://www.sample.com/contact/confirm |
| お問い合わせ（完了） | https://www.sample.com/contact/finish |

##（2）データレイヤー変数をページに追加
（1）で割り当てた各仮想ページに、以下の script コードを記述します。
コードは必ず Google タグマネージャーのコンテナスニペットより上部に記載してください。
[参考：Googkeタグマネージャー（データレイヤー変数をページに追加する）](https://developers.google.com/tag-manager/devguide#adding-data-layer-variables-to-a-page)

```ruby:お問い合わせ（入力） 
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'trackPageview': '/contact/input',
        'title': 'お問い合わせ（入力）',
        'event': 'loadready'
    });
```
```ruby:お問い合わせ（確認） 
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'trackPageview': '/contact/confirm',
        'title': 'お問い合わせ（確認）',
        'event': 'loadready'
    });
```
```ruby:お問い合わせ（完了） 
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'trackPageview': '/contact/finish',
        'title': 'お問い合わせ（完了）',
        'event': 'loadready'
    });
```

##（3）Googleタグマネージャーにてユーザー定義変数を作成
（2）で記述した3つの変数（trackPageview、title、event）の設定を行います。

### ① trackPageviewの設定
1. 「ワークスペースタブ」から、変数 > ユーザー定義変数メニュー > 【新規】をクリックし、新たに変数を作成します。 
2. 「変数対応を選択して設定を開始..」をクリックして、表示された変数対応から【データレイヤーの変数】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/a7e23a37-0e01-504d-3e18-bb27f634e0a6.png)

3. 「データレイヤーの変数名（※）」に「trackPageview」と入力します。
※データレイヤーの変数名…読み取り先のデータレイヤーの変数名のこと。ウェブサイトで下記のコードが実行されると「var」という名前のデータレイヤーの変数値は「value」に設定されます。データレイヤーの変数はセッション単位ではなくページ単位でのみ指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/748c7a94-1d3a-9ab8-dd84-ebc2351cb1c1.png)

4. データレイヤーの変数を設定したら変数名（例：お問い合わせ_仮想PV_trackPageview）を入力して【保存】をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/34155dfe-30fc-7511-b85d-4ff919ae0a6c.png)

### ② titleの設定
1. 「ワークスペースタブ」から、変数 > ユーザー定義変数メニュー > 【新規】をクリックし、新たに変数を作成します。 
2. 「変数対応を選択して設定を開始..」をクリックして、表示された変数対応から【データレイヤーの変数】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/a7e23a37-0e01-504d-3e18-bb27f634e0a6.png)
3. 「データレイヤーの変数名」に「title」と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/ba32b8a8-7ff7-87ef-afb6-05bcaded6ea5.png)

4. データレイヤーの変数を設定したら変数名（例：お問い合わせ_仮想PV_title）を入力して【保存】をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/60bc0520-37a7-d670-efd3-ebeb65597c85.png)


### ③ eventの設定
1. 「ワークスペースタブ」から、変数 > ユーザー定義変数メニュー > 【新規】をクリックし、新たに変数を作成します。 
2. 「変数対応を選択して設定を開始..」をクリックして、表示された変数対応から【カスタムイベント】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/51df0234-0e5f-0534-7aed-1c13adf13ded.png)
3. カスタムイベントの変数を設定したら変数名（例：お問い合わせ_仮想PV_event）を入力して【保存】をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/a30e5b2e-a5b3-7af4-7449-ab4a6c6daaf2.png)
以上の手順で、ユーザー定義変数の設定は完了ですので、ユーザー定義変数の一覧にて「（2）データレイヤー変数をページに追加」で push した配列の要素名と同じになっているか確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/fa94cf46-43d7-0159-e47c-f04d354cd130.png)

##（4）Googleタグマネージャーにてトリガーを設定
（3）の③で設定した event に対してトリガーを設定します。

1. 「ワークスペースタブ」から、トリガー > 【新規】をクリックし、新たにトリガーを作成します。
2.  「トリガーのタイプを選択して設定を開始..」をクリックして、表示されたトリガータイプから【カスタムイベント】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/3b263772-8454-cea9-f0da-6e5ca6e528b6.png)
3. 「イベント名」には event に設定した「loadready」を入力し、トリガーの発生場所は「一部のカスタムイベント」として、イベントを発生させたいURLを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/9fc57bc8-e753-70a4-7224-f9b6f0766688.png)
4. トリガーを設定したらトリガー名（例：お問い合わせ_仮想PV_トリガー）を入力して【保存】をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/f63388ff-7755-fa0f-bfb6-6635dbadc94c.png)

##（5）Googleタグマネージャーにてタグを設定
Googleアナリティクスタグに設定した仮想URLを渡すフィールドと値の設定を行います。

1. 「ワークスペースタブ」から、タグ > 【新規】をクリックし、新たにタグの設定を行います。
2. 「タグタイプを選択して設定を開始..」をクリックして、表示されたタグタイプから【Google アナリティクス: ユニバーサル アナリティクス】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/54a029ea-a0b9-5ced-9d8f-34ec1f4ca5a4.png)
3. 今回はページビューを計測したいので、トラッキング タイプは「ページビュー」とし、タグの設定変数のフィールドを個別にオーバーライドさせるため「このタグでオーバーライド設定を有効にする」にチェックを入れて「トラッキング ID 」を入力します。また、（3）の①と②で定義した変数を値として受け渡すために「詳細設定」にてフィールドを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/7372746b-cee7-3072-a7c2-c97315f26644.png)

4. フィールドを設定したら「タグの設定」の下にある「トリガー」から「トリガーを選択してこのタグを配信...」をクリックし、（4）で作成したトリガーを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/e8d5f279-d98b-fe21-685f-2c6eec3c4222.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/8b62386b-17e3-c4a1-71c2-dda2d38f5578.png)

5. トリガーを設定したらタグ名（例：お問い合わせ_仮想PV_Googleアナリティク）を入力して【保存】をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/f0255e28-b6af-a7fd-53e1-06d63627df55.png)

6. 通常の計測タグ（All Pages）のトリガーの例外に 5. で設定したタグを追加します。これを行うことで、通常の計測用タグと今回設定した仮想PV用のタグとで重複した値の取得を回避することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/b19a8583-d533-297c-32b9-38cc5fb0bddb.png)

##（6）Googleタグマネージャーの公開
全ての設定が完了したら【プレビュー】ボタンをクリックして設定内容が、正しく稼働しているかを確認したら【公開】をクリックします。

#確認
設定内容が問題なく稼働しているか、Google アナリティクスにて確認を行います。
仮想ページの設定を行ったページ（例：www.sample.com/contact/input）にアクセスした状態で、Google アナリティクスの レポート > リアルタイム > 概要 の「サマリー」に表示される「上位のアクティブ ページ」に仮想ページとして設定したURLが表示されるかを確認します。

**お問い合わせ（入力）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/e6ca9bc0-82d4-17e1-3c05-abbd95dd0e6b.png)

**お問い合わせ（確認）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/28fcb792-0d5a-3a88-92b7-25c05039e28d.png)

**お問い合わせ（完了）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162446/8dea19ba-cf65-edba-50d8-9b597024c4fb.png)