チラツキ現象と対応方法
チラつき現象とは
チラつき現象とはページが開く瞬間に、一瞬変更前の内容が表示され、その後変更後の内容が表示されるという現象のことです。ABテストやリダイレクトテストを行う場合、チラつきが発生しやすいです。
チラつき現象を軽減するには
Step1：Ptengineの基本タグの設置
Ptengineの基本タグ内にアンチフリッカー機能のロジックが入っています。 ですので、早いタイミングに機能するようにページのhead内に設置することを推奨しております。
Step2：Ptengineの管理画面での設定
1. アンチフリッカー機能とは
チラつき現象を緩和する機能です。
Ptengine experienceの体験の設定画面ではアンチフリッカー機能の「on/off」設定が可能です。
この機能がデフォルトではOffになっていますが、Onにするとホワイトアウトでチラつき現象を隠します。
2. どの場合アンチフリッカー機能をonにすべきか
【早見表】推奨設定のまとめ
リダイレクトテスト
（すべて）
ON
A/Bテスト
ファーストビュー（FV）
ON
A/Bテスト
ページ中部・下部
OFF
注意：同じページに複数の体験が公開されている場合、1つの体験がアンチフリッカー設定を有効にしている限り、該当ページのフリッカーを防止する効果が働きます。
headにPtengineのタグを直張りできない場合
1. 現象と原因
GTM（Googleタグマネージャー）経由での設置や、HTMLの<body>内に基本タグを設置した場合、アンチフリッカー機能が正常に動作しないことがあります。
これは、ページの表示速度を優先する「非同期読み込み」によってPtengineタグの実行が遅れるためです。
結果として、「元のページ → 白い画面 → 編集後のページ」という不自然な表示が発生し、ユーザー体験を損なう可能性があります。
2. 対処方法
この問題を解決するには、既存の基本タグはそのままで、以下の手順で専用のアンチフリッカータグを追加してください。
① 専用タグを<head>に設置
下記のアンチフリッカー専用タグを、ウェブサイトのHTMLソースコードの<head>内に直接設置します。
<script src="https://js.ptengine.jp/xxxxxxxx_antiFlicker.js" ></script>
※注意：xxxxxxxxはプロジェクトIDで、基本タグのIDと一致します。
② Ptengine側で機能を有効化
Ptengineの管理画面で、アンチフリッカー機能を「On」に設定します。
注意点
アンチフリッカータグのタイムアウトは4秒です。
ページの読み込み速度自体が極端に遅い場合は、上記設定を行ってもチラつきが発生する可能性があります。
そのため、可能な限り、Ptengineのタグをheadに直張りすることを推奨いたします。
まとめ
チラつき防止の設定は、タグの設置方法によって異なります。
推奨：
<head>内に直接設置する場合 Ptengineの基本タグを設置し、アンチフリッカー機能をONにする。GTM等で設置する場合：アンチフリッカー専用タグを
<head>内に追加で設置し、アンチフリッカー機能をONにする。
それぞれの設定と効果の詳細は、以下の表でご確認ください。
・<head>内に設置
・設置なし ・<body>に設置 ・<head>に設置 ・GTMで設置
ON
チラつき現象はほぼ感じない
・設置なし ・<body>に設置 ・<head>に設置 ・GTMで設置
OFF
アンチフリッカーは機能せず、場合によって軽度なチラつきが発生
・GTM などのタグ管理ツールで設置 ・<body>内に設置
・設置なし ・<body>に設置 ・GTMで設置
ON
チラつきが発生する上、ホワイトアウト画面も表示されてしまう
・設置なし ・<body>に設置 ・GTMで設置
OFF
アンチフリッカーは機能せずやや長めのチラつきが発生
・<head>に設置
ON
ホワイトアウトでチラつき現象を隠し軽減
・<head>に設置
OFF
アンチフリッカーは機能せずやや長めのチラつきが発生
※基本タグを直張りする場合、別途アンチフリッカータグは不要です。
最終更新