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

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

フリッカーは、訪問に意図したコンテンツを表示する前にデフォルトのコンテンツが一瞬表示される現象で、訪問にとってコンテンツがフリッカーしたように見えます。訪問はフリッカーをサイトの問題と解釈することがあり、サイトやブランドへの信頼を失う原因となることがあります。例えば、好ましい割引が表示された後により少ない割引に置き換わると、訪問は不満を感じることがあります。フリッカーは、表示されるコンテンツの読み込みに遅延がある場合に発生する症状で、これを「テスト」とも呼びます。

同期ロードと非同期ロード

A/Bテストや多変量テストのための人気ソリューションであるTest & Targetを、同期的または非同期的にロードすることができます。どちらの方法も利点と問題があり、適切な判断をするためにはそれぞれを理解することが重要です。

同期ロード

テストを同期的にロードする場合、フリッカーは発生しません。しかし、コンテンツを同期的にロードすると、そのコンテンツを受け取るまでページ全体が待機状態になり、ページの残りの部分の解析と表示が停止します。ロードしようとしているコンテンツが利用できない場合、ページは「ハング」し、ロードが停止したように見えます。遅延が長すぎると、ページが訪問に完全に利用できなくなり、トラフィックやコンバージョンが失われることになります。

非同期ロード

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

Tealiumの新しいアプローチ

始める前に：utag.footer.jsは非推奨

今後、utag.footer.jsは公式に非推奨となり、使用オプションとしてはありません。utag.footer.jsを使用している古い実装は以前と同様に機能します。古いコンテンツ変更拡張機能のスコープを変更する必要はありません。Footerにスコープされていた古いコンテンツ変更拡張機能はDOM Readyにスコープされているように見えますが、引き続きutag.footer.jsファイルに公開されます。

utag.sync.jsの紹介

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

その仕組み

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

ロードルールがTest & Targetタグのロードを許可しない場合、utag.jsファイルは隠されたノードを表示し、デフォルトのコンテンツを表示します。

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

私たちはフリッカーフリーのソリューションを処理するためにTest & Target拡張機能を更新しました。フリッカーフリーTnT拡張機能を使用する前に：

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

ページのコードのheadタグ内にutag.sync.jsを含めます。この機能を使用するにはこれが必須です。

フリッカーフリーパブリッシュ構成を有効にする

まず、適切なパブリッシュ構成を有効にする必要があります：

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

古いTest & Targetタグテンプレートを削除する

Test & Targetの古いタグテンプレートを削除する必要があります。

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

Test & Target拡張機能の構成

拡張機能の構成で「フリッカーフリー」ボックスをチェックするだけで、フリッカーフリーを使用する準備が整います。フリッカーフリーを使用する場合は、Mod Position選択で**Replace Node Content (leave default)**を選択する必要があります。他の構成は以前と同様に残ります。Test & Target記事で説明されています。

重要な注意点

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