Angular2（SPA）に、Google Tag Manager 経由でGoogle Analyticsを設定する方法

Angular2で作成したSPA（ Single Page Application）に対して、GTM（Google Tag Manager）経由でUniversal Analyticsのタグ（イベント）を設定する方法について説明します。

設定手順

1. GTMにトリガーを設定

GTMにログインし、ワークスペース ＞ トリガーの順にクリックし、『新規』ボタンをクリックします。

1-1. トリガーを新規登録

1-2. トリガー名を設定

トリガー名を変更後、「トリガータイプを選択して設定を開始…」をクリックします。

1-3. トリガーのタイプを選択

「履歴の変更」を選択します。これを選択することによって、URLの変化がトリガーとなります。

1-4. トリガー登録確認

「すべての履歴の変更」を選択します。これを選択することによって、URLが変化した場合すべてトリガーとなります。
一部のURL、特定の条件下で発火させたい場合は、「一部の履歴の変更」を選択し条件を設定してください。
『保存』ボタンをクリックして設定完了となります。

1-5. トリガー登録完了

2. GTMにタグを登録

2-1. タグを新規登録

次にタグを登録します。ワークスペース ＞ タグの順にクリックし、『新規』ボタンをクリックします。

2-2. タグ名を設定

タグ名を変更後、「タグタイプを選択して設定を開始…」をクリックします。

2-3. タグタイプを選択

「ユニバーサル アナリィクス」を選択します。

2-4.Universal Analytics 情報を設定

トラッキングIDを設定します。トラッキングIDの調べ方については、こちら
続いて「トリガーを選択してこのタグを配信…」をクリックします。

2-5. トリガー選択

手順1で設定したトリガーを選択します。

2-6. タグ登録確認

『保存』ボタンをクリックして設定完了となります。

2-7. タグ登録完了

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