Googleタグマネージャで親要素のクラス・IDを取得する方法
今回は、「Google タグマネージャでHTML親要素のID・クラスを再帰的に取得するマクロ」を紹介します。
WordPress などの CMS が出力するIDやクラスが定義されていないリンクのクリックを、「Google タグマネージャ＋Google Analytics」でトラッキングする場合に便利と思います。
全部のHTMLタグを自前で出すならこんなトリッキーな技は不要ですが、Wordpress ではプラグインが出力するタグをそのまま使うケースが多いですもんね。
再帰的な処理をするマクロのため、大量に使用するとパフォーマンス上の問題があるかもしれません。
利用の際はご留意ください。
全親要素のクラス名を全て取得するマクロ
Googleタグマネージャの管理画面から、次の内容でマクロを新規作成します。
- マクロ名：「parent element classes recursive」
- マクロタイプ：「カスタムJavaScript」
以下のカスタムJavaScritpソースを登録して「保存」します。
function () {
var e = {{element}}.parentNode;
var c = '';
var d = ' ';
while(e !== document.body) {
c += e.className;
c += d;
e = e.parentNode;
}
return c;
}以上です。
このマクロの出力結果は、「要素の一世代親要素から<body>タグに至るまでの全親要素クラス名を、半角スペースで区切った文字列」になります。
Chrome で動作させた場合、先頭にも半角スペースが入りました。
環境差が心配なら、先頭に半角スペースを追加してもよいかもしれません。
あとは、ルールからこのマクロを参照すれば、要素を包含する全タグのクラスを一括で評価する事ができます。
全親要素のID名を全て取得するマクロ
Googleタグマネージャの管理画面から、次の内容でマクロを新規作成します。
- マクロ名：「parent element ids recursive」
- マクロタイプ：「カスタムJavaScript」
以下のカスタムJavaScritpソースを登録して「保存」します。
function () {
var e = {{element}}.parentNode;
var i = '';
var d = ' ';
while(e !== document.body) {
i += e.id;
i += d;
e = e.parentNode;
}
return i;
}以上です。
動きとしては、先のマクロの「要素ID」版になります。
注意点
複数タグのルールとして適用した場合、Google タグマネージャでは複数回評価されるようなので、どうしても必要な場面でのみ使うようにした方が良いかもしれません。
また、何階層上の親を参照するのかがはっきり分かる場合は、それ専用のマクロを別途用意した方が、よりスマートでしょう。
これまで jQuery + 自前の JavaScript で取得していたクリックイベントを、Googleタグマネージャで取得するよう改修したのですが、そのときの自分用メモです。