Google Tag Manager のタグ、トリガー、変数の命名規則を考えてみた [設計編]

今のプロジェクトで Google Analytics (以下GA)から Google Tag Manager (以下GTM)に移行しました。移行の際に GTM の命名規則をルール化したので、何回かに分けて紹介します。

* [Google Tag Manager の命名規則に沿って実装してみた [変数の実装編]](http://qiita.com/tokuda109/items/e829cf1d112cbbe94945)
* [Google Tag Manager の命名規則に沿って実装してみた [トリガーの実装編]](http://qiita.com/tokuda109/items/6bcd2b0f3d35f70747f0)
* [Google Tag Manager の命名規則に沿って実装してみた [タグの実装編]](http://qiita.com/tokuda109/items/1daec85eb2fe5867cf7f)

## GTM の簡単な説明

GTMは、ウェブページに埋め込んだ各種スクリプトを GTM の管理画面で設定し、配信することができるサービスです。ウェブページにたくさんのスクリプトを入れている場合、GTM で一元管理できるので、管理がより楽になります。

GTM の管理画面
![tagmanager.png](https://qiita-image-store.s3.amazonaws.com/0/1876/4a4bbe19-9cf2-9f8d-912c-082660113450.png)

## 命名規則を決めるに至った過程

今のプロジェクトには、既に幾つかのスクリプトが実装されていて、移行可能なスクリプトの全てを GTM で管理すると数が多くなるので、管理できなくなることは想定できることでした。
どうやって管理していけばいいか検討していた時に、GTM のサポートページに、[Naming conventions and setup tips](https://support.google.com/tagmanager/answer/6163827?hl=en) というページを発見しました。
**名前に命名規則を設け、それが担う役割を名前として表現する**やり方が紹介されていて、このやり方を参考に命名していくことにしました。

## 命名規則のルール

命名規則として以下のものをルールとして定めました。

* プロダクト(Google Analytics や Google AdSense をはじめとした GTM がサポートしているもの)に依存するものは後述するプロダクトコードをプレフィックスとして名前に持ちます。
* ページビューは Pageview、イベントは Event、トリガーは Trigger、変数は Variable 等のように自身の役割を名前に持ち、詳細を見なくても何をするためのものか把握できるようにします。
* 名前に使用する文字列はキャメルケースで、名前を構成する各単語を ` - ` を使って一つの名前として命名します。また、単語は全て英語表記で統一しました。

### プロダクトコード

以下のプロダクトが標準で選択可能で、これらに属するタグ、トリガー、変数は名前の一番最初にプレフィックスを付けて命名しています。

* *GA*: Google Analytics
* *AS*: Google AdSense
* *AW*: Google AdWords

### フォルダ構成

フォルダ構成と各フォルダの役割は以下の通りです。
今回は GA の移行だったので、GA をプレフィックスとして持つフォルダを作成し、GA に関するタグ、トリガー、変数等を入れて分類しています。

フォルダ名       | フォルダの役割
---------------|-------------------------
Unifiled Items | 未分類のタグ、トリガー、変数が入るところ。
Triggers       | 共通で使うトリガーを入れるフォルダ
Variables      | 共通で使う変数を入れるフォルダ
GA - Pageviews | GAのページビューのタグを入れるフォルダ
GA - Events    | GAでイベントのタグを入れるフォルダ
GA - Socials   | GAでソーシャルのタグを入れるフォルダ
GA - Triggers  | GAでのみ使うトリガーを入れるフォルダ
GA - Variables | GAでのみ使う変数を入れるフォルダ

新規で作成したタグ、トリガー、変数はフォルダを選択しないと Unifiled Items に入ってしまうので、必ずどこかのフォルダに所属させ、極力 Unifiled Items に放置されないようにしています。

## 共通のトリガー、変数

**プロダクトにかかわらず全体で使いまわし可能**なトリガー、変数は共通のものとして扱います。共通で使うのでプロダクトコードは名前に含まれていません。

### 共通で使うトリガーの命名規則

共通で使うトリガーは、`Triggers` フォルダに入れて分類していて、以下の命名規則を持ちます。

```
Trigger - [Event] - [Conditions|Event Name|Trigger Type]
```

`Conditions`、`Event Name` 等は選択した `[Event]` によって設定する項目が違うので柔軟に命名しています(ただし、トリガー名を見て何をしているか推測できるように命名しています)。

#### Event

* Page View
* Click
* Form Submission
* History Change
* Custom Event
* JavaScript Error
* Timer

##### トリガー名の例

* Trigger - Custom Event - Match - All Event
* Trigger - Pageview - Match - Index Page

### 共通で使う変数の命名規則

共通で使う変数は、`Variables` フォルダに入れて分類していて、以下の命名規則を持ちます。

```
Variable - [Variable Name]
```

##### 変数名の例

* Variable - Domain
* Variable - Page Title
* Variable - User Agent
* Variable - Search Query

## GAのタグ、トリガー、変数

次に、ここでは GA で使うタグ、トリガー、変数を紹介しますが、他のプロダクトでも名前の付け方は同じ要領で行います。
GA のタグ、トリガー、変数は全て **GA のプレフィックスを持ち**、フォルダも GA 用に用意したフォルダに入れます。

### GA で使うタグの命名規則

タグを作成する時に以下のトラッキングタイプが選択可能で、数が多くなるのでトラッキングタイプ毎にフォルダを分けています。

##### トラッキングタイプの種類

* ページビュー (Pageview)
* イベント (Event)
* トランザクション (Transaction)
* ソーシャル (Social)
* 速度 (Timing)
* リンクをデコレート (Decorate Link)
* フォームをデコレート (Decorate Form)

### GA で使うページビュータグの命名規則

GA で使うページビュータグは、`GA - Pageviews` フォルダに入れて分類していて、以下の命名規則を持ちます。

```
GA - Pageview - [Page Name]
```

`[Page Name]` は各ページ名前付けしていて、トップページだと `Index Page` としていて、

```
GA - Pageview - Index Page
```

のようなタグ名になります。

##### 例

* GA - Pageview - Index Page
* GA - Pageview - Article Detail Page
* GA - Pageview - Contact Page

### GA で使うイベントタグの命名規則

GA で使うイベントタグは、`GA - Events` フォルダに入れて分類していて、以下の命名規則を持ちます。

```
GA - Event - [Event Category] - [Event Action]
```

*イベントラベル*や*値*等はイベント毎に差がでるところなので規則に含めていません。

#### Event Category

* Header - Logo (ヘッダー内のロゴ)
* Header - Menu (ヘッダー内のメニュー)
* Contact Link (お問い合わせフォームへのリンク)
* Outbound Link (外部サイトへのリンク)
* Inbound Link (回遊リンク)
* Facebook Page (Facebook Page プラグイン)
* Carousel (カルーセルモジュール)

#### Event Action

* Click (押下)
* Fan (Facebook Page プラグインのいいね)
* Flick (カルーセルモジュールのフリック)

##### 例

* GA - Event - Header Logo - Click
* GA - Event - Outbound Link - Click
* GA - Event - Facebook Page - Fan
* GA - Event - Carousel - Flick

### GA で使うソーシャルタグの命名規則

GA で使うソーシャルタグは、`GA - Socials` フォルダに入れて分類していて、以下の命名規則を持ちます。

```
GA - Social - [Network] - [Action]
```

#### Network

* Facebook
* Twitter
* Line

#### Action

* Like
* Share
* Follow
* Send

##### 例

* GA - Social - Facebook - Like
* GA - Social - Facebook - Share
* GA - Social - Twitter - Follow
* GA - Social - Line - Send

### GA で使うトリガーの命名規則

`GA` のプレフィックスを持ち、それ以外は*共通で使うトリガーの命名規則*と同じです。

```
GA - Trigger - [Event] - [Conditions|Event Name|Trigger Type]
```

##### 例

* GA - Trigger - Custom Event - Facebook - Like
* GA - Trigger - Custom Event - Virtual Page View

### GA で使う変数の命名規則

```
GA - Variable - [Variable Name]
```

##### 例

* GA - Variable - Tracking ID
* GA - Variable - Virtual Page View
* GA - Variable - Utm Source
* GA - Variable - Utm Campaign
* GA - Variable - Utm Content
* GA - Variable - Utm Medium
* GA - Variable - Utm Term
* GA - Variable - Social Network - Facebook
* GA - Variable - Social Action - Like

## 最後に

以上、GTM 移行をする際に決めた命名規則でした。他にもこういうルールがあったほうがいいかもとかあればコメント等で教えてもらえると取り込みたいと思います。

## 参考

* [Google Tag Manager: Coding & Naming Conventions](http://online-behavior.com/analytics/tag-manager-conventions)
* [Naming conventions and setup tips](https://support.google.com/tagmanager/answer/6163827?hl=en)