> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web サイト開発 - A/B テストのためのベストプラクティス

> A/B テストを最適化するため、HTML 構造、コードのモジュール性、SPA サポート、イベント管理に関する Web サイト開発のベストプラクティスに従います。

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 については、[こちら](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenelementpresent) を参照してください。
* **ログ**: デバッグの推奨方法として `console.log` を使用します。
* **DataLayer(または同等のオブジェクト)**: dataLayer の同じレイヤーの値を変更することは避けてください。必要な情報がまだ利用できない場合は、後で古い値を更新するのではなく、正しい値を直接設定するまで待ちます。ページ上で情報がロードされたときを検出するために使用される Kameleoon の **`runWhenConditionTrue`** API については、[こちら](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenconditiontrue) を参照してください。
* **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** の更新前に実行され、前のページから古いデータが取得される可能性があります。それ以外の場合は、[シングルページアプリの記事](../advanced-experiment-types/set-up-experiment-single-page-app) の「custom setup」セクションを参照して、dataLayer の情報取得を処理してください。

ベストプラクティスについては、[シングルページアプリで実験をセットアップする方法](../advanced-experiment-types/set-up-experiment-single-page-app) のガイドを参照してください。

## 4. イベント管理

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