こんにちは。10分で生産的なミーティングができるWeb会議ツール、minmeetingを開発している伊勢川です。
AngularでGoogle Analyticsを設定しようとした際に、Googleの説明の通りに設定をするとデータが連携されなかったので、失敗したパターンとうまくいったパターンを記載しておきます。
うまくいったパターン
- googletagmanagerのソースをheadタグ内で読み込む。
- 初期化コードは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>