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 Observer: Mutation Observer の使用を有効にしてください。これはページ上の要素を検出し、変更を監視する最適化された方法です。ページにレンダリングされた要素を検出するために使用される特定の API、
runWhenElementPresentについては こちら を確認してください。 - ログ: デバッグのための推奨される方法として
console.logの使用を許可してください。 - DataLayer(または同等のオブジェクト): dataLayer の同じレイヤーの値を変更することは避けてください。必要な情報がまだ利用できない場合は、後で古い値を更新するのではなく、直接正しい値を設定するために待ってください。ページに情報が読み込まれたタイミングを検出するために使用される特定の API、
runWhenConditionTrueについては こちら を確認してください。 - DOM の処理: DOM が読み込まれた後に再レンダリングすることは避けてください。これにより Kameleoon が適用した変更が上書きされ、ページの読み込みが完了したタイミングを検出するのが難しくなります。
3. SPA(シングルページアプリケーション)
- Cookie とローカルストレージ(LS): フォームの異なるステップを識別するためなど、明確な Cookie または LS 管理を実装してください。
- イベントのレンダリング: Kameleoon の変更が持続し、上書きされないようにするには、以下のいずれかの方法を使用して、ページまたは特定の要素のレンダリングが完了したことを Kameleoon に通知できます:
- ウィンドウ変数を定義します。例:
window.pageLoadForKam = true。 - Kameleoon がリッスンできるイベントをページでトリガーします。例: 「pageLoaded」や「contentUpdated」を使用:
window.addEventListener('pageLoaded', () => { runKameleoonVariationCode })。 <body>タグまたは対象要素に特定のクラスや属性を追加します。
- ウィンドウ変数を定義します。例:
- DataLayer(または同等のオブジェクト): URL変更ごと(同じURL内のページ遷移、例えばフォームステップを含む)に dataLayer の値を更新します。変更ごとに新しいレイヤーを積み重ねる代わりに、新しいものを追加する前に古い dataLayer エントリを削除してください。これにより、Kameleoon が最新の値を取得できるようになります。Kameleoon はデータを処理する前に dataLayer が定義されるのを待つためです。古い値がページ間で持続すると、Kameleoon は dataLayer が更新される前に実行され、前のページから古いデータを取得することになります。そうでない場合は、この 記事 の「カスタムセットアップ」セクションを参照して、dataLayer 情報の取得を最適に処理してください。
4. イベント管理
- 複数のトリガー: 次のイベントを操作できるようにします:
click、mousedown、hoverなど。