2
-
6
Google Tag Manager（以下GTM）のトリガーには「要素の表示」というトリガーがあります。HTMLの要素の表示タイミングで実行することができるトリガーです。
もしかしたら今まで使ったことがないかもしれませんが、「要素の表示」トリガーでしか解決できないトリガーのタイミングやシチュエーションがあるので、覚えておくと使える場面があるかもしれません。
今回はGTMの「要素の表示」トリガーについて、活用できる場面や実装方法を解説していきます。
目次
「要素の表示」トリガーとは
GTMの「要素の表示」トリガーとは、HTMLの要素がブラウザに表示されたときに実行されるトリガーです。
HTMLの要素とは、ウェブブラウザが読み込んでいるファイルであるHTMLファイルのソース上において、タグで囲まれた部分のことを指します。
<html>
<head id=”hogehoge”>
</head>
<body>
</body>
</html>たとえば上記のようなHTMLの場合、<html>タグに囲まれた部分、<head>タグに囲まれた部分、<body>タグに囲まれた部分それぞれがHTMLの要素です。
「要素の表示」トリガーはこのHTMLの要素の条件を指定して、その条件に合致したHTMLがウェブブラウザに表示されたとき実行されるトリガーです。
トリガーの条件の指定には上記の「id=”hogehoge”」の部分で示されているIDに指定されている値または、CSSセレクタ（※）の2つを用いることができます。
※CSSセレクタ…HTMLを装飾するCSSを、どのHTML要素に適用するか指定するのに用いられる条件式。
活用できる場面
「要素の表示」トリガーは下記のような場面で使うことができます。
サンクスページのURLが変わらず、ボタンクリックをトリガーにできない場合
よくあるパターンが、サンクスページのURLが変わらない場合にトリガーを実行したい場合です。
たとえばECサイトで「カートに追加」ボタンを押して商品をカートに商品を追加したときに「カートに追加しました」と表示される場合を考えます。
ボタンクリックをトリガーとすることもできますが、ボタンクリック後にサーバー側で長いロードが発生してしまい、カートに入れるまでに離脱されてしまうケースも発生し、ボタンクリックでトリガーを取得すると、実際にカートを入れた件数との差分がでることが予想される場合があります。
そんな場合に、カートに商品を追加した直後のページに表示されるHTML要素のIDやCSSセレクタをトリガーとすることで、商品がカートに入れられた時点でのトリガー実行を実現することができます。
なお、HTML要素はページのソースが変わるとトリガーが実行されなくなってしまうこともあります。ページ改修などの際には意図した要素が指定されているか確認しましょう。
複数ページで同様のHTML要素をトリガーとしたい場合
たとえば、モーダルなどを使った1つのフォームを複数のページから呼び出すようなサイトがあり、このフォームの表示をマイクロコンバージョンとしてトリガーとしたいとします。
この場合、複数ページにまたがるのでURLでのトリガー設定は難しくなりますが、HTML要素の表示をトリガーとすることでフォームが表示された場合に複数ページに対して1つのトリガーでタグを実行することができます。
実装方法
それでは実際に実装する方法を解説します。
要素の取得
トリガー設定の解説の前に、HTML要素を取得する方法を解説します。
※Google Chromeでの手順を解説しますが、基本的にどのブラウザも同様の手順で行えます。
まず、計測をしたい要素があるページを開き、対象の要素上で右クリック→「検証」を押下します。
対象のボタンの要素がハイライトされたソースが開くので「id」が設定されているか確認します。
ここで「id」があればIDでの設定方法、なければCSSセレクタでの設定方法を参照してください。
トリガーの設定
次にトリガーの設定です。
左メニューから「トリガー」を選択し、「新規」をクリックします。
トリガーの設定を選択します。
トリガータイプは「ユーザーエンゲージメント」から「要素の表示」を選択します。
ここからはIDとCSSセレクタで設定する方法をそれぞれ解説していきます。
先程取得した要素の中にIDがあればIDを、なければCSSセレクタで設定する方法を参照してください。
IDを指定する
HTMLのID要素を指定してトリガーを実行する方法です。
もしトリガーを実行したい要素にID要素がない場合、次のCSSセレクタを使う方法を使いましょう。
「選択方法」で「ID」を選択し、「要素ID」に id=”hogehoge”のhogehogeの部分を記入します。
「このトリガーを起動するタイミング」は特別な事情がない限り「1ページに1度」にしておきましょう。
最後に「保存」をクリックして完了です。
CSSセレクタを指定する
続いてCSSセレクタを指定してトリガーを実行する方法です。
CSSセレクタは下記の方法で取得します。
トリガーを実行したい要素を開き、右クリックして「Copy」→「Copy selector」を選択します。
すると下記のようなCSSセレクタがクリップボードにコピーされます。
GTMの画面に戻り、「選択方法」で「CSSセレクタ」を選択し、「要素セレクタ」に 先程取得したCSSセレクタを貼り付けます。
「このトリガーを起動するタイミング」は特別な事情がない限り「1ページに1度」にしておきましょう。
最後に「保存」をクリックして完了です。
注意：要素が複数ページにある場合は、全てのページで実行される
注意点として、IDやCSSセレクタの要素が複数ページにある場合は、全てのページで実行されるという点があります。
たとえば、サンクスページでトリガーを実行することを意図したのに設定したIDやCSSセレクタの要素がトップページにも存在する場合、トップページで意図しないトリガーが実行されてしまいます。
どのページでもトリガーが実行されるのは複数ページでの要素の表示を計測することができるためメリットにもなりますが、意図しないタイミングでの実行にもつながるため注意が必要です。
この事態を避けるためには、サイト管理者にサイト全体で一意のIDやCSSセレクタを設定してもらうか、下記の設定で意図するページのURLを設定しましょう。
トリガーの設定画面で、「一部の表示イベント」を選択し、「Page URL」や「Page Path」の条件を入力し完了です。
まとめ
「要素の表示」トリガーは使う機会こそ少ないですが、このトリガーでしか解決できないタイミングにトリガーを実行することができる優秀なトリガーです。
ぜひこの機会に覚えておいてください。
- 2
-
- 6
Hisanori Miyake
SIerでシステムエンジニアとして企業向けWebシステムやアプリの開発に携わったのち、2019年1月よりアナグラムに参画。広告運用だけでなく、ブログの執筆・編集、社内のシステム関連業務も担当。
