秘密のパラメータと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は、ブラウザを閉じたときに削除されますので再度アクセスする必要があります。

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

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

カスタムイベントでも組み込み変数を利用する

GTMでカスタムイベントを使用する際でも「Click Element」等の組み込み変数を用いたいことがあります。データレイヤー変数を用いて任意に設定することが可能です。

イベントの発生時に同時に以下のような情報を送信します。

window.dataLayer.push({
  event: 'eventName', // イベント名
  'gtm.element': element, // 文字列ではなくDOM要素を指定する。Click ElementまたはForm Element
  'gtm.elementClasses': 'classes', // Click ClassesまたはForm Classes
  'gtm.elementId': 'id', // Click IDまたはForm ID'
  'gtm.elementTarget': 'target', // Click TargetまたはForm Target
  'gtm.elementUrl': 'https://example.com/', // Click URLまたはForm URL
  'gtm.videoProvider': 'youtube', // 'Video Provider'
  'gtm.videoUrl': 'https://youtu.be/', // 'Video URL'
  'gtm.videoTitle': 'タイトル', // 'Video Title'
  'gtm.videoDuration': 100, // 'Video Duration'
  'gtm.videoPercent': 10, // 'Video Percent'
  'gtm.videoVisible': true, // 'Video Visible'
  'gtm.videoStatus': 'play', // 'Video Status'
  'gtm.videoCurrentTime': 10, // 'Video Current Time'
  'gtm.scrollThreshold': 10, // 'Scroll Depth Threshold'
  'gtm.scrollUnits': 'percent', // 'Scroll Depth Units'
  'gtm.scrollDirection': 'vertical', // 'Scroll Direction'
  'gtm.visibleRatio': 30, // 'Percent Visible'
  'gtm.visibleTime': 1000 // 'On-Screen Duration'
});

Click TextまたはForm Textの値は"gtm.element"要素で指定されたDOM要素から生成されます。

注意すべき項目としては、{gtm: {element: element}} ではなく{'gtm.element': element}とピリオドでオブジェクトを分割せず、一つのキーとして用いる必要があるということです。 これは各組み込み変数がデータレイヤー変数バージョン１によって利用されていることに起因します。

ユースケース

「すべての要素」クリックトリガーを有効にすると、全ページの全要素のクリックのたびにイベントが発生するようになります。デバッグの際などで邪魔ですし、意図せずサイトに負荷をかけてしまうこともあります。その代わりにカスタムイベントをカスタムHTMLタグ等で追加することで、必要なタイミングでのみイベントを発生させることができます。

ただし、その場合は組み込み変数がデフォルトでは有効になりません。別途データレイヤー変数を追加して対応させることが一般的ですが、このような方法があることを頭に入れておいてもよいでしょう。