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 の
runWhenElementPresentAPI については、こちら を参照してください。 - ログ: デバッグの推奨方法として
console.logを使用します。 - DataLayer(または同等のオブジェクト): dataLayer の同じレイヤーの値を変更することは避けてください。必要な情報がまだ利用できない場合は、後で古い値を更新するのではなく、正しい値を直接設定するまで待ちます。ページ上で情報がロードされたときを検出するために使用される Kameleoon の
runWhenConditionTrueAPI については、こちら を参照してください。 - 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などのイベントの操作を許可します。