Webパーソナライズの実装方法｜JavaScript＋localStorageでツール不要

Webパーソナライズとは、ユーザーの属性や行動に基づいて表示内容を動的に変更するCRO施策です。McKinseyの調査（2023年）によると、パーソナライズを実施している企業はそうでない企業と比較して売上が40%高い傾向にあります。

高度なパーソナライズにはサーバーサイドの仕組みが必要ですが、クライアントサイドのパーソナライズはJavaScriptだけで実装可能です。この記事では、コードで実現できるパーソナライズの手法と具体的な実装方法を解説します。

コードで実装できる4つのパーソナライズ

条件	実装例	使用技術	難易度
流入元	Google広告からの流入者に広告連動CTAを表示	URLパラメータ（utm_source）	低
訪問回数	初回訪問者に初回限定オファーを表示	localStorage	低
デバイス	モバイルユーザーに電話CTAを表示	メディアクエリ / User-Agent	低
閲覧履歴	過去に見たカテゴリの関連コンテンツを表示	localStorage + JavaScript	中

流入元別のコンテンツ出し分け

UTMパラメータを使って、流入元に応じたメッセージを表示します。広告のランディングページで特に効果的です。

function getUtmParam(param) {
  const url = new URL(window.location.href);
  return url.searchParams.get(param);
}

function personalizeBySource() {
  const source = getUtmParam('utm_source');
  const headline = document.querySelector('.hero-headline');
  const cta = document.querySelector('.hero-cta');

  const config = {
    google: {
      headline: 'Google広告からお越しの方へ — 初回相談無料',
      cta: '無料相談を予約する'
    },
    facebook: {
      headline: 'SNSで話題のサービスを体験しませんか？',
      cta: '無料で試してみる'
    }
  };

  const personalized = config[source];
  if (personalized && headline && cta) {
    headline.textContent = personalized.headline;
    cta.textContent = personalized.cta;
  }
}

personalizeBySource();

参考: URLSearchParams – MDN Web Docs

訪問回数に応じた表示変更

初回訪問者にはサービス概要を、リピーターには直接的なCTAを表示します。

function getVisitCount() {
  const key = 'visit_count';
  const count = Number(localStorage.getItem(key) || 0) + 1;
  localStorage.setItem(key, String(count));
  return count;
}

const visitCount = getVisitCount();

if (visitCount === 1) {
  // 初回: サービス概要を強調
  document.querySelector('.welcome-banner').style.display = 'block';
} else if (visitCount >= 3) {
  // 3回目以降: 直接的なCTAを表示
  document.querySelector('.returning-cta').style.display = 'block';
}

参考: Web Storage API – MDN Web Docs

閲覧履歴に基づくレコメンド

ユーザーが過去に閲覧したページのカテゴリを記録し、関連コンテンツを表示します。

function recordPageView(category) {
  const key = 'viewed_categories';
  const viewed = JSON.parse(localStorage.getItem(key) || '[]');

  if (!viewed.includes(category)) {
    const updated = [...viewed, category].slice(-10);
    localStorage.setItem(key, JSON.stringify(updated));
  }
}

function getRecommendedCategory() {
  const viewed = JSON.parse(localStorage.getItem('viewed_categories') || '[]');
  const frequency = {};

  viewed.forEach(cat => {
    frequency[cat] = (frequency[cat] || 0) + 1;
  });

  return Object.entries(frequency)
    .sort((a, b) => b[1] - a[1])
    .map(entry => entry[0])[0] || null;
}

パーソナライズの実装を依頼する → RINIA

パーソナライズの注意点

SEOへの影響: クライアントサイドのパーソナライズはJavaScriptで動的に変更するため、Googlebot にはデフォルトコンテンツが見えます。SEO上重要なテキスト（h1・メタタグ等）はサーバーサイドで出力しましょう
プライバシー: localStorageはCookieと同様にユーザーのブラウザに保存されるデータです。個人を特定する情報は保存せず、カテゴリ・訪問回数など匿名情報のみを扱いましょう
フォールバック: JavaScript無効環境やlocalStorage未対応ブラウザでも、デフォルトコンテンツが正常に表示されるようにしましょう

よくある質問（FAQ）

Q. パーソナライズに有料ツールは必要？

クライアントサイドのパーソナライズ（UTM判定、訪問回数、閲覧履歴）はJavaScriptとlocalStorageだけで実装できます。大規模なサーバーサイドパーソナライズ（ユーザーDBとの連携、リアルタイムレコメンド）には専用ツールが必要ですが、まずはクライアントサイドから始めるのが効率的です。

Q. パーソナライズはSEOに悪影響がある？

クライアントサイドのパーソナライズであれば、SEOへの影響はありません。Googlebotはデフォルトコンテンツをクロールするため、パーソナライズされた内容ではなくオリジナルのコンテンツが評価されます。ただし、h1やtitleタグをJavaScriptで書き換えるのは避けましょう。

Q. どのパーソナライズから始めるべき？

UTMパラメータを使った流入元別の表示変更から始めましょう。Google広告のランディングページで、広告の訴求内容とページのキャッチコピーを一致させるだけで、CVRが顕著に改善するケースが多いです。

Q. localStorageのデータはどのくらい保持される？

localStorageのデータはユーザーが明示的に削除するか、ブラウザのデータをクリアするまで永続的に保持されます。ただし、SafariのITP（Intelligent Tracking Prevention）ではサードパーティコンテキストのlocalStorageに7日間の制限があります。ファーストパーティ（自社ドメイン）での使用であれば制限はありません。