0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

タグマネージャーのトリガー設定方法

Last updated at Posted at 2022-07-03

効果測定でタグマネージャーを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}};
}
}

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?