GTM

【GTM】セッションのLPで1回のみ発火させるトリガー

2024.10.05 2024.12.15

ユーザーがサイトに訪問したセッションのランディングページのみの1回限りでタグを発火させるためのトリガーの作成方法について解説。GTMを活用しているとこのようなトリガーを利用したくなるケースはよくあるが、デフォルトではこのようなトリガーはないためカスタマイズして作成する必要がある。

セッションの初回ページに限定したトリガーの実装概要
実装手順

セッションの初回ページに限定したトリガーの実装概要

セッションの最初の1回、つまりランディングページでトリガーを起動させるには、「sessionStorage」と「window.dataLayer.push()」を活用することで実現できる。簡潔にいってしまえば「sessionStorage」のフラグを元に、カスタムイベントを生成し、「window.dataLayer.push()」にプッシュすることで、ランディングページのみのイベント発火に限定したトリガーとなる。つまり、「sessionStorage」のスコープは「セッション」であり、「window.dataLayer」のスコープは「ページ」であることを利用する。

ここでいう「セッション」はタブを開いている状態のことであり、離脱して30分以内に再訪問しても都度、そのランディングページが初回訪問してみなされる仕様となります。

実装手順

sessionStorageの条件判定によりカスタムイベントを生成

カスタムHTMLのトリガーは「All Pages」で発火させる。このカスタムHTMLの処理に入るためにフラグを利用しており、セッションの初回のみIF文の中に移行することができる。その中で、データレイヤーにカスタムイベントをプッシュしている。データレイヤーに格納されたデータの存続期間は1ページのみとなるため、カスタムイベントの有効期限はセッションの最初の1回ということになる。

<script>
  // ユーザーがサイトに初めてランディングしたときに1回のみトリガーを発火
  if (!sessionStorage.getItem('landingFlag')) {
    // セッションストレージにフラグをセット
    sessionStorage.setItem('landingFlag', 'true');
    
    // GTMのカスタムイベント「firstPageView」を発火
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({'event':'firstPageView'});
  }
</script>

コード解説

1. sessionStorage.getItem(‘landingFlag’) の確認

if (!sessionStorage.getItem('landingFlag')) {

まず、sessionStorage というWeb APIを使って、ユーザーがサイトに訪問したかどうかを確認しています。
sessionStorage とは、ブラウザにデータを一時的に保存するためのAPIで、ユーザーがブラウザのタブやウィンドウを閉じるまでデータが保持されます（ページを再読み込みしても保持されるが、ブラウザを閉じたら削除されます）。
getItem メソッドを使って、セッションストレージ内に 'landingFlag' というキーがあるかどうかを確認しています。
! をつけているため、landingFlag が存在しない（つまり、ユーザーがこのセッション内で初めて訪れたページである）場合に、その後の処理が実行されます。

2. セッションストレージにフラグを保存

sessionStorage.setItem('landingFlag', 'true');

ここでは、setItem メソッドを使ってセッションストレージに 'landingFlag' というキーで true という値を保存しています。
これにより、ユーザーがこのセッション内で最初に訪れたことが記録されます。このフラグが設定された後は、このセッション中に他のページに移動しても、フラグがあるため再度このコードは実行されません。
フラグを設定することで、ユーザーがサイトに再度アクセスしても、このセッション中はもう一度イベントが発火することを防ぎます。

3. GTMのカスタムイベント「firstPageView」を発火

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event':'firstPageView'});

window.dataLayer はGTMが管理するJavaScriptオブジェクトで、ここに情報をプッシュすることでGoogleタグマネージャー(GTM)にイベントを通知できます。
window.dataLayer = window.dataLayer || []; は、window.dataLayer が未定義の場合に空の配列を代入しています。これは安全策で、もし dataLayer がまだ存在していなかった場合でもエラーを防ぐための処理です。
dataLayer.push({'event':'firstPageView'}) は、GTMに対して 'firstPageView' というカスタムイベントを発火させるコードです。このイベントが発火することで、GTMで設定されたトリガー（このイベント名に基づいたもの）が作動します。
{'event':'firstPageView'} はイベントオブジェクトで、event というプロパティに 'firstPageView' というイベント名が格納されています。GTMはこのオブジェクトを受け取り、設定されたタグを実行します。

4. コードの全体的な流れ

ユーザーがサイトの任意のページに最初にアクセスした際、このスクリプトが実行され、まずセッションストレージ内に 'landingFlag' があるかを確認します。
フラグが存在しなければ、セッションストレージに 'landingFlag' を true として保存します。これにより、このセッション中にユーザーが再度ページを移動しても、フラグが存在しているため、同じ処理が再度実行されません。
最初にページに到達した際にだけ、GTMにカスタムイベント firstPageView を送信し、これを元にGTMでイベントに関連するタグやトリガーを実行します。

カスタムイベントのトリガー作成

window.dataLayer.push({'event':'firstPageView'});

カスタムHTMLの中でデータレイヤーにPUSHしたカスタムイベントを使えるようにするためにGTMで「カスタムイベント」を設定する。設定後は、GTMのトリガーの選択の中に作成したカスタムイベントが選択できるようになるため、タグのトリガーでこのカスタムイベントを設定すれば、セッションの最初の1ページ目で発火するトリガーとなる。