タグマネージャー（GTM）の変数である、DOM要素とカスタムJavaScriptについて備忘録的に書き連ねる。
DOM 要素 でもカスタムJavaScriptでも同じようなことが実現できる。まあ、今回はDOMをいじってるのだから、それはそうだな。
変数をどうするか？例えば、タグのイベントラベル設定で取得したデータを取り出すも良し、トリガーで条件設定に使うも良しである。
変数の DOM要素
パターン１
上記のイメージはGTMの変数からDOM要素を選択後に表示される。
これをテキストにする。（以降イメージは略）
変数のタイプ
DOM要素
選択方法
CSSセレクタ
要素セレクタ
a#au_id_1
これでウェブページのタグに設定された「 この部分を取得したい 」が実際取得できるようになるんだから、大したものだ。
<a id="au_id_1">この部分を取得したい</a>
パターン２
変数のタイプ
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=" この部分を取得したい " >
パターン７
上記のイメージは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>
