Angular 4のSingle Page ApplicationでGoogle Analyticsを設定する

8173 ワード
SPA Angular2 JavaScript Angular GoogleAnalytics JavaScript テキストリンク

こんにちは。10分で生産的なミーティングができるWeb会議ツール、minmeetingを開発している伊勢川です。

AngularでGoogle Analyticsを設定しようとした際に、Googleの説明の通りに設定をするとデータが連携されなかったので、失敗したパターンとうまくいったパターンを記載しておきます。

うまくいったパターン

  1. googletagmanagerのソースをheadタグ内で読み込む。
  2. 初期化コードはbodyタグの中で読み込む。
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
  <!-- 1. googletagmanagerのソースはheadタグ内で読み込む -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
  <!-- 2. 初期化コードはbodyタグ内で呼び出す -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
</body>
</html>

失敗したパターン

headタグの先頭に貼り付ける

設定画面には、「head内の最初の要素として貼り付けてください。」と書いてあるので、下記のように貼り付けたが、データを受信せず。

<!doctype html>
<html>
<head>
  <!-- ここ -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
    :
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
</body>
</html>

headタグの一番最後に貼り付ける

トラブルシューティングのページを見ると、「head終了タグの直前に貼り付けてください。」と書いてあるので、下記のように貼り付けたが、データを受信せず。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
  <!-- ここ -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
</body>
</html>