GTMのDOM要素変数の使い方｜ページに表示されたテキストでトリガーを実行可能に

Googleタグマネージャー（以下GTM）には「DOM要素」という変数があります。

DOM要素のDOMは Document Object Model の頭文字を取った物で、正式名称ではありませんが、一般的には「ドム」と呼ばれています。

DOMはHTMLやXMLといったドキュメントをプログラムから操作できるようになる仕組みです。この仕組みを使うことによって、ページに出力されているテキストを取得できるようになります。

GTMではこのDOMで取得できる要素をDOM要素変数に取り込め、しかもDOM要素変数の内容に応じたトリガー設定もできるようになっています。

つまり、トリガー設定の際にHTMLドキュメントに含まれたテキストによってトリガーを実行するかしないかを選べるのです。

ここまで読んできてもしかしたら「いつ使うんだろう？」と思うかもしれませんが、この変数を使うことでしか解決できないシチュエーションがあり、ぜひ覚えておきたい機能の一つです。

今回はGTMのDOM要素変数について、活用できる場面と実際に実装する方法を解説していきます。

HTMLが動的に出力される場合に活用ができる

たとえば複数の商品を扱っているECサイトで、広告を配信しているのは特定商品のみだが、サンクスページは全商品共通の場合があったとします。

このとき、サンクスページのURLなどをトリガーとすると他の商品が購入された場合でも購入コンバージョンが計測されてしまい、正確な広告の成果が分かりづらくなってしまいます。

その場合に、商品名が画面に表示されている、もしくはHTML上に出力されていれば、特定の商品名が記載された場合のみにトリガーを実行することでその商品が購入された場合のみ計測できます。

他にも直前の処理の成否によってサンクスページの内容が変わる場合で、一部の結果のときのみトリガーを実行したい場合にも活用できます。

このように、トリガーを実行したいページのHTMLが動的に出力される場合に活用機会がある変数です。

実装方法

それでは実装する方法を解説します。HTML要素の取得などがあり、少しとっつきにくく感じてしまうかもしれませんが、手順自体は簡単です。丁寧に解説していきます。

要素の取得

GTM設定の解説の前に、HTML要素を取得する方法を解説します。

※Google Chromeでの手順を解説しますが、基本的にどのブラウザも同様の手順で行えます

まず、計測をしたい要素があるページを開き、対象の要素上で右クリック→「検証」を押下します。

対象のボタンの要素がハイライトされたソースが開くので「id」が設定されているか確認します。

ここで「id」があればIDでの設定方法、なければ後述のCSSセレクタでの設定方法を参照してください。

変数の設定

次にGTMでDOM要素変数を作成します。

GTMを開き、「変数」から「ユーザー定義変数」の「新規」を選択します。

変数タイプで「DOM要素」を選択します。

ここからはIDとCSSセレクタで設定する方法をそれぞれ解説していきます。

先程取得した要素の中にIDがあればIDを、なければCSSセレクタで設定する方法を参照してください。

IDを指定する

HTMLのID要素を指定して変数を設定する方法です。

もし要素にID要素がない場合、次のCSSセレクタを使う方法を使いましょう。

今回は例として下記の「この部分を取得する」の部分を取得する方法を紹介します。

<a id="hogehoge">この部分を取得する</a>

「選択方法」で「ID」を選択し、「要素ID」に id=”hogehoge”のhogehogeの部分を記入します。

最後に任意の名前をつけて「保存」をクリックして完了です。この変数の名前は後ほどトリガー設定で使用しますのでわかりやすい名前にしておきましょう。

これで下記のようなHTMLタグの「この部分を取得する」の部分が変数として取得できるようになります。

<a id="hogehoge">この部分を取得する</a>

CSSセレクタを指定する

続いてCSSセレクタを指定して取得する方法です。要素にIDがあればIDでの方法がおすすめですが、CSSセレクタでは様々な要素に柔軟に対応できます。

CSSセレクタは下記の方法で取得します。

トリガーを実行したい要素を開き、右クリックして「Copy」→「Copy selector」を選択します。

すると下記のようなCSSセレクタがクリップボードにコピーされます。

GTMの画面に戻り、「選択方法」で「CSSセレクタ」を選択し、「要素セレクタ」に 先程取得したCSSセレクタを貼り付けます。

最後に任意の名前をつけて「保存」をクリックして完了です。

この変数の名前は後ほどトリガー設定で使用しますのでわかりやすい名前にしておきましょう。

Tips：画面に表示されていないHTML要素でも取得可能

上記の方法は、基本的にHTML要素として画面に表示されているテキストを取得する方法ですが、HTMLの属性でも取得できます。

<a id="hogehoge" value=”ここを取得する”>表示されるテキスト</a>

たとえば上記のようにHTMLの属性「value」の「ここを取得する」の内容を取得したい場合を考えます。

設定方法はこれまでの方法で選択方法を設定したあと、「属性名」の欄にHTMLで指定されている属性名（ここではvalue）を設定するだけです。

これで、「ここを取得する」というテキストが取得できます。

この場合表示されているテキストは取得できなくなってしまうため、状況に応じて使い分けましょう。

トリガーの設定

続いてトリガーの設定を行います。

「トリガー」から「新規」を選択します。

トリガーのタイプは「DOM Ready」を選択します。

「このトリガーの発生場所」を「一部のDOM Readyイベント」に設定し、条件の欄を先程作成した変数とトリガーを実行したいテキストに設定します。

条件は「含む」「一致」などだけでなく、正規表現で設定もできるため、トリガーの条件をしっかり確認して設定しましょう。

最後にトリガー名を設定して「保存」を押して完了です。

注意：HTMLの属性やテキストが変わるとトリガーが実行されない

注意点として、当然ですがHTMLの属性（ID・CSSセレクタ）が変更されたり、トリガー条件としているテキストが変更されてしまうと、変数が取得できなくなり、トリガーが実行されなくなってしまいます。

ページデザインの変更などによってHTMLの構造や命名ルール、テキストなどに変更が発生した際は変数やトリガーの条件とずれがないかしっかり確認しましょう。

おわりに

DOM要素変数はHTMLの要素、つまり表示されているテキストを取得できる便利な変数です。

使う機会こそあまりないかもしれませんが、ここぞというときに役に立つのでこの機会に覚えておきましょう。