アクセス解析担当者がGTMについて語るブログ

GTM(Google Tag Manager)・GA(Google Analytics)の中~上級者向け情報を中心に発信

トリガーにおけるCSSセレクタの使い方

そもそもCSSセレクタとは

CSSを発祥とする、ページ内のDOM要素を選択するための記述方法をCSSセレクタと言います。JavascriptによってDOMを取得、操作する際にも用いられることがあります。

GTMではトリガーの発火条件にCSSセレクタを使うことができます。

記述方法: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

Chromeの開発者ツールでは、Elementsタブで特定の要素を選択し、右クリックからCopy > "Copy Selector"を選択することでその要素のCSSセレクタを取得することができます。

「クリック」系トリガー、「フォームの送信」トリガーの場合

クリック系トリガー(「すべての要素」と「リンクのみ」トリガー)では、クリックした要素が該当のCSSセレクタに一致する場合のみ発火するトリガーを作成することができます。

クリックした要素が組み込み変数「Click Element」に設定されるので、トリガーの条件として「Click Element」「CSSセレクタに一致」「(対象とするCSSセレクタ)」という条件を設定します。

f:id:t_hareno:20200429152025p:plain

CSSセレクタを用いた設定例

「フォームの送信トリガー」についても同様に、対象のフォームがForm Elementに設定されるため、CSSセレクタに一致条件を使用して設定できます。

「リンクのみ」と「フォームの送信」トリガーにおいて、「タグの配信を待つ」及び「妥当性をチェック」オプションにチェックを入れるとトリガーを配信する条件を設定することができますが、これはクリックが発生する前のページ読み込み時の状態を基にして判定されるため、ここではClick ElementやForm Element変数を用いた条件は設定できません。

「すべての要素」トリガーにおいて、Click Elementに設定される要素はクリックされた要素そのものであるため、意図せずIMG要素等が設定される場合があります。指定したCSSセレクタが子要素にも反応するように設定してください。

関連: https://hareno.hateblo.jp/entry/2018/12/gtm-link-click-trigger-does-not-fire

「要素の表示」トリガーの場合

管理画面上部のプルダウンで「CSSセレクタ」を選ぶことで選択可能になります。該当要素が複数ある場合の起動タイミングはラジオボタンで選択可能です。要素の視認割合については選択される一要素全体の割合になるため、適度な大きさのものを選択するようにしましょう。

なお、IDで指定する場合はCSSセレクタのように「#」をつけずに指定する必要があります。