- スクリプトが、ブラウザがすでにページまたはその一部を表示した後にロードおよび実行される場合。このタイミングの問題は、KameleoonがWebサイトにどのように実装されているかに直接関連しています。Kameleoonのロードが遅すぎる場合、またはタグ管理システム内に統合されている場合、フリッカーを避けることはできません。
- 実験のバリエーションを処理するエンジンが遅すぎて、変更を十分な速度で実行できない場合。
この技術の主な利点:
Kameleoonのアンチフリッカー技術がユニークで強力である理由は以下のとおりです。- 非同期スニペット:Kameleoonは信頼性の高いCDN(Cloudflare)からスクリプトを非同期にロードし、最初のページロードをノンブロッキングにすることを保証し、その後のページロードを高速化するためにブラウザキャッシュを活用します。Kameleoonは99.99%を超えるサービスレベル契約(SLA)を維持しています。
- 小さなスクリプトサイズ:TypeScriptを使用して作成されたアプリケーションファイルは、わずか29 kB(Brotliで圧縮)のサイズで、最初のページのロード時間を最小限に抑えます。
- 前処理アプローチ:Kameleoonスクリプトは、使用している機能とオプションに基づいて、特定のセットアップに必要なコンポーネントからのみ生成されます。
- ユニークなアンチフリッカーエンジン:エンジンはDOMイベントをリアルタイムにキャプチャし、実験バリエーションに関連するコンポーネントの表示を完全にレンダリングされる前に変更します。
- ネットワークコールの削減:スクリプトは複数のトラッキングイベントを1つのビーコンコールにまとめ、必要なネットワークコールの総数を大幅に削減します。
- 単一スクリプトロード:複数のファイルを必要とする他のプラットフォームとは異なり、Kameleoonは1つの統合スクリプトをロードします。これによりHTTPリクエストの数が削減されます。
-
遅延実験ロード:Kameleoonでは、最初のページロード時にアプリケーションファイル
engine.js(以前はkameleoon.jsという名前)に含める実験を、ケースバイケースで選択でき、重要でない実験を遅延させて最初のロード後に実行できます。 - リアルタイム更新:ブラウザキャッシュに妨げられることなく、より頻繁な更新を提供するため、Live Update Experiments機能は「LIVE-UPDATE」とラベル付けされた実験を1分以内に更新します。
実験でフリッカーを防ぐ方法
アプリケーションファイルをロードする際に発生するフリッカーを排除するには、アンチフリッカー付き非同期タグを使用してください。 スニペットには「ブロッキングCSSルール」が含まれており、スクリプトがブラウザによってダウンロードされる間、ページのすべてのコンテンツを最初は非表示にします。Kameleoonはアプリケーションコードがロードされた時点(通常50ミリ秒未満)で、このルールを削除します。指定されたタイムアウト期間(デフォルト1000ミリ秒)内にアプリケーションコードがロードされない場合、空白ページが無限に表示されるのを防ぐためにルールも削除されます。このアプローチにより、Kameleoonがどのような状況でもWebサイトを妨害できないことが保証されます。タイムアウトは、Kameleoonインストールタグで調整可能な
kameleoonLoadingTimeout JavaScript変数で管理されます。デフォルトでは、この変数は1000ミリ秒に設定されています。Kameleoonはこの値を維持することを推奨します。この変数は、Kameleoonアプリケーションファイルのロードを待つ間に、Kameleoonインストールタグがサイトの表示を妨げることができる最大時間を示します。タイムアウトが発生した場合、Kameleoonコードが最終的にロードされたときに、選択された構成により次の動作が決まります。Kameleoonプロジェクトの詳細確認設定で2つのオプションがあります。- Kameleoonを完全に無効化: タイムアウトが発生した場合、その特定の訪問者に対して実験やパーソナライゼーションは実行されません。
- Kameleoonコードを通常通り実行: この場合、コードが遅れて実行され、ページにフリッカーが発生する可能性があります。
<head>セクションに含まれている限り、自動的な保証が提供されます。この保証は、ブラウザがKameleoonアプリケーションファイルを完全にダウンロードして実行するまでコンテンツをレンダリングしないため存在します。ただし、ブロッキング方式でリソースをロードすることはベストプラクティスとは見なされません。
正しい方法を実装しても、A/Bテストソリューションの基盤となるエンジンがフリッカー防止に最適化されていない場合、フリッカー効果が発生する可能性があります。Kameleoonは、グラフィカルエディタを通じて行われたあらゆる変更に対して、これらの最適化を自動的に保証します。カスタムJavaScriptコードを利用するバリエーションのためにAPIが用意されており、スムーズなエクスペリエンスを保証します。問題を避けるため、これらのAPIを正しく使用してください。手書きのポーラーや他のカスタムコードを使うのではなく、要素への変更や、ページに要素が表示されるのを待つ操作はすべて、JavaScript APIメソッド、特にKameleoon.API.Core.runWhenElementPresent()を使用して実行してください。
バリエーション用のJavaScriptコードを実装する際は、行いたい変更と、それが適用される特定のDOM要素を考慮してください。これらの要素に対する適切なCSSセレクタを特定したら、変更呼び出しを
Kameleoon.API.Core.runWhenElementPresent()に提供するコールバック関数内に囲ってください。このアプローチには2つの重要な利点があります:第一に、要素がDOMに存在した後にのみコードが実行されるようにするため、コードが時期尚早に実行された場合に発生する可能性のある問題を防ぎます。第二に、不要なフリッカー効果のリスクを排除します。