効果測定でタグマネージャーをwebページに埋め込むことはよくあると思います。
今回、cv率の計測に関して、「aタグ」のhref属性でクリックイベントを発火させたかったのです。
しかし、🔽のような構造のボタンの時、クリック要素としてspanを取得してしまい、hrefで判定できないという事象がおきました。
<a href="#">
<span>button</span>
</a>
解決法
aタグが見つかるまで、クリック要素の親タグを辿っていってもらうことで解決できました!
🔽の記事の通りにすれば良いです。
https://ayudante.jp/column/2018-09-27/11-19/
カスタム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}};
}
}