# Googleタグマネージャー

## Googleタグマネージャー概念

目的 : Googleタグマネージャー（以下「タグマネ」）で、マーケティングに利用できるデータ取得・加工し、Googleアナリティクスへ格納。

digraph graphname{
        タグマネ[label="Googleタグマネージャー" color=Black, fontcolor=Black, fontsize=16, shape=box]
		タグマネ -> タグ;
		タグマネ -> トリガー;
		タグマネ -> 変数;

	}

タグマネは「タグ」「トリガー」「変数」という３つから成り立ちます。中でも「変数」は「タグ」「トリガー」を構成する要素にもなるため、まずは「変数」を利用することからはじめましょう。

## Googleタグマネージャーで電話CVを計測

目的
---
広告経由の電話CVを「Google広告」と「GoogleAnalytics」でそれぞれ計測する

前提条件
---
http://indent.site/gtag/telcv.html

上記URLへ下記のようなコードで電話連絡ボタンが設置されているとする。

<a href="tel:[phone]">
  <img src="http://indent.site/gtag/tel.png" width="150px" alt="電話連絡する①">
</a>
<a href="tel:[phone]">
  <img src="http://indent.site/gtag/tel.png" width="150px" alt="電話連絡する②">
</a>

<a href="tel:[phone]">
<img src="http://indent.site/gtag/tel.png" width="150px" alt="電話連絡する">
</a>

<a href="tel:[phone]">
<img src="http://indent.site/gtag/tel.png" width="150px" alt="電話連絡する">
</a>

実装内容
---
クリックされたリンク（=変数）がCV電話番号0312345678と等しいとき（=トリガー）、CV用のタグを発火する（=タグ）。

実装のゴール
---
左のボタンを押したときには、telcvタグが発火している。右のボタンを押しても同タグは発火しない。
<iframe width="560" height="315" src="https://www.youtube.com/embed/VRi723CPkzA" frameborder="0" allow="accelerometer;" allowfullscreen></iframe>

GoogleAnalytics
---
### 変数
1. 組み込み変数の設定を選択
2. Click URLにチェックが入っていることを確認

### タグ
1. タグの種類をGoogleアナリティクスを選択
2. トラッキング タイプ を イベントと設定
3. カテゴリを電話番号と設定
4. アクションをclickと設定
5. ラベル を{{Click URL}}と設定
6. トリガーの部分を選択

### トリガー
1. トリガーの新規作成を選択
2. トリガーのタイプをクリック-リンクのみを選択
3. Click URL - 等しい - tel:[phone] と設定

Google広告
---
### Google広告画面
1. ツールからコンバージョンを選択
2. 電話件数からモバイルサイト上の電話番号のクリックを選択
3. 案件に応じた適当な内容を記載して作成
4. Googleタグマネージャを利用するを選択すると下記のような画面が表示されるので、メモ

### 変数
※既にGoogleAnalyticsで変数を選択している場合は、この項目を飛ばしてください
1. 組み込み変数の設定を選択
2. Click URLにチェックが入っていることを確認

### タグ
1. タグの種類をGoogle広告のコンバージョントラッキングを選択
2. コンバージョン ID にメモした数値を入力
3. コンバージョン ラベル にメモした数値を入力
4. トリガーを選択

### トリガー
※既にGoogleAnalyticsでトリガーを作成している場合は、そのトリガーを選択するのみでOKです。
1. トリガーの新規作成を選択
2. トリガーのタイプをクリック-リンクのみを選択
3. Click URL - 等しい - tel:[phone] と設定

デバッグモードで確認
---
1. タグマネのプレビューを選択（これでデバッグモードが開始されます）
2. 該当するURLへアクセスし下部のデバッグモードが開始されているかを確認
3. Tags Not Fired On This Page にGoogleAnalyticsのCVタグとGoogle広告のCVタグが表示されていることを確認

4. 該当ページで「ctrl」を押しながら電話ボタンをクリック
5. デバッグモードのSummaryの下に追加された箇所をクリック
6. Tags Fired On This PageにGoogleAnalyticsのCVタグとGoogle広告のCVタグが表示されていることを確認
7. (これ以降は主に確認)該当するタグをクリックするとFiring Triggersにチェックが入っていることが確認できる
8. Varieblesを選択するとタグマネで選択した変数が表示されていることを確認できる
9. その中でClick URLに該当する電話番号が入力されていることが確認できる

実装のゴール
---
左のボタンを押したときには、telcvタグが発火している。右のボタンを押しても同タグは発火しない。
<iframe width="560" height="315" src="https://www.youtube.com/embed/VRi723CPkzA" frameborder="0" allow="accelerometer;" allowfullscreen></iframe>