GA4でランディングページの「その後」を分析する

<script>
(function () {
  // ==================================================
  // 設定：導入サイトに合わせて変更する主な箇所
  // ==================================================

  // セッション内ページ閲覧順を保持するCookie名
  var COOKIE_NAME = 'ga_spvi';

  // セッションのランディングページを保持するCookie名
  // Cookie名は短さを優先し、entry のままにしています。
  var COOKIE_LANDING_NAME = 'ga_spvi_entry';

  // Cookieを共有するドメイン
  // 例：www.example.com、blog.example.com などのサブドメイン間で共有したい場合は 'example.com' を指定します。
  // 本番導入時は、導入サイトに合わせて必ず確認してください。
  var COOKIE_DOMAIN = 'example.com';

  // CookieのPath
  var COOKIE_PATH = '/';

  // セッションタイムアウト設定：30分
  // GA4側でセッションタイムアウトを変更している場合は、その時間に合わせて変更してください。
  var SESSION_TIMEOUT_MINUTES = 30;

  // GA4へ送信するイベントパラメータ名：セッション内ページ閲覧順
  var DATA_LAYER_INDEX_KEY = 'session_page_view_index';

  // GA4へ送信するイベントパラメータ名：セッションのランディングページ
  var DATA_LAYER_LANDING_KEY = 'session_landing_page_location';

  // セッションのランディングページとして保存・送信する文字列の最大長
  // location.hostname + location.pathname がこの文字数を超える場合は切り捨てます。
  var LANDING_PAGE_MAX_LENGTH = 100;

  // CookieのSameSite属性
  var SAME_SITE = 'Lax';

  // HTTPSページではSecure属性を付与
  var USE_SECURE_COOKIE = (location.protocol === 'https:');

  // GTMの組み込み変数「Container ID」を有効化しておく
  var CONTAINER_ID = '{{Container ID}}';

  // デバッグログを出す場合は true
  var DEBUG = false;

  // ==================================================
  // ここから下は通常変更不要
  // ==================================================

  var SESSION_TIMEOUT_MS = SESSION_TIMEOUT_MINUTES * 60 * 1000;
  var COOKIE_MAX_AGE_SECONDS = SESSION_TIMEOUT_MINUTES * 60;

  function log(message) {
    if (DEBUG && window.console && typeof window.console.log === 'function') {
      window.console.log('[session_page_view_index] ' + message);
    }
  }

  function normalizeCookieDomain(domain) {
    if (!domain) {
      return '';
    }
    return String(domain).replace(/^\./, '').toLowerCase();
  }

  function getCookie(name) {
    var encodedName = encodeURIComponent(name) + '=';
    var cookies = document.cookie ? document.cookie.split(';') : [];

    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].replace(/^\s+/, '');

      if (cookie.indexOf(encodedName) === 0) {
        return decodeURIComponent(cookie.substring(encodedName.length));
      }
    }

    return '';
  }

  function setCookie(name, value, maxAgeSeconds) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

    cookieText += '; Max-Age=' + String(maxAgeSeconds);
    cookieText += '; Path=' + COOKIE_PATH;

    var domain = normalizeCookieDomain(COOKIE_DOMAIN);
    if (domain) {
      cookieText += '; Domain=' + domain;
    }

    if (SAME_SITE) {
      cookieText += '; SameSite=' + SAME_SITE;
    }

    if (USE_SECURE_COOKIE) {
      cookieText += '; Secure';
    }

    document.cookie = cookieText;
  }

  function parseState(value) {
    var state = {
      index: 0,
      lastTime: 0,
      isValid: false
    };

    if (!value) {
      return state;
    }

    var parts = value.split('|');

    if (parts.length < 2) {
      return state;
    }

    var index = Number(parts[0]);
    var lastTime = Number(parts[1]);

    if (
      !isNaN(index) &&
      index > 0 &&
      !isNaN(lastTime) &&
      lastTime > 0
    ) {
      state.index = Math.floor(index);
      state.lastTime = lastTime;
      state.isValid = true;
    }

    return state;
  }

  function truncateValue(value, maxLength) {
    var text = String(value || '');

    if (maxLength > 0 && text.length > maxLength) {
      return text.substring(0, maxLength);
    }

    return text;
  }

  function getCurrentLandingPage() {
    // プロトコル、クエリパラメータ、ハッシュは含めない
    // 例：www.example.com/example/0001
    var host = String(location.hostname || '').toLowerCase();
    var path = String(location.pathname || '/');

    return truncateValue(host + path, LANDING_PAGE_MAX_LENGTH);
  }

  function setDataLayerValues(values) {
    var gtm = window.google_tag_manager && window.google_tag_manager[CONTAINER_ID];

    if (!gtm || !gtm.dataLayer || typeof gtm.dataLayer.set !== 'function') {
      return false;
    }

    for (var key in values) {
      if (Object.prototype.hasOwnProperty.call(values, key)) {
        gtm.dataLayer.set(key, values[key]);
      }
    }

    return true;
  }

  try {
    var now = Date.now();

    var currentValue = getCookie(COOKIE_NAME);
    var currentLandingValue = getCookie(COOKIE_LANDING_NAME);

    var state = parseState(currentValue);

    var currentIndex = state.index;
    var lastTime = state.lastTime;
    var landingPage = currentLandingValue;

    // 初回、Cookieなし、Cookie値不正、セッションタイムアウト超過、端末時刻の巻き戻り、
    // またはランディングページCookieがない場合は新しいセッション扱い
    var isNewSession = (
      !state.isValid ||
      !lastTime ||
      now - lastTime > SESSION_TIMEOUT_MS ||
      now < lastTime ||
      !landingPage
    );

    if (isNewSession) {
      currentIndex = 0;
      landingPage = getCurrentLandingPage();
    } else {
      landingPage = truncateValue(landingPage, LANDING_PAGE_MAX_LENGTH);
    }

    var nextIndex = currentIndex + 1;
    var nextValue = String(nextIndex) + '|' + String(now);

    // Cookieを書き込み
    setCookie(COOKIE_NAME, nextValue, COOKIE_MAX_AGE_SECONDS);
    setCookie(COOKIE_LANDING_NAME, landingPage, COOKIE_MAX_AGE_SECONDS);

    // Cookieを書き込めた場合のみ、値をGTMのデータレイヤーへ渡す
    if (getCookie(COOKIE_NAME) !== nextValue) {
      log('Index cookie could not be written or read. Parameters were not set.');
      return;
    }

    if (getCookie(COOKIE_LANDING_NAME) !== landingPage) {
      log('Landing page cookie could not be written or read. Parameters were not set.');
      return;
    }

    // タグ順序付け方式では dataLayer.push() ではなく dataLayer.set() で値を渡す
    var values = {};
    values[DATA_LAYER_INDEX_KEY] = nextIndex;
    values[DATA_LAYER_LANDING_KEY] = landingPage;

    if (setDataLayerValues(values)) {
      log(DATA_LAYER_INDEX_KEY + ' = ' + nextIndex);
      log(DATA_LAYER_LANDING_KEY + ' = ' + landingPage);
    } else {
      log('GTM dataLayer.set was not available. Parameters were not set.');
    }
  } catch (e) {
    // Cookieが利用できない環境や想定外のエラーが発生した場合でも、通常のGA4計測を妨げない
    log('Error occurred. Parameters were not set.');
  }
})();
</script>