タグマネージャー（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>
