GTMの要素の表示トリガーでボタンクリックやHTML要素をトリガー条件を指定する

WEBサイトやアプリに含まれるタグを素早く更新できるGoogleタグマネージャー（以下、GTM）。設置したタグが作動するためには、作動の条件となるトリガーを設定する必要があります。

そのトリガーのなかに、HTMLの要素の表示タイミングで条件付けできる「要素の表示」というトリガーがあります。使ったことがない方もいるかもしれませんが、この「要素の表示」でしか解決できないトリガーのタイミングやシチュエーションがあるため、いざというときのために、覚えておいて損はありません。

本記事では、GTMの「要素の表示」トリガーについて、使用するシチュエーションや設定方法を解説していきます。

要素の表示トリガーを使うのはこんな時
要素の表示トリガーでページビュー以外のCVも取得可能
- ボタンクリックをトリガーにできない場合
- HTML要素をトリガーにしたい場合
要素の表示のGoogleタグマネージャーの設定方法
まとめ

要素の表示トリガーを使うのはこんな時

「要素の表示」トリガーとは、HTMLの要素（主にボタンや画像など）がWEBブラウザの視認できる範囲に表示されたときに発動するトリガーのことです。ページの読み込み、ページのスクロールなどが要素を表示させるイベントに該当します。

HTMLの要素とは、WEBブラウザが読み込んでいるHTMLファイルのソース上で、タグで囲まれた部分のことです。一般的なHTMLで例えると、<html>～</html>、<head>～</head>、<body>～</body>など、それぞれのタグで囲まれた部分が1つの要素として数えられます。

このHTMLの要素の条件を指定し、その条件に合致したHTMLがWEBブラウザに表示されたときに実行されるのが「要素の表示」トリガーです。

トリガーの条件の指定には、ID（要素を特定するためのユニークな識別子）として指定される値、または、CSSセレクタ（HTMLを装飾するCSSをどのHTML要素に適用するか指定するための条件式）のいずれかを用いることができます。

WEBマーケティングのご相談はこちら

要素の表示トリガーでページビュー以外のCVも取得可能

「要素の表示」トリガーを使用することにより、URLの情報を条件にする場合では難しいタグの配信もおこなえるようになります。具体的には、下記のような場面で役に立ちます。

ボタンクリックをトリガーにできない場合

よくある例として、商品購入やサービス申し込み完了後に表示される「サンクスページ」のURLが変わらない場合でもトリガーを実行したいとき、「要素の表示」トリガーが活用できます。

例えば、「ECサイトで【カートに追加】ボタンを押して商品をカートに追加すると、【カートに追加しました】というメッセージが表示される」場合を事例に考えてみましょう。

このような場合は、ボタンクリックをトリガーにもできますが、ボタンクリック後にサーバー側で長いロードが発生し、商品をカートに入れる前に離脱してしまうケースもあり得ます。そうなった場合、ボタンクリックでトリガーを取得すると、実際にカートに入れた件数とクリックの回数とで差分が出てしまうことが予想されるため、他の要素をトリガーとするほうがベターです。

そこで活用したいのが、「要素の表示」トリガー。カートに商品を追加した直後のサンクスページに表示されるHTML要素のIDやCSSセレクタをトリガーとすることで、商品がカートに入れられた時点でのトリガーを実行させることができるわけです。