タグマネージャー(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=" この部分を取得したい >