ページ内の任意のdiv内でリンクがクリックがされたときにそのdiv内の指定の要素内の文字列をGoogleタグマネージャーで取得したい。

Question

###前提・実現したいこと
複数の同じようなdiv構造を持つページ内で、該当div内のリンクをクリックした際に、その要素内の特定のテキストをGoogleタグマネージャーで取得したいと思っています。
Googleタグマネージャーの設定は色々試しましたが、恐らくカスタムjavascriptでの実装が必要かと思っています。
当方はjavascriptに関しては、これを実現するために勉強を始めたばっかりのレベルで、どのように実装すればよいのか検討がついておりません。

###該当のHTML

<div id="wrapper">
～
<div class="ranking">
	<div class="rank_top">1</div>
		<div>
			<div class="name">
				<a href="https://example.com" target="_blank" id="top_1"><img src="/images/1.png" alt="あああ"></a><a href="https://example.com" target="_blank" ><span>あああ</span></a>
			</div>
			<div class="plan">
				<span>料金</span><span>￥0～</span>
			</div>
		</div>
		<div class="introduction">
			あああ
		</div>
		<div class="details">
			いいい
		</div>
		<div class="linkButton">
			<a href="https://example.com" target="_blank" class="effectButton" id="bottom_1">詳細を見る</a>
		</div>
	</div>
</div>
～
</div>

このような構造をしているdiv内で、いずれかのリンクをクリックした際に<div class="rank_top">1</div>の値（この場合は「1」）を取得したいです。

###試したこと
GTMのトリガー（すべての要素）でclass名を指定して取得できないかを試したのですが、親要素を取得することはできないようでした。

無知で非常に申し訳ないのですが、どうかよろしくお願いいたします。

Comments

[退会済みユーザー]

<div class="rank_top">はaタグの親要素ではありませんが、構造自体はあってるのでしょうか？

Answer 1

もし、サイト内にjQueryが入っているのであれば、カスタムJavaScript変数を作成し、

function() {
  return $({{Click Element}}).closest('.ranking').find('rank_top').text();
}

とすることで、この変数で取得できると思います。ただし、HTMLの全体構造によって変わるかと思いますので、適宜自身のサイトに合わせて変更が必要です。また、クリック要素のGTM変数名もClick Elementではないのであれば、変更が必要です。