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を新たに振ってもらいましょう。
idとは、HTMLタグの属性として設定できるid属性のことを指しています。例えば「TOPページへ戻る」のようなリンク（aタグ）であれば、「id="～"」の中に記述されている「ToToppageLink」がこのリンクのidになります。id属性は「同一ページ内で同じid名を複数箇所で使ってはいけない（重複させてはいけない）」というHTMLのルールがあります。そのため、「id名を指定する」ということは「特定の要素を指定する」ことと同義となるのです。ちなみに、文法ルール上はNGなのですが、同一ページ内で同じid名が複数箇所に出てきてしまうページがまれにあります。こうした場合は、GoogleタグマネージャはHTML上で先に記述されていた要素が対象となります。
「DOM」という単語にあまりなじみがない人も多いかもしれません。ここで触れているDOMというのは「Document Object Model」の略で、JavaScriptなどで制御できるように調整された「ブラウザが読み込んだそのページの構成要素」を指します。内容としてはHTMLとDOMはほぼ同じものになりますが、例えばJavaScriptなどでページの要素を書き換えた場合、DOMではその結果が反映されています。少しややこしいですが、「ブラウザが現在認識しているページのHTMLの状態」と思ってください。DOMは、論理的には親要素や子要素が組み合わさってツリー状の階層構造になっています。
「DOM要素」変数を新規登録する
それでは、ページの内容を取得する変数を作成してみましょう。ここでは、以下の見出し（h1タグ）の内容を取得する変数を例に解説します。
●取得したい見出し（h1タグ）のHTML
id="booktitle">実践 Googleタグマネージャ入門
まずは、「変数」から「新規」をクリックして変数の新規登録画面を表示します。「変数の選択」で「DOM要素」を選択します。「要素ID」で取得したいテキストを含む要素（今回はh1タグ）のid属性の値（今回はbooktitle）を入力します。ちなみに、オプションの「属性名」という入力欄にHTMLの属性（例えばaタグであればリンク先URLを示す「href」属性など）を入力すると、その属性の値を参照することもできます。「変数名」にわかりやすい名前を入力して「変数を作成」をクリックすると、idに「booktitle」と付けられた見出しの書名を取得する変数が完成です。
変数を登録してしまえば、あとはこちらのもの。ここで作成した変数を使えば、「booktitleというidが設定されたh1タグで囲まれた内容が○○を含む場合／含まない場合」といったトリガーを作成できるようになります。
DOM要素変数利用上の注意点としては、変数の処理タイミングが早すぎて目的のテキストを参照できない場合がまれにあることです。変数の処理が行われた時点で参照したい要素がまだブラウザに読み込まれていないと、値が取得できなくなってしまうからです。この変数を利用する際のトリガーに読み込むタイミングの条件（4-7のTips参照）を加えると、この問題を解決できます。以下の画面のように、「トリガーのタイプ」で「DOM Ready」を選択しましょう。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：URLが同じでもページの内容を判断してタグを出し分ける「DOM要素変数」でトリガーを作成する（全20回の16） | 実践 Googleタグマネージャ入門 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
畑岡大作（はたおかだいさく）
アユダンテ株式会社、マークアップエンジニア。モバイルサイトの運営アシスタントからパソコン向けWebサイトの運営・制作までを経て、2008年よりアユダンテ株式会社に入社。現在はHTML+CSSのマークアップエンジニアとして、SEOコンサルティングの一環であるHTMLテンプレート作成、および自社サイトの運営から制作まで携わるほか、Googleタグマネージャの導入支援や設定サポートなどにかかわる。