GTMの要素の表示トリガーを使ってUniversal Analyticsにイベントを送信する汎用設定

[GTMの要素の表示トリガー](https://support.google.com/tagmanager/answer/7679410?hl=ja)はスクロール率に囚われず**特定の要素が画面に表示されたこと**をトリガーとしてタグを動かすことができるトリガータイプです。
このため、記事の見出しごとの読了率などを計測するために要素の表示トリガーを[Googleアナリティクスイベントタグ](https://support.google.com/tagmanager/answer/6106716?hl=ja)のトリガーとして利用すると便利ですが、複数のページ種別の複数要素をロギング対象としたとき、似たような設定を数十個作る羽目になり**GTMの中身が汚くなりがち**です。また、鮮度が命の記事にとって**GTM設定までのタイムラグ**はできるだけ避けたいところです。

これらの問題の対策としてGTMで以下のような設定をあらかじめ行っておくことにより、GTM上での追加の設定変更をほぼ必要としない形でページ制作者が自由に要素の表示イベントをGoogleアナリティクスに送信できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/9bfced6d-f1ec-f674-e9e4-353dc6a75316.png)

# サイト上の実装

以下のように「要素の表示トリガー」を稼働させたい複数の要素に対し、 `data-gtm-visibility` 属性を付与します。
category, action, labelの値にはGoogleアナリティクスに送信したい情報を入力します。

```html:
<h2 data-gtm-visibility='{"category":"column", "action":"view", "label":"section02"}'>コーヒーはおいしい</h2>
```

```html:
<img data-gtm-visibility='{"category":"popup", "action":"view", "label":"campaign_20210305"}' src="/img/campaign_popup_20210305.png">
```

# GTM上の準備
## 変数設定の作成
### 自動イベント変数 - 要素の表示汎用データ
要素の変更トリガーが稼働した要素の持つ `data-gtm-visibility` 属性の値を取得するための変数設定。

|項目名|設定する値|
|:-|:-|
|変数名|自動イベント変数 - 要素の表示汎用データ|
|変数のタイプ|自動イベント変数|
|変数タイプ|要素の属性|
|属性名|data-gtm-visibility|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/a910f89d-1323-8ed4-617d-206d14163e59.png)
### String - 要素の表示汎用データ_action
「自動イベント変数 - 要素の表示汎用データ」が取得した属性値からactionの値を取り出すための変数設定。
※ 変数設定「自動イベント変数 - 要素の表示汎用データ」の名前を違うものにした場合は合わせてコード内の`{{自動イベント変数 - 要素の表示汎用データ}}`部分を変更後の名前に合わせる。

|項目名|設定する値|
|:-|:-|
|変数名|String - 要素の表示汎用データ_action|
|変数のタイプ|カスタムJavaScript|

```js:
function(){
  var rawData = {{自動イベント変数 - 要素の表示汎用データ}};
  var key = 'action';
  var jsonData = JSON.parse(rawData);
  if(jsonData === null){
    return undefined;
  }
  return jsonData[key];
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/e1e3a63a-b0c5-1bbd-15bd-f5631dae876a.png)

### String - 要素の表示汎用データ_category
「自動イベント変数 - 要素の表示汎用データ」が取得した属性値からcategoryの値を取り出すための変数設定。
変数設定「String - 要素の表示汎用データ_action」と同様に作成する。

|項目名|設定する値|
|:-|:-|
|変数名|String - 要素の表示汎用データ_category|
|変数のタイプ|カスタムJavaScript|

```js:
function(){
  var rawData = {{自動イベント変数 - 要素の表示汎用データ}};
  var key = 'category';
  var jsonData = JSON.parse(rawData);
  if(jsonData === null){
    return undefined;
  }
  return jsonData[key];
}
```

### String - 要素の表示汎用データ_label
「自動イベント変数 - 要素の表示汎用データ」が取得した属性値からlabelの値を取り出すための変数設定。
変数設定「String - 要素の表示汎用データ_action」と同様に作成する。

|項目名|設定する値|
|:-|:-|
|変数名|String - 要素の表示汎用データ_label|
|変数のタイプ|カスタムJavaScript|

```js:
function(){
  var rawData = {{自動イベント変数 - 要素の表示汎用データ}};
  var key = 'label';
  var jsonData = JSON.parse(rawData);
  if(jsonData === null){
    return undefined;
  }
  return jsonData[key];
}
```

## トリガー設定の作成
### 要素の表示 - data-gtm-visibility
`data-gtm-visibility` 属性を持つ要素の表示に反応するトリガー設定。

|項目名|設定する値|
|:-|:-|
|トリガー名|要素の表示 - data-gtm-visibility|
|トリガーのタイプ|要素の表示|
|選択方法|CSSセレクタ|
|要素セレクタ| `*[data-gtm-visibility]` |
|このトリガーを起動するタイミング|1要素につき1度|
|このトリガーの発生場所|一部の表示イベント|
|イベント発生時にこれらすべての条件がtrueの場合に..|要素の表示トリガーを使う可能性があるすべてのページが対象となるように指定|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/6d5f324f-495c-ace9-d340-fdca4c621f5b.png)

## タグ設定の作成
### UA event 要素の表示 - data-gtm-visibility
`data-gtm-visibility` 属性を持つ要素の表示を持つ要素の表示イベントをGoogleアナリティクスに送信するためのタグ設定。

|項目名|設定する値|
|:-|:-|
|タグ設定名|UA event 要素の表示 - data-gtm-visibility|
|タグの種類|Googleアナリティクス: ユニバーサル アナリティクス|
|トラッキングタイプ|イベント|
|カテゴリ|{{String - 要素の表示汎用データ_category}}|
|アクション|{{String - 要素の表示汎用データ_action}}|
|ラベル|{{String - 要素の表示汎用データ_label}}|
|非インタラクションヒット|真（[直帰率](https://support.google.com/analytics/answer/1009409?hl=ja)の計算に影響を与えたくないとき「真」そうでないときは「偽」を選択）|
|Googleアナリティクス設定変数|目的のプロパティにデータを飛ばせる設定を選択|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/2f585c2e-ecba-8e18-458e-0497257de363.png)

以上の設定が完了したらワークスペースを公開

# 計測確認
以下のような方法で計測を確認可能です。

## Google ChromeのNetworkタブによる確認
data-gtm-visibility属性を持つ要素が表示されたときにGoogleアナリティクスにデータが飛んでいる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/41e0c4e0-2431-aa78-b93c-213fd4571bee.png)

## Google アナリティクス上での確認
リアルタイムレポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/d1241cee-61e9-1f4d-1055-148242e64dde.png)
行動>イベント>上位のイベント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/0117f294-51a0-2575-29a9-7af3ec7648d0.png)

# 参考になる情報
- [Googleタグマネージャへ新たに「スクロール距離」トリガーと「要素の表示」トリガーが登場 - アユダンテコラム](https://ayudante.jp/column/2017-10-24/13-04/)
- [data-* - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)


以上