目次
Googleタグマネージャーでタグを配信する場合、最も基本的で簡単な方法は、ページのURLを条件に指定する方法です。特定のURLやそのパターンを条件として設定し、その条件に一致する場合にタグを配信します。この方法は、サイト内の各ページが異なるURLを持っている場合に有効です。
しかし、異なるページであってもURLがまったく同じ場合、この方法では正確にタグを配信することができません。例えば、URLが同じながらも内容が異なる動的ページや、URLに変化がないシステムを利用している場合がこれに該当します。
このような状況では、URLではなくページ内のテキスト情報を条件にタグを配信する方法が有効です。本記事では、異なるページが同じURLを持つ場合でも適切にタグを配信するための、ページ内テキストを活用した設定方法を解説します。
テキストは異なるページが同じURLだった場合におすすめ
例えば、入力ページ・確認ページ・完了ページがすべて同じURLで生成されるお申し込みフォームがあるとします。
この時に、仮に完了ページのURLを指定したトリガーで広告のコンバージョンタグを設置しようとすると、フォーム内のすべてのページが同一のURLであるため、設置したタグはすべてのページで発火してしまうことになり、正しい計測を行うことが出来ません。
このようにURLを指定して特定のページでタグを発火させることができない場合は、同じURL同士のページの中で指定したいページのみが持つ何かしらユニークな要素を特定して、トリガーに使用する必要があります。
今回の例のようにお申し込みフォームでは、「お申し込みありがとうございます」のように、完了ページにのみ表示されるテキストを使用することでページを指定して、タグを発火させることができる場合があります。
その他にも、注文番号や特定の商品名や画像など、そのページでのみ指定することが可能な要素が存在する場合は、その部分を示す要素をページのHTML内で指定し、トリガーを作成しタグを発火させることが出来ます。
テキスト(DOM要素)を使ったトリガーの作成方法
それでは、早速テキストを使用するトリガーの作成方法を見ていきましょう。
ページからテキスト部分の要素を特定する
まずは、タグを発火させたい対象のページを開きます。次に、ページ内で右クリックして、一番下に表示される「検証」をクリックします（Google Chromeの場合）。
Microsoft Edgeであれば「開発者ツールで調査する」をクリックしましょう。
クリックすると、画面の右側に検証用のウィンドウが開きます。 ウィンドウが開いたら、左上にあるアイコンをクリックします。
アイコンをクリックした後に、ページ内で画像やテキストにマウスポインターを合わせると、その動きに合わせてウィンドウ内の表示がそれぞれ動いていることが確認できます。これは、マウスポインターが示している箇所に該当するHTML内の記述部分が表示されていることを表します。
ウィンドウ内の表示が変更されることが確認できれば、実際にトリガーに使用する予定のテキスト箇所へマウスポインターを合わせます。そして、該当のテキスト部分に合わせた状態でクリックします。
ウィンドウ内でクリックした箇所に該当する部分がハイライトされます。これで、トリガーに使用する部分のHTML内の要素部分を特定することが出来たことになります。
GoogleタグマネージャーでDOM要素変数を設定する
ページ内のテキストをトリガーとして使用するためには、GTMの変数としてあらかじめ登録しておく必要があります。そのためには、GTMの「ユーザー定義変数」の１つである「DOM要素変数」を利用します。
まずは、GTMの変数メニューを開き、ユーザー定義変数の「新規」をクリックします。
変数の選択メニューのページ要素から「DOM 要素」を選択してクリックします。
「DOM 要素」変数の設定には、IDとCSSセレクタの２通りの設定方法があります。ページ内で利用するテキストが設定されているHTML箇所に、ID要素があればIDを使用して設定する方法を選択します。しかし、ID要素が設定されていない場合は、もう一方のCSSセレクタを使用して設定することになります。
IDとCSSセレクタの場合では、それぞれの要素を取得する方法に違いがありますので、ここでは別々に説明します。
IDを使用してDOM要素変数を設定する
前の手順で確認したHTMLの該当箇所に＜id要素＞が設定されていた場合は、そのidの値を使用します。
例えば、入力フォームの入力ページと入力エラーページが同じURLで表示され、入力ページのみで発火させたいとした際、表示されたエラーメッセージを取得してそれぞれのページを区別しようとしたとします。
この例では、エラーメッセージの箇所にid要素の記述を確認することが出来ます。
id="flashMessage"DOM要素変数のIDを使用する場合は、このidの右側の値「flashMessage」を使用して設定を行います。
id要素の値は、各ページに１つのみ設定することのできるユニークな値になります。したがって、上記のような設定をすることで、「そのページ内で id の値が flashMessage に設定されている箇所」を指定する変数の設定となります。この設定を行うことで、その指定箇所に記述されているテキストをGTM内の変数として扱うことができ、トリガーに利用することができるようになります。
CSSセレクタを使用してDOM要素変数を設定する
一方、指定したテキスト箇所にid要素が設定されていない場合は、CSSセレクタを使用することになります。
上記の例では、エラーメッセージ箇所にid要素はなく、class要素のみが設定されています。class要素は、同じページ内で何度も使用することができるため、id要素のように特定の箇所を指定することができません（実際、この例でも直前に同じ class=”warning” の設定があるため、このエラーメッセージを特定することは出来ません）。
このような場合は、ブラウザの検証モードの機能を利用して、そのテキスト箇所を指定するCSSセレクターの値を取得します。
まず、検証ウィンドウ内の取得したいテキスト箇所で右クリックします。表示メニューから「copy > copy selector」の順にクリックすると、該当箇所のCSSセレクタの値を取得することが出来ます。
コピーによって取得されたCSSセレクタの値は下記のような値になります。この値を利用して、DOM要素変数の設定を行います。
#inputArea > fieldset:nth-child(1) > div:nth-child(2) > dl > dd > div > span > span設定の方法は、ID要素を選択するやり方と変わりません。コピーによって取得できたCSSセレクタの値をそのまま「要素セレクタ」の入力欄に貼り付ければOKです。
これにより、該当箇所のテキストをGTM内の変数として使用することが可能になります。
DOM要素変数を使用してトリガーを作成する
変数の設定が終わりましたら、次にトリガーを作成します。
今回は、「ページビュー – DOM Ready」のトリガーを作成します。
「一部のDOM Ready イベント」を選択し、今回作成したDOM要素変数を使用して、指定するテキストの文面を入力することでトリガーを作成することが出来ます。
条件一致には「含む・完全一致・正規表現に一致」など複数の選択肢が用意されていますが、指定したテキストを条件づけできるのであれば、どの条件を選択しても構いません。
ページURL指定条件の設定は必須項目ではありませんが、使用しているGTMタグがテスト環境や他のサイトで同一条件の別ページが絶対にないとも限らないため、不要なタグの発火を防ぐ為にも、念の為に設定しておくとよいでしょう。
以上で、ページ内のテキストを使用したトリガーの作成が完了となります。
DOM要素変数を設定する場合の注意点
DOM要素変数を設定・使用する絶対の条件として、指定箇所のページ内の要素が変更されないことが挙げられます。設定に使用したID・CSSセレクタの値が、ページのリニューアルや改修によって変更されて別の値になってしまった場合、指定条件が変わってしまうためGTM内の変数として使用することができなくなります。
そのため、DOM要素変数を使用する場合は、サイトの運用担当者や制作担当者など、関係者には安易に変更しない旨を説明しておきましょう。また、指定箇所が変更される場合は、事前にどのような変更になるのか、GTMの担当者に連絡が入るようにルール作りをしておきましょう。
まとめ
ページ内のテキストを利用したトリガー設定は、そうそう頻繁に遭遇する設定ではありませんが、覚えておくと非常に便利な機能です。この機会にぜひ覚えておくとよいでしょう。
普段、UDL指定のページビュートリガーや、クリックURL指定でのクリックトリガーしか作成したことのない方には、ちょっとばかり難しい設定方法にはなります。しかし、GTMのタグ・トリガー・変数、ページ内のHTML要素と、横断的に様々な機能を使用して設定しますので、それぞれがどのように作用してタグを動かしているのか、GTMの根本的な仕様を把握するという意味で、GTM初級者には良い教材となる設定と言えるでしょう。
株式会社SublimeJPでは、Googleタグマネージャーの導入・設定・運用支援を行っております。もし、Googleタグマネージャーについて何かお困りのことやご不明な点がございましたら、お気軽にお問い合わせください。