GA トラッキングコード タグマネジメントツールとは？

#GAとは
「GA」とは「Google Analytics」の略で、Googleが提供するwebページのアクセス解析サービスの事。

- 訪問者数
- 訪問者のアクセスの流入経路(国)
- アクセスに使用されたデバイス
- アクセスの時間帯
- 行動パターン
 
などのデータを計測することができ、それらを分析することによって、webページのコンテンツ、商品などの成果を的確に評価する助けとなる。また、サイトやアプリのユーザーが集計したデータを、レポートツールやアプリを使って容易に確認することができる点も大きなメリット。

トラッキングコードと呼ばれるJavaScriptのコードをhtmlページに組み込むことで、誰でも使用するができる。
簡単な原理としては、ユーザーがページにアクセスするとトラッキングコードのJavaScriptが実行されてGoogleのサーバーにデータを蓄積し、それをGoogle Analyticsで計測している。
![スクリーンショット 2020-02-21 11.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/941f4aa7-83fb-8248-d652-4cd7a5a0e287.png)


#トラッキングコードとは
アクセス解析のために、ホームページのhtmlファイル等に設置するコードの事。
「Googleアナリティクスタグ」「トラッキングID」「計測タグ」「ビーコン」と様々な呼び名があるが、解釈はどれも同じ。

計測を行いたいサイトを表示する過程で、コード内のjavaScriptが作動し集計するために必要な値を蓄積させる。当然ながら、このコードが設置してないwebページに関しての計測は行われない。

同じタグを用いて複数サイトに適用させる、というような使い方は正しい計測結果を取得できなくなるため注意。
web制作において、ページをコピーしていると起こりうる問題。また、デバッグツールでソースコードを他者にコピーされても同じ事になる。前者は意識しておきたい。


```JavaScript
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=ho-123456789-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456789-1');
</script>
```
##設置場所について
googleアナリティクスで取得したトラッキングコードは、各バージョンによって貼り付け位置が若干異なる。現在は「head終了タグの前」「body終了タグの前」に貼り付ける。(Google推奨)

管理者側の確認方法だが、トラッキングコード設置後は、「リアルタイム レポート」や「Google Tag Assistant（Chrome ブラウザの拡張機能）」を活用し、Googleアナリティクスでトラフィックデータが受信されてるかのステータスの確認が可能。

![スクリーンショット 2020-02-21 11.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/179aa0df-75ab-769b-5ac5-3fa0fcd69ebe.png)

<small>2020/02/21現在の取得画面</small>

<details>
<summary>各バージョンの貼り付け位置はこちら。</summary>
<div>
###gtag.js(グローバルサイトタグ)
2017/09 リリース　設置位置：```<head></head>```内の上部

```JavaScript
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script
```
---
###analytics.js(ユニバーサルアナリティクス)
2014/04 リリース
設置位置：```</head>```の前

```JavaScript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-Y');
ga('send', 'pageview');
```
---
###ga.js(非同期コード)
現在もっとも普及しているコード
設置位置：```</head>```の前

```JavaScript
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
```
---
###ga.js(同期コード)
設置位置：```</body>```の前

```JavaScript
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));


var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._initData();
pageTracker._trackPageview();
```
---
###urchin.js
最初期のコード
設置位置：```</body>```の前

```JavaScript
_uacct = "UA-xxxxxx-x";
urchinTracker();
 ```



>[https://www.uneidou.com/ga-solution/post-12825/](https://www.uneidou.com/ga-solution/post-12825/)より引用
</div>
</details>


##現在は非同期トラッキングコード
現在Googleアナリティクスで発行されてるユニバーサルアナリティクストラッキングコードは非同期トラッキングコード。

```JavaScript
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

```

以前は同期トラッキングコードが存在したが、現在は、ユニバーサルアナリティクス（非同期トラッキングコード）が標準となっている。

また、ユニバーサルアナリティクスでも同期的なトラッキングコードにカスタマイズできる。
(※同期トラッキングコード = 非同期に比べて正確な測定ができるが、読み込みが遅い)

2017年リリースのgtag.js(グローバルサイトタグ)は、Google アナリティクスやGoogle 広告のタグをまとめて記載することが可能。
#Google Tag Managerとは
GoogleアナリティクスTMやコンバージョンタグなどといった「HTMLに差し込んで使用するコード」をHTMLから外部化して、一元管理するためのタグマネジメントツールの事。
各ページにコードを埋め込み管理を行うと、サイトボリュームが肥大化した場合や、読み込ませるタグが複雑化した際などに管理が複雑になりやすいが、タグマネジメントツールで一括で管理すると、各ページに読み込ませるコードはGoogle Tag Managerのコードだけになるため、保守が容易になる。サイトのコードを編集することなく、タグ マネージャーの管理画面を使用して、Google 広告、Google アナリティクス、Floodlight のタグや Google 以外のタグを追加、更新する事ができる。


トラッキングコードの代わりに、
https://tagmanager.google.com/#/homeにて発行されたGoogle Tag Managerのコードを貼り付ける事となる。

![スクリーンショット 2020-02-21 11.27.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/cd6de616-3c0e-c615-8614-6d066c82c525.png)

```<!-- Google Tag Manager -->```
```<!-- End Google Tag Manager -->```


により囲われたタグが発行されるので、サイト移行などでコピーする必要がある際でもわかりやすい。