LoginSignup
2

More than 5 years have passed since last update.

Angular2で各ページにgtagを埋め込んで動かす方法

Posted at

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': 'パス'
        });
    }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2