GoogleタグマネージャーでGoogleアナリティクスのイベント計測と、ページタイトルや画像のalt属性を取得するメモ


参考記事（感謝):
 [URLが同じでもページの内容を判断してタグを出し分ける「DOM要素変数」でトリガーを作成する（全20回の16）](https://webtan.impress.co.jp/e/2015/03/05/18979)


## やりたいこと

- 以下のようなHTML構造で、バナー画像をクリックした時にGoogleアナリティクスのイベントトラッキングをGoogleタグマネージャーで送信(計測)したい
- イベントを送信する際、イベントアクションにページタイトルを取得したい
- イベントを送信する際、イベントラベルに画像のalt属性を取得したい

``` HTML
<!-- ページタイトル -->
<h1 class="title">ページタイトル</h1>
<!-- バナー -->
<a href="#"><img src="xxx.jpg" alt="alt属性" class="banner"></a>
```

## 1. タグを新規追加
### Googleタグマネージャーのタグメニューで「新規」
![スクリーンショット 2018-10-02 19.01.18.png](https://qiita-image-store.s3.amazonaws.com/0/40940/850c1b81-f08c-2225-fa2a-32f02238f60d.png)

### タグの設定をクリック
![スクリーンショット 2018-10-02 19.10.57.png](https://qiita-image-store.s3.amazonaws.com/0/40940/4ca3ae05-6a58-677e-e216-d9c62e066ad0.png)

### タグタイプはアナリティクス
![スクリーンショット 2018-10-02 19.11.57.png](https://qiita-image-store.s3.amazonaws.com/0/40940/5770ba62-bd41-ea5d-4a03-27b2e013d1e0.png)

### アナリティクスに送信する内容を記載していく
- トラッキングタイプは「イベント」、カテゴリーはイベントカテゴリで送信したい値を入力
- これからページタイトルのための変数を登録する。イベントアクションの灰色のボタンをクリック
![スクリーンショット 2018-10-02 19.13.38.png](https://qiita-image-store.s3.amazonaws.com/0/40940/921ac12a-7a78-b274-78b4-588de4d1a0d0.png)

### 変数を選択画面で「+」をクリック
![スクリーンショット 2018-10-02 19.15.26.png](https://qiita-image-store.s3.amazonaws.com/0/40940/f2a4d8a5-7e34-d061-c749-5bd0c821c2cc.png)

### 変数を追加する画面。クリックして編集
![スクリーンショット 2018-10-02 19.16.25.png](https://qiita-image-store.s3.amazonaws.com/0/40940/c6949b08-8bde-996a-b252-1f4bc0a1de68.png)

### DOM要素を選択
![スクリーンショット 2018-10-02 19.17.42.png](https://qiita-image-store.s3.amazonaws.com/0/40940/38b1e35b-ebf9-cdfe-06f2-8e2130a42361.png)

### 変数を編集
- 選択方法は「CSSセレクタ」（HTMLでページタイトルにIDが振られている場合はIDを選択）
- 要素セレクタに、HTMLでページタイトルに付与されているclass名を記入（最初の「.(ドット)」を忘れずに）
- 属性名は空欄にすれば、「.title」のテキストを拾ってくれる！
- 一番上の、変数の名前を設定して保存
![スクリーンショット 2018-10-02 19.19.04.png](https://qiita-image-store.s3.amazonaws.com/0/40940/b17bef81-6bb0-9499-641b-1bad886141e3.png)
-
アクション欄には自動で変数名が入る。

### 次にalt属性のための変数を登録する
- イベントラベルの灰色のボタンクリック
![スクリーンショット 2018-10-02 19.24.29.png](https://qiita-image-store.s3.amazonaws.com/0/40940/5b92d912-e62c-bce7-d1ea-209a8edbcff9.png)

### 変数を選択画面で「+」をクリック
![スクリーンショット 2018-10-02 19.25.22.png](https://qiita-image-store.s3.amazonaws.com/0/40940/a88c4ae2-1f69-f7f6-a2eb-54d2fbd99871.png)


### 変数を追加する画面。クリックして編集
![スクリーンショット 2018-10-02 19.16.25.png](https://qiita-image-store.s3.amazonaws.com/0/40940/c6949b08-8bde-996a-b252-1f4bc0a1de68.png)

### 変数の編集画面
- 変数の種類は「自動イベント変数」
- 変数タイプは「要素の属性」
- 属性名は「alt」
- 一番上の、変数の名前を設定して保存。
![スクリーンショット 2018-10-02 19.27.16.png](https://qiita-image-store.s3.amazonaws.com/0/40940/c2e156a7-f675-4576-27a1-d3e72fba9104.png)

### 「値」や「Googleアナリティクス設定」を入力
- 「値」は1。
- 「Googleアナリティクス設定」は、タグマネージャーにアナリティクスを導入した時に設定したトラッキングID変数を入れました（キャプチャーの赤字参照）。
![スクリーンショット 2018-10-02 19.29.00.png](https://qiita-image-store.s3.amazonaws.com/0/40940/106ef151-76d8-1d0d-e539-c8b013e306a7.png)

## 2.今度はトリガーを入力
- 下の枠をクリック
![スクリーンショット 2018-10-02 19.30.55.png](https://qiita-image-store.s3.amazonaws.com/0/40940/9d9ba0de-41ce-18be-d616-99ea5f23a5ca.png)

### トリガーの選択画面で「+」をクリック
![スクリーンショット 2018-10-02 19.31.47.png](https://qiita-image-store.s3.amazonaws.com/0/40940/3651a01a-4a97-0aad-51f1-a14ac4ac879b.png)

### 真ん中をクリック
![スクリーンショット 2018-10-02 19.32.15.png](https://qiita-image-store.s3.amazonaws.com/0/40940/8936b7e0-9927-c0ee-9dfe-69377a5eee03.png)

### トリガーのタイプは「全ての要素」
- 印となるclass「.banner」を<img>タグに設定したため。`<a>`タグであれば「クリック・リンクのみ」でも可。
![スクリーンショット 2018-10-02 19.32.34.png](https://qiita-image-store.s3.amazonaws.com/0/40940/308aa0e3-350a-29b7-f266-032fc6c104d9.png)

### トリガーの詳細設定を記入していく
- トリガーの発生場所は「一部のクリック」
- class名で縛るために、「組み込み変数を選択します...」を選ぶ
![スクリーンショット 2018-10-02 19.33.14.png](https://qiita-image-store.s3.amazonaws.com/0/40940/8daa763a-81a7-abe3-0b45-aab54b0f4dc9.png)

### 「Click Element」を選択
![スクリーンショット 2018-10-02 19.33.30.png](https://qiita-image-store.s3.amazonaws.com/0/40940/6386c0f2-7525-d4ea-3e5b-0ec43017d98f.png)

### 「CSSセレクタに一致する」を選択、「.banner」を入力、一番上のトリガー名を設定して保存
- 右の「+」ボタンを押せば、ページなどさらにイベント発火条件を絞り込むことが可能。
![スクリーンショット 2018-10-02 19.34.31.png](https://qiita-image-store.s3.amazonaws.com/0/40940/750c0674-d745-4ee8-ffe5-4d4d271f647c.png)

### 全て入力できたので、一番上のタグ名を入力して保存
※下のキャプチャーはGoogleアナリティクス設定のところが実際にやったものと違います。
本当はトラッキングID用の変数が表示されてました。
![スクリーンショット 2018-10-02 19.34.51.png](https://qiita-image-store.s3.amazonaws.com/0/40940/9fc5fa3a-e1d8-2d39-2d4b-e7355d99b903.png)


## 3.プレビューして、クリックして発火が確認できれば、公開して、アナリティクスで取れているか確認！