タグマネージャー(GTM)の変数である、DOM要素とカスタムJavaScriptについて備忘録的に書き連ねる。
DOM 要素 でもカスタムJavaScriptでも同じようなことが実現できる。まあ、今回はDOMをいじってるのだから、それはそうだな。
変数をどうするか?例えば、タグのイベントラベル設定で取得したデータを取り出すも良し、トリガーで条件設定に使うも良しである。

変数の DOM要素

パターン1

変数 DOM要素

上記のイメージはGTMの変数からDOM要素を選択後に表示される。
これをテキストにする。(以降イメージは略)

変数のタイプ
DOM要素

選択方法
CSSセレクタ

要素セレクタ
a#au_id_1

これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、大したものだ。

<a id="au_id_1">この部分を取得したい</a>

パターン2

変数のタイプ
DOM要素

選択方法
CSSセレクタ

要素セレクタ
h1.hddg-l1

これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、素晴らしい。

<h1 class="hddg-l1">この部分を取得したい</a>

パターン3

変数のタイプ
DOM要素

選択方法
CSSセレクタ

要素セレクタ
div.button_wrap input.submit
属性名
value

これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、やはり素晴らしい。

<div class="button_wrap"> <input class="submit" type="submit" value="この部分を取得したい"> </div>

変数の カスタムJavaScript

パターン5

上記のイメージはGTMの変数からカスタムJavaScriptを選択後に表示される。
これをテキストにする。(以降イメージは略)

function(){
return document.forms[0]._wpcf7.value;
}

これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、素晴らしい。
*formが1ページ上に1つしかないと仮定する。

<form>
<input type="hidden" name="_wpcf7" value=" この部分を取得したい " />
</form>

パターン6

上記のイメージはGTMの変数からカスタムJavaScriptを選択後に表示される。
これをテキストにする。
function(){
return document.forms[0].className;
}
これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、素晴らしい。
*formが1ページ上に1つしかないと仮定する。

<form action="/contact/#wpcf77-f2489-p45-o1" method="post" class=" この部分を取得したい " >

パターン7

上記のイメージはGTMの変数からカスタムJavaScriptを選択後に表示される。
これをテキストにする。
function() {
var title = document.title;
return title;
}
これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、素晴らしい。

<title>この部分を取得したい</title>

番外編 Click Element CSSセレクタに一致

例えば、バナーなどを要素指定したいが、難しい、時間が無い。そんな時はトリガーで「  CSSセレクタに一致する 」を使う。

例:
Click Element  CSSセレクタに一致する .bt_id_ddt2 *
※ bt_id_ddt2 の前にある「.」はクラス指定時。IDなら「#」。
bt_id_ddt2 と * の間に半角スペース。

<div class="bt_id_ddt2">
<a href="https://***.com" target="_blank">
<picture>
<source srcset="bt_id_ddt2.jpg" media="(min-width: 200px)">
<img src="bt_id_ddt2.jpg" alt="***">
</picture>
</a>
</div>