# チラツキ現象と対応方法 ## チラつき現象とは チラつき現象とはページが開く瞬間に、一瞬変更前の内容が表示され、その後変更後の内容が表示されるという現象のことです。ABテストやリダイレクトテストを行う場合、チラつきが発生しやすいです。 ## チラつき現象を軽減するには #### Step1：Ptengineの基本タグの設置 Ptengineの基本タグ内にアンチフリッカー機能のロジックが入っています。\ ですので、早いタイミングに機能するようにページのhead内に設置することを推奨しております。 #### Step2：Ptengineの管理画面での設定 **1. アンチフリッカー機能とは** チラつき現象を緩和する機能です。 Ptengine experienceの体験の設定画面ではアンチフリッカー機能の「on/off」設定が可能です。

この機能がデフォルトではOffになっていますが、Onにするとホワイトアウトでチラつき現象を隠します。 ![](https://devhelp.ptengine.jp/wp-content/uploads/2020/11/anti-flicker-02.png) **2. どの場合アンチフリッカー機能をonにすべきか** 【早見表】推奨設定のまとめ | テストの種類 | 編集箇所 | 推奨設定 | | ------------- | ------------ | ------- | | **リダイレクトテスト** | （すべて） | **ON** | | **A/Bテスト** | ファーストビュー（FV） | **ON** | | **A/Bテスト** | ページ中部・下部 | **OFF** | {% hint style="warning" %} **注意**：同じページに複数の体験が公開されている場合、1つの体験がアンチフリッカー設定を有効にしている限り、該当ページのフリッカーを防止する効果が働きます。 {% endhint %} ### headにPtengineのタグを直張りできない場合 #### 1. 現象と原因 GTM（Googleタグマネージャー）経由での設置や、HTMLの``内に基本タグを設置した場合、アンチフリッカー機能が正常に動作しないことがあります。 これは、ページの表示速度を優先する「非同期読み込み」によってPtengineタグの実行が遅れるためです。 結果として、「元のページ → 白い画面 → 編集後のページ」という不自然な表示が発生し、ユーザー体験を損なう可能性があります。 ![](https://devhelp.ptengine.jp/wp-content/uploads/2020/11/anti-flicker-03.png\)) #### 2. 対処方法 この問題を解決するには、**既存の基本タグはそのまま**で、以下の手順で**専用のアンチフリッカータグ**を追加してください。 **① 専用タグを``に設置** 下記のアンチフリッカー専用タグを、ウェブサイトのHTMLソースコードの``内に直接設置します。 `` {% hint style="warning" %} ※注意：xxxxxxxxはプロジェクトIDで、基本タグのIDと一致します。 {% endhint %} **② Ptengine側で機能を有効化** Ptengineの管理画面で、アンチフリッカー機能を「On」に設定します。 {% hint style="warning" %} **注意点** * アンチフリッカータグのタイムアウトは**4秒**です。 * ページの読み込み速度自体が極端に遅い場合は、上記設定を行ってもチラつきが発生する可能性があります。 {% endhint %} そのため、可能な限り、Ptengineのタグをheadに直張りすることを推奨いたします。 ## まとめ チラつき防止の設定は、タグの設置方法によって異なります。 * **推奨：``内に直接設置する場合** Ptengineの**基本タグ**を設置し、アンチフリッカー機能を**ON**にする。 * **GTM等で設置する場合：アンチフリッカー専用タグ**を``内に追加で設置し、アンチフリッカー機能を**ON**にする。 それぞれの設定と効果の詳細は、以下の表でご確認ください。 | 基本タグの位置 | アンチフリッカータグの位置 | アンチフリッカー機能 | 効果 | | ----------------------------------------- | ----------------------------------------------------- | ---------- | ------------------------------------------------------------- | | ・\内に設置 |

・設置なし
・\に設置
・\に設置
・GTMで設置

| ON | チラつき現象はほぼ感じない | | |

・設置なし
・\に設置
・\に設置
・GTMで設置

| OFF | アンチフリッカーは機能せず、場合によって軽度なチラつきが発生 | |

・GTM などのタグ管理ツールで設置
・\内に設置

|

・設置なし
・\に設置
・GTMで設置

| ON | チラつきが発生する上、ホワイトアウト画面も表示されてしまう | | |

・設置なし
・\に設置
・GTMで設置

| OFF | アンチフリッカーは機能せずやや長めのチラつきが発生 | | | ・\に設置 | ON | ホワイトアウトでチラつき現象を隠し軽減 | | | ・\に設置 | OFF | アンチフリッカーは機能せずやや長めのチラつきが発生 | ※基本タグを直張りする場合、別途アンチフリッカータグは不要です。
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://helps.ptengine.com/faq/experience-edit/anti-flicker.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.