Skip to main content
A/B テストキャンペーンに最適化された Web サイトを開発するには、いくつかの技術的および構造的要素を考慮する必要があります。以下のセクションでは、主要な側面について説明します。

​
1. クリーンでセマンティックな HTML 構造

  • HTML タグの適切な使用: セマンティックタグ(<header>、<footer>、<section>、<article> など)を使用して、コンテンツの理解と操作を改善します。
  • 一意の識別子: 正確なターゲティングのために、要素に明確で関連性のある ID(id="unique-id")またはクラス(class="class-name")を追加します。
  • 不必要な動的クラスを避ける: 意味のあるもの(特定の CSS フレームワークからのものなど)でない限り、自動生成されたクラスは避けてください。
  • カスタムタグ: 動的クラスを使用する場合は、要素の選択を簡素化するために custom-id のような非動的属性を追加します。
  • 明示的な名前: クラス、ID、変数には、理解しやすいよう明確で説明的な名前(たとえば、.cta-button や #main-header)を使用します。

​
2. コードのモジュール性

  • 関心の分離: HTML、CSS、JavaScript をしっかりと分離して、複雑な依存関係を減らします。JavaScript の場合、複雑なロジックを window スコープに公開して、サイトのさまざまな部分で再利用できるようにします。ロジックを公開することで、特定のページからカートに商品を追加したり、フォームのステップを効率的に検証したりすることが可能になります。
  • Mutation Observers: Mutation Observers を使用して要素を検出し、変更を監視します。ページ上にレンダリングされた要素を検出するために使用される Kameleoon の runWhenElementPresent API については、こちら を参照してください。
  • ログ: デバッグの推奨方法として console.log を使用します。
  • DataLayer(または同等のオブジェクト): dataLayer の同じレイヤーの値を変更することは避けてください。必要な情報がまだ利用できない場合は、後で古い値を更新するのではなく、正しい値を直接設定するまで待ちます。ページ上で情報がロードされたときを検出するために使用される Kameleoon の runWhenConditionTrue API については、こちら を参照してください。
  • DOM 処理: DOM がロードされたら、再レンダリングを避けてください。再レンダリングは Kameleoon が適用した変更を上書きし、ページのロード完了の検出を困難にします。

​
3. SPA(シングルページアプリケーション)

  • クッキーと LocalStorage(LS): フォームの異なるステップを識別するため、明確なクッキーまたは LS 管理を実装します。
  • イベントレンダリング: Kameleoon の変更が持続し、上書きされないようにするため、以下のいずれかの方法を使用して、ページまたは特定の要素のレンダリングが完了したことを Kameleoon に通知します。
    • window.pageLoadForKam = true のようなウィンドウ変数を定義します。
    • Kameleoon がリッスンできる “pageLoaded” や “contentUpdated” のようなイベントをページ上でトリガーします:window.addEventListener('pageLoaded', () => { runKameleoonVariationCode })。
    • <body> タグまたはターゲット要素に特定のクラスや属性を追加します。
  • DataLayer(または同等のオブジェクト): URL 変更ごとに dataLayer の値を更新します。これには同じ URL 内のページ遷移(フォームステップなど)も含まれます。変更ごとに新しいレイヤーを積み重ねるのではなく、新しいエントリを追加する前に古い dataLayer エントリを削除します。この削除により、Kameleoon は最新の値を取得できます。Kameleoon はデータを処理する前に dataLayer の定義を待つためです。古い値がページ間で残ると、Kameleoon が dataLayer の更新前に実行され、前のページから古いデータが取得される可能性があります。それ以外の場合は、シングルページアプリの記事 の「custom setup」セクションを参照して、dataLayer の情報取得を処理してください。
ベストプラクティスについては、シングルページアプリで実験をセットアップする方法 のガイドを参照してください。

​
4. イベント管理

  • 複数のトリガー: click、mousedown、hover などのイベントの操作を許可します。

​
FAQ

SEO への影響は、実験のセットアップによります。SEO への影響の特定と対処
  • パフォーマンス問題を避けるため、正しくインストールしてください。
  • バリエーションに均等なトラフィック割合を割り当ててください。
  • 実験を 2 か月以上実行しないようにしてください。長期間の実験はボットによってコンテンツが一貫しないと解釈される可能性があります。
  • Kameleoon Debug Assistant 拡張機能と Lighthouse を使用してパフォーマンスを監視してください。
  • SEO に影響を与えるページ要素の大幅な変更を避けてください。
リダイレクトのガイドライン
  • トラフィックの 100% を新しい URL にリダイレクトしないでください。
  • 両方のページの HTML でカノニカル URL を定義し、検索エンジンにインデックスさせたいバージョンを指してください。
  • HTML が noindex タグを使用しないことを確認してください。
  • ネイティブのバリエーションリダイレクトまたは Kameleoon.API.Core.processRedirect("newURL") を使用してください。document.location.href は使用しないでください。
Kameleoon のリダイレクトは JavaScript ベースで一時的です。
Black Hat SEO の手法を避ける
  • クローキング: ボットと訪問者に異なるコンテンツを表示しないでください。
  • コンテンツの重複: リダイレクトページがカノニカルタグなしにオリジナルと同一にならないようにしてください。
  • 欺瞞的リダイレクト: 訪問者を予期しない URL にリダイレクトしないでください。
  • 隠しテキスト: 検索エンジンにのみ表示されるテキストを使用しないでください。
Kameleoon は自動的にボットトラフィックをフィルタリングします。詳細については、Kameleoon は結果からどのようにボットトラフィックをフィルタリングしますか? を参照してください。