実践Googleタグマネージャ入門 実践 Googleタグマネージャ入門

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

フォームで「入力ページ」「確認ページ」「完了ページ」のURLがすべて同じでも大丈夫
書籍の5-1<DOM要素>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

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とは

idとは、HTMLタグの属性として設定できるid属性のことを指しています。例えば「<a href="/index.html" id="ToToppageLink">TOPページへ戻る</a>」のようなリンク(aタグ)であれば、「id="~"」の中に記述されている「ToToppageLink」がこのリンクのidになります。id属性は「同一ページ内で同じid名を複数箇所で使ってはいけない(重複させてはいけない)」というHTMLのルールがあります。そのため、「id名を指定する」ということは「特定の要素を指定する」ことと同義となるのです。ちなみに、文法ルール上はNGなのですが、同一ページ内で同じid名が複数箇所に出てきてしまうページがまれにあります。こうした場合は、GoogleタグマネージャはHTML上で先に記述されていた要素が対象となります。

DOM要素って何?

「DOM」という単語にあまりなじみがない人も多いかもしれません。ここで触れているDOMというのは「Document Object Model」の略で、JavaScriptなどで制御できるように調整された「ブラウザが読み込んだそのページの構成要素」を指します。内容としてはHTMLとDOMはほぼ同じものになりますが、例えばJavaScriptなどでページの要素を書き換えた場合、DOMではその結果が反映されています。少しややこしいですが、「ブラウザが現在認識しているページのHTMLの状態」と思ってください。DOMは、論理的には親要素や子要素が組み合わさってツリー状の階層構造になっています。

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

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

●取得したい見出し(h1タグ)のHTML

<h1 id="booktitle">実践 Googleタグマネージャ入門</h1>

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

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

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

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

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

この記事は、Googleタグマネージャの初心者向け入門本となる電子書籍『実践 Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。

実践 Googleタグマネージャ入門
時間を「劇的」に生み出すサイト修正不要のタグ管理術

本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。

2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。

電子書籍『実践 Googleタグマネージャ入門』の中身や購入についてもっと見る
  • 実践 Googleタグマネージャ入門 時間を「劇的」に生み出すサイト修正不要のタグ管理術
  • 品種:電子書籍(リフロー形式/4.39MB)
  • 著者:畑岡大作(アユダンテ株式会社)著
  • 電子基準価格:1,000円+税(販売価格はストアにより異なる場合があります)
  • 発行:インプレス
  • 発売日:2014年11月10日
  • ページ数:160ページ
  • 書籍内容&販売サイト紹介
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

パーマリンク
ページそれぞれを指し示すURLで、時間が経過してもそのURLでそのコンテンツにア ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]