URLが同じでもページの内容を判断してタグを出し分ける「DOM要素変数」でトリガーを作成する（全20回の16）

Webページの表示内容でタグやトリガーを作る

Webページ内に表示されているテキストをGoogleタグマネージャで利用したい場合は、どうすればいいでしょうか？ 例えば以下のように、トリガーの条件にしたい場合やタグの設定の値にしたい場合など、さまざまなケースがあるでしょう。

●Webページの内容を取得するタグやトリガーの例

• URLが変わらないフォームで、ページの大見出し（h1タグ）でどの画面かを判別してトリガーを作りたい
• ログインユーザー名が表示される部分が「ログインしてください」以外のとき、というトリガーを作りたい
• ヘッダーの「カートに入っている商品点数」をGoogleアナリティクスのカスタム指標にセットしたい

これらの場合は、そのときにWebページに表示されているテキストを参照する必要があります。具体的には、それらの参照したい箇所を変数として登録して利用することになります。Googleタグマネージャでこうした変数を利用する際は、以下の2つの方法があります。

●Googleタグマネージャでページ内の要素を参照する方法

• 目的のテキストのタグのid名を用いて「DOM要素」として変数に登録する
• WebページのHTML内から検索するJavaScriptを用意して「カスタムJavaScript」として変数に登録する

特に簡単でおすすめなのは、1つ目の「DOM要素」として登録する手段です。これは取得したいテキストの要素（HTMLタグ）に、idが振られていることが条件ですが、id名を入力するだけで変数として登録することができます。逆に、2つ目の「カスタムJavaScript」として変数登録する手段は、あまりおすすめできません。というのも、Webページの構造を理解した上でHTML内から目的のテキストを探し出すJavaScriptになるので、当然Webページごとに必要なJavaScriptも変わってきて、相応の知識が必要となります。また、WebページのHTML構造が変わった場合に、突然動作しなくなる可能性もあるからです。

その点、DOM要素として登録する方はidさえ振られていれば簡単に利用できます。本書では、こちらの方法でWebページの内容を取得する方法を解説します。idが振られているかどうかは、WebページのHTMLを表示して、取得したいテキストを囲っているHTMLタグを見れば確認できます。もし現状idが振られていない場合は、開発担当の人にお願いしてidを新たに振ってもらいましょう。

「DOM要素」変数を新規登録する

それでは、ページの内容を取得する変数を作成してみましょう。ここでは、以下の見出し（h1タグ）の内容を取得する変数を例に解説します。

●取得したい見出し（h1タグ）のHTML

まずは、「変数」から「新規」をクリックして変数の新規登録画面を表示します。「変数の選択」で「DOM要素」を選択します。「要素ID」で取得したいテキストを含む要素（今回はh1タグ）のid属性の値（今回はbooktitle）を入力します。ちなみに、オプションの「属性名」という入力欄にHTMLの属性（例えばaタグであればリンク先URLを示す「href」属性など）を入力すると、その属性の値を参照することもできます。「変数名」にわかりやすい名前を入力して「変数を作成」をクリックすると、idに「booktitle」と付けられた見出しの書名を取得する変数が完成です。

変数の新規登録画面で「変数の選択」で「DOM要素」を選択し、「要素ID」にid属性の値を入力する。

変数を登録してしまえば、あとはこちらのもの。ここで作成した変数を使えば、「booktitleというidが設定されたh1タグで囲まれた内容が○○を含む場合／含まない場合」といったトリガーを作成できるようになります。

DOM要素変数利用上の注意点としては、変数の処理タイミングが早すぎて目的のテキストを参照できない場合がまれにあることです。変数の処理が行われた時点で参照したい要素がまだブラウザに読み込まれていないと、値が取得できなくなってしまうからです。この変数を利用する際のトリガーに読み込むタイミングの条件（4-7のTips参照）を加えると、この問題を解決できます。以下の画面のように、「トリガーのタイプ」で「DOM Ready」を選択しましょう。

処理タイミングで問題が起こる場合は、「トリガーのタイプ」でプルダウンメニューから「DOM Ready」を選択しよう。