Angular2（Single Page Application）でページ遷移ごとにGA上にトラッキングする方法

前回の記事「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値を含めたパスが表示されます。

4. 残課題

上記の方法では、SPA以外のコンテンツに対しても、パスの末尾に"#"が含まれてトラッキングされます。 正確にトラッキングを設定する場合は、通常コンテンツとSPAのコンテンツを分類してGTM側で別々のGoogleAnalytisのタグ設定を実施してください。