Angular2でGoogle Analyticsにデータ送信しようと思ったところ、いろいろ躓いたのでメモ。

まずAnalyticsで表示されるトラッキングコードがgtagになっててびっくり。(2017年10月)

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-1');
</script>


今までga関数だったのが最近変更になった模様。
Web制作者がgtag.jsで知っておきたいGoogleアナリティクスの今

(知らなかったけど)今までもGoogle タグマネージャでAnalyticsのタグを設定し、サイト側でタグマネージャ経由でコードを読み込ませるような設定は出来てた模様。
トラッキングコードの中で読み込んでるscriptを見るに、トラッキングIDを渡してあげるとそれ用のscriptを返してくれるように、今まで自分たちで設定してた部分をタグマネージャさんが用意してくれてるっぽい。
(実際にhttps://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1をブラウザから見てみるとトラッキングIDが設定されてるスクリプトが返ってきた)

ここまではいろいろと情報出てるしなんとかなったものの、いざAngular2にgtag埋め込んでやるぞという段階で2つ問題が発生した。

※トラッキングコードは今までどおり、headの先頭に埋め込みでOKでした

1.Component内でgtagが認識されない

これは単純に私のTypeScript力が無かったせいなのだが、アンビエント宣言というものをしないといけない模様。
こんなやつ

declare var gtag:any;

参考：
Angular2のようなシングルページアプリケーションでGoogleアナリティクスを使う方法

2.Analyticsに/の情報しか送られない(ページビューの送信の仕方が分からない)

Analyticsにページの情報送ってるやつ、あれ何て言うの！
状態だったので知らなかったけど、「仮想ページビュー」というらしい。
こんな感じで設定出来るとのこと

gtag('config', 'UA-XXXXXXXXX-1',{
'page_title': 'ページタイトル',
'page_path': 'パス'
});


参考：
新タグ「gtag.js」での仮想ページビュー設定について

完成サンプル

出来てしまえばなんの事はないけど結構時間かかった…

import { Component } from "@angular/core";

declare var gtag:any; // ← これ重要
@Component({
    selector: "hoge",
    templateUrl: './html/hoge.component.html',
    styleUrls: [ './css/hoge.component.css' ]
})
export class HogeComponent {
    constructor() {
        gtag('config', 'トラッキングID',{
            'page_title': 'ページタイトル',
            'page_path': 'パス'
        });
    }
}