「ぐーたま」（GoogleTagManager）で使える？カスタムJavaScriptコードサンプル1

亀更新でまったく記事がかけていないので、コードサンプルとか載せて更新した気になろうという自分のモチベーションのための記事です。

※ここに載せるサンプルは、一応テストした上で載せますが、ご利用は自己責任でお願い致します。

知人の指摘で今後GTMを「ぐーたま」と呼びます。
なぜならかわいいから！（yukki氏 @TakayukiOnaya ありがとうこざいます！）

GoogleAnalyticsでいろいろな情報を取るためのサンプルコード

まず手始めにGoogleAnalyticsで利用できるコードを載せていきたいと思います。

ただ、ネタでしかないようなものも多いので、ただ使えばいいというよりは何かに活用する発想が必要かもしれません。

1. ページ内におけるクリック要素の同要素内の出現順を取得

はい。最初からキワモノコードです笑

ユーザーがクリックした要素と同じ要素のリストから出現順を取得し、返すコードです。
使いみちは、、、イベント計測などでどの要素がクリックされたのかを詳細に計測する場合などに使えるかも、、しれません。
番号で取るくらいならID振れって思いますが。

function () {
  var _c = {{Click Element}};
  var _t = _c.tagName.toLowerCase();
  var _d = document.getELementsByTagName(_t);
  var _a = Array.prototype.slice.call(_d);
  return _a.indexOf(_c);
}

こんな感じです。

解説としては、2行目が GTMの組み込み変数によるClick要素の取得です。
3行目はその要素のタグ名を取っています。（a要素なら 'a'、p要素なら 'p' という具合）
4行目でそのページのDOMから3行目のタグ名を持つ要素を抽出しています。
5行目はHTMLCollectionとして返ってきた_dを配列の機能を借りて配列化しています。
6行目でその配列の中からクリック要素を探し、その添字（0から始まる番号）を取得して関数の返り値にしています。

メリットとしては、GTMはいじれるケド、ソースはいじれないクライアントのサイトをあとからクリック計測したいけど要素が特定できないとき、、、とか？に使えるかもしれません。
やっぱりID追加しろって話ですが笑

2. a要素のリンク先によってイベントラベルを変える

これは結構使えるのではないかと思ってます。
変数を読み込む先を変えれば、特にイベントラベルに限った使い方ではないので色々使えると思います。

function () {
  var _t = '';
  var _e1 = new RegExp('条件1に該当する正規表現');
  var _e2 = new RegExp('条件2に該当する正規表現');
  var _c = {{Click URL}};
  if (_c.search(_e1) !== -1) {
    _t = '条件1に当てはまるときのイベントラベル';
  }
  else if (_c.search(_e2) !== -1) {
    _t = '条件2に当てはまるときのイベントラベル';
  }
  else {
    _t = 'その他のリンク';
  }
  return _t;
}

ざっくり解説ですが、正規表現で条件を設定し、その条件にクリック対象のa要素のhrefが該当する場合、任意の文字列を返す形になります。

もちろん、正規表現の条件とif文の条件を追加すればいくつでも分岐できます。

2´. a要素のリンク先によってイベントラベルを変える（正規表現の表を利用）

Twitterのコメントで、条件分岐に「正規表現の表」を利用するとJavaScriptのコンパイルが発生せず、バージョン作成が軽く済むようになるとご指摘をいただきました。
それを踏まえて、2を「正規表現の表」で行う方法を記載したいと思います。

コメントいただいた ハレノさん（ @hareno_t ）、貴重なご意見ありがとうございました。

まず、変数の「新規」ボタンから新しい変数を追加します。
変数タイプを「正規表現の表」を選択してください。

2のカスタムJavaScriptと対応した項目を埋めたものが下記になります。

「入力変数」には、組み込み変数の{{Click URL}}（ a 要素の href の値が入る）を選択します。
「＋行を追加」ボタンを押して条件セットを追加し、「パターン」に条件に該当する正規表現を入力します。（e.g. ^http\:\/\/.* , ^\/service\/$  etc. ）
「出力」に条件にあてはまったときに渡す値を入力します。
条件にあてはまるものが無かったとき（else に該当）に渡す値を「デフォルト値」に入力します。

これで、2で行ったカスタムJavaScriptと同じ処理になります。
この変数をイベントラベルなどに設定して利用します。

もちろんこの変数をカスタムJavaScriptの中で使うこともできます。
条件分岐処理で正規表現を使う場合は、こちらが楽ですね。

随時更新

とりあえず、一つの記事に最低5件ほどのサンプルが貯まるまでは随時更新したいと思います。

こんなことできない？とか、こここうできるんじゃない？みたいなご意見があればコメントいただければ、反映したいと思います。（ネタがないから他人任せ）

みなさまの良い解析ライフの一助となれば幸いです。

今日は疲れたのでたった2件ですがコレにて公開

※2018.09.12更新：2の正規表現の表で実装したパターンを追加しました。