前回の記事「Angular2（SPA）に、Google Tag Manager 経由でGoogle Analyticsを設定する方法」で、SPA（Single Page Application）へのGAの設定を方法を説明させて頂きましたが、この設定方法では、すべてのページが同じページ（SPAのベースURL）でトラッキングされる課題が残っていました。
今回は、ページ遷移ごとにSPAのURLでGA上にトラッキング出来るように調整します。
設定手順
1. Hash用変数を追加設定
Angular2では、ページ遷移をURLのハッシュ値で制御していますので、GAトラッキング用のpage情報に付加するためのHash取得用変数を新たに追加します。
1-1. 変数を新規登録
GTMにログインし、ワークスペース ＞ 変数の順にクリックし、『新規』ボタンをクリックします。
1-2. 変数名を設定
変数名を入力後、「変数タイプを選択して設定を開始…」をクリックします。
1-3. 変数タイプを選択
変数タイプ、URLを選択します。
1-4. 要素タイプを選択
要素タイプ、フラグメントを選択します。右上の『保存』ボタンをクリックして設定完了となります。
1-5. 変数設定完了
2. タグにフィールドを追加
次にGAのタグにフィールドを追加し、ページの値を上書きします。
2-1.対象タグを選択
ワークスペース ＞ タグの順にクリックし、前回登録したタグを選択します。
2-2.対象タグを編集
右上の編集ボタンをクリックします。
2-3.フィールド設定を追加
フィールド名に「page」、値に「{{Page Path}}#{{Hash}}」を入力して、『保存』ボタンをクリックします。
Hashは手順1で登録した変数名。
3. 設定確認
3-1.Google Analyticsを参照
Google Analyticsの [リアルタイム] > [コンテンツ]を表示して、対象サイトにアクセスし Google Analyticsに表示される[アクティブなページ]を参照してください。Hash値を含めたパスが表示されます。
