フリッカーフリーテスト＆ターゲット

フリッカーとは何ですか？

フリッカーとは、訪問に表示する予定のコンテンツが表示される前に、デフォルトのコンテンツが一瞬表示される現象のことを指します。訪問はコンテンツがフリッカーしたように感じることがあります。訪問はフリッカーをサイトの問題と解釈することがあり、サイトやブランドへの信頼を失う可能性があります。例えば、訪問が気に入った割引が「フリッカーして消えて」しまい、それがより少ない割引に置き換えられると、訪問は不満を感じることがあります。フリッカーは、表示されるコンテンツ（「テスト」とも呼ばれます）の読み込みに遅延が生じた結果として発生します。

同期と非同期

Test & Target（A/Bテストと多変量テストのための人気のあるソリューション）は、同期的にも非同期的にも読み込むことができます。どちらの方法も利点と問題点があり、どちらを選択するかは各々の理解に基づいて決定することが重要です。

同期的な読み込み

テストを同期的に読み込むことを選択した場合、フリッカーは発生しません。しかし、同期的にコンテンツを読み込むということは、ページ全体がそのコンテンツを受け取るまで、他の部分の解析と表示を待つ必要があるということです。ページが読み込もうとしているコンテンツが利用できない場合、ページは「ハングアップ」し、読み込みが停止したように見えます。遅延が長すぎると、ページは訪問に完全に利用できなくなり、トラフィックやコンバージョンなどが失われる可能性があります。

非同期的な読み込み

非同期的な読み込みは、利用できないコンテンツがページの読み込みを停止させる問題を回避します。これは、ブラウザが待機中のコンテンツを待つ間に、ページの残りの部分を読み込み続けるからです。しかし、ブラウザがページ上のオファーに遭遇してからそのオファーのコンテンツを取得するまでの遅延が十分に長い場合、訪問は一時的にデフォルトのコンテンツを見ることがあります。これがフリッカー現象です。

Tealiumの新しいアプローチ

はじめに：utag.footer.jsは非推奨

今後、utag.footer.jsは公式に非推奨となり、選択肢から外れます。utag.footer.jsを使用している古い実装は、以前と同様に機能します。古いコンテンツ修正拡張のスコープを変更する必要はありません。元々フッターにスコープされていた古いコンテンツ修正拡張は、DOM Readyにスコープされているように見えますが、それでもutag.footer.jsファイルに公開されます。

utag.sync.jsの導入

utag.sync.jsファイルは、古いutag.footer.jsファイルの機能を置き換えます。utag.sync.jsを使用する場合は、ページのコードの先頭にあるヘッドタグ内にそのファイル参照を含めるようにしてください。フリッカーフリーテスト＆ターゲットを使用するためには、ページ上にutag.sync.jsを含める必要があります。

その動作方法

1. ページが読み込まれると、ブラウザはutag.sync.jsファイルに遭遇し、CSSの可視性プロパティをhiddenに構成します。コンテンツは削除されませんが、ブラウザはそれをレンダリングしません。非表示のコンテンツのレイアウト寸法は保持されるため、ページのレイアウトは変形しません。訪問には、コンテンツが表示されるはずのセクションが空白に見えます。フリッカーはありません。
2. utag.jsファイルが読み込まれると、それはテスト＆ターゲットタグを呼び出し、非表示のノードを表示します。

ロードルールがテスト＆ターゲットタグの読み込みを許可しない場合、utag.jsファイルは非表示のノードを表示し、デフォルトのコンテンツを代わりに表示します。

フリッカーフリーテスト＆ターゲット拡張の使用

テスト＆ターゲット拡張を更新し、フリッカーフリーのソリューションを処理できるようにしました。フリッカーフリーTnT拡張を使用する前に：

ページにutag.sync.jsを含める

ページのコードのヘッドタグ内にutag.sync.jsを含めてください。これがないとフリッカーフリー機能は使用できません。

フリッカーフリー公開構成を有効にする

まず、適切な公開構成を有効にする必要があります：

1. 管理メニューで、公開構成の構成をクリックします。公開構成ダイアログが表示されます。
2. Adobe Targetのフリッカーフリーサポートをオンに切り替えて、適用をクリックします。

古いテスト＆ターゲットタグテンプレートを削除する

テスト＆ターゲットの古いタグテンプレートを削除する必要があります。

1. 管理メニューで、テンプレートの管理をクリックします。
2. Adobe Text & Target Tagテンプレートを選択します。Tag Configウィンドウが表示されます。
3. 右上のゴミ箱アイコンをクリックして現在のテンプレートを削除します。
4. 閉じるをクリックします。
5. プロファイルを保存/公開します。再度プロファイルにログインすると、新しいタグテンプレートが自動的に取り込まれます。

テスト＆ターゲット拡張の構成

フリッカーフリーを使用するための拡張の構成は、拡張構成で’Flicker Free’ボックスをチェックするだけで簡単です。フリッカーフリーを使用する場合、Mod Positionの選択で**Replace Node Content (leave default)**を選択する必要があります。他のすべての構成は、以前と同じままです。これについては、Test & Target article.で説明されています。

重要な注意点

• mBox DIV IDは、要素識別子と同じであってはなりません。同じ場合、utag.sync.jsファイルはその識別子を持つすべての要素も非表示にします。
• キャンペーンに含まれていないmBoxがある場合、そのmBoxをテストとターゲットのコンテンツ修正拡張から削除することを確認してください。そうしないと、utag.sync.jsファイルは、Test & Target Tagの構成のタイムアウトフィールドに入力した期間だけコンテンツを非表示にし、最終的にデフォルトのコンテンツを表示します。mBoxを削除すると、デフォルトのコンテンツがすぐに表示されます。