トリガーにおける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セレクタ）」という条件を設定します。

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セレクタのように「#」をつけずに指定する必要があります。

秘密のパラメータとCookieでリモートワーク時でも関係者データを除外する

関係者なのに社外からのアクセスがトラッキングデータに入ってしまう

Googleアナリティクス等のアクセス解析ツールに搭載されている「IPアドレスによる関係者データの除外」機能では、不特定のIPアドレスからのアクセス時にそのデータを除外することができません。

その対策として、特定のパラメータを持ってサイトにアクセスしたユーザーに対して特定のCookieを付与し、さらにCookieが付与されたユーザーに対してはアクセス解析用のタグを発行しないようにGTMで制御することで、データベースから情報を除外することができます。

Google アナリティクスの場合はカスタムディメンションにパラメータからの値を設定し、特定のデータを持ったユーザーのデータを除外することもできます。

もちろんパラメータではなく秘密のページを作成してもよいのですが、エンジニアの稼働が必要だったり、そもそもサーバーにアップロードするためにVPN繋がなければ等の制限があったりするため手間がかかりがちです。

GTMでの設定方法

変数は２つです。ユーザー定義変数の「クエリ」でクエリからパラメータの値を取得する変数を作成します。また、「ファースト パーティCookie」にてCookieに設定した値を取得する変数を作成します。

ファースト パーティCookieがundefinedの時にはクエリパラメータを参照するようにします。これによって、Cookieの設定と他アクセス解析用タグの発行順序を考慮する必要がなくなります。

トリガーは2つ。クエリパラメータが付与されているときのトリガーと、Cookieが設定されているときのトリガーです。

タグは１つです。Cookieを設定するためのカスタムHTMLタグを作成します。例えば以下のようなスクリプトになります。トリガーはさきほど作成したクエリパラメータが付与されているときのものです。

document.cookie="user=stakeholder;max-age=315360000";

また、制御対象のアクセス解析用タグについて「除外」条件にCookieが設定されているときのトリガーを追加します。

最終的には画像のようなバージョンが設定できます。

パラメータによる除外設定を行ったGTMバージョン

GTMの本番公開まで完了したら、関係者にはクエリパラメータ付きURLを一度経由してもらい、Cookieをブラウザに設定してもらいましょう。

なお、この設定を行ったコンテナのJSONファイルを公開しております。よろしければご活用ください。→ コンテナファイル

注意点

まず、該当パラメータが関係者以外に広まらないように注意してください。うっかりGoogle検索等にインデックスされてしまうと復旧が難しくなります。

Cookieを削除した場合は再度パラメータ付きURLにアクセスする必要があります。

FirefoxやSafari等、トラッキング用のCookieを自動的に削除するようなブラウザでは使用できない可能性があります。

Chromeにおいてもプライベートモードで設定されたCookieは、ブラウザを閉じたときに削除されますので再度アクセスする必要があります。

また、サイト速度等の検証を行っている際には、タグの発行がなされなくなるとユーザーの環境と大きく差異が出てしまうため、タグの発行を一時的に許可する必要があります。

それではよいリモートワークを！