masalibの日記

システム開発、運用と猫の写真ブログです

Angular GoogleアナリティクスとGoogleタグマネージャーの設定

AngularはSPA(Single Page Application)なので初回以外は
ページ遷移のイベントがとらないとアナリティクスに反映されない
Angularだけじゃなく他のSPAでも多分同じの
Googleタグマネージャーの設定を記載する

1・Googleアナリティクスのトラッキングコードを取得

自分が説明するより、このサイトをみた方がはやい
参考URL
junichi-manga.com

2・Googleタグマネージャーのコンテナ作成

コンテナをつくる所は
参考URL
liskul.com

コンテナを作成する所まで参考にする

3・Googleタグマネージャーのトリガーをつくる

ページ遷移のトリガーをつくる

f:id:masalib:20170821002539j:plain
f:id:masalib:20170821002554j:plain
f:id:masalib:20170821002610j:plain

4・Googleタグマネージャーのタグをつくる

f:id:masalib:20170821002802j:plain
f:id:masalib:20170821002814j:plain
f:id:masalib:20170821002825j:plain

タグをつくって公開する

5・Angularのソースに反映

タグマネージャーに表示されてるタグをコピーする

f:id:masalib:20170821003441j:plain

src/index.htmlを修正する
f:id:masalib:20170821003457j:plain

6・アナリティクスのリアルタイムで確認する

f:id:masalib:20170821003913j:plain


参考URL
How To Setup Google Analytics In AngularJS Using Google Tag Manager (GTM)?
Angular 2: Set up Google Analytics and Google Tag Manager - theCodeCampustheCodeCampus



この記事を書いていて気がついた
フォーム送信時テストをおこなっていない
反映されないかも・・・
あとで確認しなくては・・・