チラつき現象の対処方法

チラつき現象とは #

チラつき現象とはページが開く瞬間に、一瞬変更前の内容が表示され、その後変更後の内容が表示されるという現象のことです。ABテストやリダイレクトテストを行う場合、チラつきが発生しやすいです。

チラつき現象を軽減するには #

Step1:Ptengineの基本タグの設置

Ptengineの基本タグ内にアンチフリッカー機能のロジックが入っています。
ですので、早いタイミングに機能するようにページのhead内に設置することを推奨しております。

Step2:Ptengineの管理画面での設定

1. アンチフリッカー機能とは

チラつき現象を緩和する機能です。
Ptengine experienceの体験の設定画面ではアンチフリッカー機能の「on/off」設定が可能です。


この機能がデフォルトではOffになっていますが、Onにするとホワイトアウトでチラつき現象を隠します。

2. どの場合アンチフリッカー機能をonにすべきか

①全てのリダイレクトテストの体験ではOnにすることを推奨いたします。
②リダイレクトテスト以外のABテストで、かつ編集内容がFVにある場合、Onにすることを推奨いたします。FVではなくページの下部や中部に編集コンテンツがある場合、Offににすることを推奨いたします。

注意:同じページに複数の体験が公開されている場合、1つの体験がアンチフリッカー設定を有効にしている限り、該当ページのフリッカーを防止する効果が働きます。

headにPtengineのタグを直張りできない場合 #

1. アンチフリッカーの挙動とページの動き

アンチフリッカー設定が有効でも、Ptengineの基本タグをGTMまたはその他のタグ管理ツールで設置している、またはHTMLの<head>ではなく<body>に基本タグを設定すると、アンチフリッカーが正しく機能しません。

理由としては、一般的なタグ管理ツールは、ページの読込速度を早めるために非同期にてタグを読み込む仕様がとられていることにあります。Ptengineのタグは、非同期で読み込まれると、アンチフリッカー機能が動作に遅れが生じ、元のページを最初に見てから、白いスクリーン画面のアンチフリッカーに入る可能性があります。(この場合、ユーザー体験としては元のページ→白い画面→編集後の画面となり、フリッカー現象よりも体験が悪くなってしまいます。)

2. 対処方法

  • 1別途アンチフリッカータグをページのheadに設置いただく必要があります。
    HTMLの<head>に下記のアンチフリッカータグを設定し、すでに設定されている基本タグはそのままにします。

    <script src="https://js.ptengine.jp/xxxxxxxx_antiFlicker.js" ></script>

    ※注意:xxxxxxxxはプロジェクトIDで、基本タグのIDと一致します。

  • 2上記アンチフリッカー機能をOnにしてください。

ただし、アンチフリッカータグは4秒以上機能しません。
ページのロード速度が遅い場合、全てのタグが正しく設定されてもチラつき現象は発生します。

Note:experienceでページ編集を行う場合、変更箇所が多ければ多いほどページのロードスピードが遅くなります。一つのパターンでは10箇所以下の変更を推奨いたします。
どうしても大幅に変更する必要がある場合、リダイレクトテストをご検討ください。

そのため、可能な限り、Ptengineのタグをheadに直張りすることを推奨いたします。

まとめ #

チラつき現象を防止する最もいい方法はPtengineの基本タグをページhead内に入れることです。
かつ、experienceで編集したコンテンツがFV内にある場合、体験設定画面にてアンチフリッカー機能をOnにしてください。
もしページhead内にタグの設置が難しく、タグマネージャー経由でタグの設置が必要な場合、別途アンチフリッカータグをページhead内へ設置していただき、アンチフリッカー機能をOnにしてください。
各種タグの設置位置とアンチフリッカー機能のOn/Offで、それぞれどのような効果があるかは下記ご参照ください。

基本タグの位置 アンチフリッカータグの位置 アンチフリッカー機能 効果
・<head>内に設置 ・設置なし
・<body>に設置
・<head>に設置
・GTMで設置
ON チラつき現象はほぼ感じない>
・設置なし
・<body>に設置
・<head>に設置
・GTMで設置
OFF アンチフリッカーは機能せず、場合によって軽度なチラつきが発生
・GTM などのタグ管理ツールで設置
・<body>内に設置
・設置なし
・<body>に設置
・GTMで設置
ON チラつきが発生する上、ホワイトアウト画面も表示されてしまう
・設置なし
・<body>に設置
・GTMで設置
OFF アンチフリッカーは機能せずやや長めのチラつきが発生
・<head>に設置 ON ホワイトアウトでチラつき現象を隠し軽減
・<head>に設置 OFF アンチフリッカーは機能せずやや長めのチラつきが発生

※基本タグを直張りする場合、別途アンチフリッカータグは不要です。

この記事についてどう思いますか?

  • いいですね!
  • よくないです

評価いただきありがとうございました

  申しわけありません!理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう