クリックトリガーで親要素のaタグのリンクURLを取得する方法

リンククリックトリガーとクリックトリガーの違い

リンククリックトリガーとクリックトリガーはよく似たトリガーですが、動作は明確に異なります。

リンククリックトリガー

リンク（aタグ）がクリックされた時のみ反応する

自動イベント変数（Click URL変数など）はクリックされたリンク（aタグ）の情報を取得する

クリックトリガー

何がクリックされても反応する

自動イベント変数（Click URL変数など）はクリックされた最も子要素の情報を取得する

通常、リンクのクリック計測などを行うときはリンククリックトリガーを使います。
しかしonclickなどでJS処理を行っている一部のリンクではリンククリックトリガーが反応しないことがあり、そういった場合はクリックトリガーで代替する必要があります。

リンククリックトリガーをクリックトリガーで代替する場合の問題点

ですがリンククリックトリガーとクリックトリガーでは自動イベント変数で取得される情報には違いがあるため、マークアップによっては問題が起こりえます。
例えばリンクの計測をクリックトリガーで代替する場合、問題になるのは以下のようなケースです。

クリックトリガーで代替したときにaタグの情報を取得できないマークアップ例1

<a href="###"><span>リンクテキスト</span></a>

前述のとおりクリックトリガー時の自動イベント変数は「クリックされた最も子要素」の情報を取得するため、上記のようなマークアップの場合HTML構造的にはa > spanとなるので、自動イベント変数で取得されるのはspanタグの情報になってしまいます。

また、下記のようなマークアップの場合も違う意味で問題が出ます。

クリックトリガーで代替したときにaタグの情報を取得できないマークアップ例2

<a href="###">aタグ直下のテキスト<span>aタグの子要素のspanタグのテキスト</span></a>

このケースは前述の例1よりもある意味で厄介です。
というのも、aタグ直下のテキストをクリックした場合はaタグの情報が自動イベント変数で拾えますが、spanタグで囲われた箇所をクリックした場合は自動イベント変数はaタグではなくspanタグの情報になってしまいます。
つまり、同じリンクであってもクリックされる場所によって自動イベント変数の値が変わってきてしまうのです。

クリックトリガーでリンクURLを取得する方法

さて、それでは本題です。
aタグまたはaタグの子要素がクリックされた場合に、クリックトリガーでもリンククリックトリガーのようにリンク（aタグ）の情報を取得したい場合は、以下のようなカスタムJS変数を登録することで対応可能です。

1. 「組み込み変数」で「Click Element」変数と「Click URL」変数を有効化する

   

2. 以下のJSを「カスタムJS変数」として登録する

   function(){
   	// ---- 初期設定
   	var _gtm_element = {
   		parent: 10,				// 何階層遡って探すか、の定義値
   		element: null,
   		element_temp: null
   	};
   
   	// ---- 現在地から親要素へさかのぼってaタグを確認
   	if({{Click Element}}.tagName == 'A'){
   		// -- 現在地がaタグだったら
   		_gtm_element.element = {{Click Element}};
   	}else{
   		_gtm_element.element_temp = {{Click Element}};
   		// -- 定義した階層分遡って該当要素を検索
   		for(var i = 0; i < _gtm_element.parent; i++){
   			_gtm_element.element_temp = _gtm_element.element_temp.parentNode;
   			if(_gtm_element.element_temp != undefined && _gtm_element.element_temp.tagName == 'A'){
   				// -- 上位階層が存在し、かつ、上位階層がaタグだったら
   				_gtm_element.element = _gtm_element.element_temp;
   				break;
   			}
   		}
   	}
   
   	// ---- 最終判定
   	if(_gtm_element.element != null){
   		// -- 該当の要素が見つかった場合、該当要素のURL要素を返す
   		return _gtm_element.element.href || _gtm_element.element.currentSrc || _gtm_element.element.src || null;
   	}else{
   		// -- aタグ要素が見つからなかった場合、諦めてClick URLを返す
   		return {{Click URL}};
   	}
   }

最後のカスタムJS変数で行っていることは割と単純で

• クリックされた要素のタグを見て（10行目）、aタグでなければaタグが見つかるまで親階層へ遡ってaタグを探し出す（16-23行目）
• aタグを見つけられたらaタグのURL情報（href属性 > src属性の順で優先）を返す（29行目）
• aタグを見つけられなかったら諦めてクリックされた最も子要素のURL情報（＝Click URL変数）を返す（32行目）

という処理を行っています。
これにより、aタグであろうがa > spanタグであろうが、クリックトリガーでも一律でリンクURLを取得する変数ができあがります。