WordPressでGTMを使ってGAの自分のアクセスをオプトアウト(除外)する

## 前置き
WordPressで書いているブログに入れているGoogle アナリティクスの整理を昨日行いました。今まで、自分でThemeを拡張して、そこにGoogle アナリティクスのトラッキング・コードを入れていたのですが、そんなことはせずに、プラグインにGoogle アナリティクス関連のものが多く存在することを知り、プラグインで行う方向に切替ました。この投稿はそのときのメモになります。

## プラグイン候補

- Ultimate Google Analytics
- Google Analytics for WordPress
- GA Google Analytics
- Google Universal Analytics
- NK Google Analytics
- GA Universal
- Google Analytics Dashboard for WP

いろいろな候補が挙げられますが、選定基準としては、

- 対応しているGoogle Analyticsのバージョン(同期トラッキング, 非同期トラッキング, ユニバーサル・アナリティクス)
- 管理者がログインしているときにトラッキングされないか
- 使いやすさ

になるかと思います。

## だが少し待った
最近は、Google アナリティクスだけではなく、Yahooアクセス解析や、ヒートマップツール、リスティング広告のコンバージョン・タグ、ディスプレイ広告のリマーケティング・タグと管理すべきタグは増えてきています。これらを1つずつプラグイン管理なんてやってられません。

そこで、導入を検討すべきが、 **タグマネージャー** というものです。現在は、 **Google Tag Manager** と **Yahoo Tag Manager** あたりが有名かと思います。
ウェブサイト上に散らばる各種のタグをHTMLソースを編集することなく、タグマネージャーの管理画面から一括更新を行う、というものです。

今までは、静的ページが多かったりすると、「タグが1つ増えた」というだけのために全ページ更新を行わなければいけない、とかいうとても面倒なことを行っていたかもしれませんが、このタグマネージャーを使うと、「全ページにこのタグを配信」と指定するだけで、それをやってくれます。しかも、ある特定の条件を満たす場合のみ配信、とかある特定の条件を満たす場合は配信しない、とかいろいろ細かく指定可能です。

## 自分のとった選択
Google Analyticsのプラグインを入れるのは辞めにしました。代わりに入れたのは、Google Tag Manager用のWordPressプラグインである **WP Google Tag Manager** です。
利用は簡単で [WordPressのプラグインのページ](http://wordpress.org/plugins/wp-google-tag-manager/) からプラグインをダウンロードし、WordPressにインストールします。
インストールすると、管理画面の「設定」の中に「WP Google Tag Manager」というメニューが追加されます。このメニューを開き、「Container ID」欄にGoogle Tag ManagerのコンテナIDを入力します。（コンテナIDの取得などはここでは省略します）

あとは、Google Tag Manager側でGoogle アナリティクスのトラッキング・コードを配信する設定をしてやれば完了です。配信できるタグの種類は、WordPressのプラグインには依存せずにGoogle Tag Manager側に依存します。通常のGoogle アナリティクスだけでなく、ユニバーサル・アナリティクスにも対応しています。

## あれっ？管理者の除外は？
一部のGoogle アナリティクスプラグインでは可能であったWordPress管理者によるアクセスの除外今のところ、できていません。さてどうしましょうか？

今回は、Google Tag Manager側の **マクロ機能** と **配信ルール** によって解決しました。
ただし、現時点では利用するテーマごとにマクロを書き換えないといけない状態ですので、注意してください。

### マクロの作成
Google Tag Managerにて、マクロの新規追加を行います。マクロ名は「WordPressのログインユーザー名」、マクロのタイプは「カスタムJavaScript」とします。
カスタムJavaScriptに自分は

```js
function () {
  if (document.getElementById('wpadminbar')) {
    try {
      var displayName = document.getElementById('wp-admin-bar-user-info').getElementsByTagName('span');
      return displayName[0].innerText;
    } catch (e) {
      return 'Something';
    }
  } else {
    return '';
  }
}
```

と入れました。これは、現在のデフォルトのThemeにおいて、ユーザー名が書かれているタグを(Chrome開発者ツールなどで)探してきて、それを取得するためのJavaScriptコードを書いたものです。あとは、WordPressにログインしていないユーザであった場合は空文字が変えるようにしています。

**これは使っているWordPressのテーマによって変わってしまう可能性があるので、コピペする際は注意してください。**

### ルールの設定
次にルールを新しく1つ追加します。
ルール名は何でもいいですが、「(ログインユーザ名)がログイン中である」とでもしましょうか。条件は、コンボボックスから先ほどマクロで作成した **{{WordPressのログインユーザー名}}** が存在すると思いますので、これを選択します。また、その他の条件は、「等しい」「Admin」(これは実際に除外したいユーザのログイン名を指定)とします。
これでルールの設定が完了です。

### タグの設定
タグの設定です。基本的なGoogle アナリティクスのタグを指定する部分は省略します。「配信のルール」は、「全てのページ」とします。また **ブロックのルール** に、先ほど作成したルール **「(ログインユーザ名)がログイン中である」** を指定します。

こうすると、先ほど指定したルールに一致したときにタグの配信がブロックされるようになります。

### パブリッシュ
これで完了ですので、Google Tag Manager側でデバッグモードにして動作を確認し、問題ないことが確認できたら、タグをパブリッシュしましょう。


## スマートな解決法
上記の方法だと、テーマを変えたときに、Google Tag Managerのマクロをテーマに合わせて作りなおさなければいけない、という面倒な課題が残っています。またテーマを変更しなくても、何らかの仕様変更の影響を受けて意図した動作をしなくなってしまう可能性が残っています。これを解決する方法は1つあります。

それは、WordPressのプラグインに手を加えることです。今回はマクロ作成のためにカスタムJavaScriptを使用しましたが、 **データレイヤー変数** を利用し、WordPressプラグイン側で、 **データレイヤー変数** にログインユーザー名を入れるところまで行ってしまえば解決です。
データレイヤー変数の利用は単純で、JavaScriptコードで、

```js
dataLayer.push({'Data Layer Variable Name': 'value'})
```

とすれば、Google Tag Manager側の ```Data Layer Variable Name``` という変数名に ```value``` という値が設定されます。これをマクロのカスタムJavaScriptの代わりに使うことができるようになります。

もし、Google Tag Managerのプラグイン作者の方が見てくださっていれば、上記のログインユーザー名をデータレイヤー変数に入れる修正をしていただければと思います。もしくは自分でプラグインを作成するか。