フリッカーフリー Test & Target

フリッカーとは

フリッカーとは、訪問に表示する予定のコンテンツに置き換わる前に、デフォルトのコンテンツが一瞬表示され、コンテンツがちらついたように見える現象です。訪問はフリッカーをサイトの不具合と捉えることがあり、サイトやブランドに対する信頼を失う可能性があります。また、たとえば、気に入った割引が一瞬表示された後、割引率の低いものに置き換わった場合、訪問の不満につながることもあります。フリッカーは、「テスト」とも呼ばれる表示コンテンツを非同期で読み込む際に遅延が発生していることを示す現象です。

同期読み込みと非同期読み込み

A/B テストおよび多変量テスト向けの一般的なソリューションである Test & Target は、同期または非同期で読み込むことができます。どちらの方法にも利点と問題点があるため、適切な判断を下すには、それぞれを理解することが重要です。

同期読み込み

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

非同期読み込み

非同期読み込みでは、保留中のコンテンツを待っている間もブラウザーがページの残りの部分を読み込み続けるため、利用できないコンテンツによってページの読み込みが停止する問題を回避できます。ただし、ブラウザーがページ上のオファーを検出してからそのコンテンツを取得するまでに十分な遅延がある場合、訪問にはデフォルトのコンテンツが一瞬表示されることがあります。これがフリッカー現象です。

Tealium の新しいアプローチ

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

今後、utag.footer.js は正式に非推奨となり、使用できなくなります。utag.footer.js を使用している既存の実装は、これまでどおり引き続き動作します。既存の Content Modification Extension のスコープを変更する必要はありません。元々 Footer をスコープとしていた既存の Content Modification Extension は、DOM Ready をスコープとしているように表示されますが、引き続き utag.footer.js ファイルにパブリッシュされます。

utag.sync.js の概要

utag.sync.js ファイルは、従来の utag.footer.js ファイルの機能を置き換えます。utag.sync.js を使用する場合は、ページコード上部の head タグ内にそのファイル参照を必ず含めてください。Flicker Free Test & Target を使用するには、ページに utag.sync.js を含める必要があります。

仕組み

ページが読み込まれると、ブラウザーは utag.sync.js ファイルを検出します。このファイルは、CSS の visibility プロパティを hidden に構成します。コンテンツ自体は削除されませんが、ブラウザーにはレンダリングされません。非表示になったコンテンツのレイアウト上の寸法は維持されるため、ページのレイアウトが崩れることはありません。訪問には、コンテンツが表示されるはずの領域が空白になっているように見えます。フリッカーは発生しません。
utag.js ファイルが読み込まれると、Test & Target タグが呼び出され、そのタグによって非表示のノードが表示されます。

ロードルールによって Test & Target タグの読み込みが許可されない場合、utag.js ファイルが非表示のノードを表示し、代わりにデフォルトのコンテンツを表示します。

Flicker Free Test & Target Extension の使用

Test & Target Extension は、Flicker Free ソリューションに対応するよう更新されています。Flicker Free TnT Extension の使用を開始する前に、以下の構成を行ってください。

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

ページコードの head タグ内に utag.sync.js を含めます。これがないと Flicker Free 機能を使用できません。

Flicker Free のパブリッシュ構成を有効にする

まず、該当するパブリッシュ構成を有効にする必要があります。

管理メニューで Configure Publish Settings= をクリックします。Publish Configuration ダイアログが表示されます。
Flicker-Free Support for Adobe Target をオンに切り替え、Apply をクリックします。

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

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

管理メニューで Manage Templates をクリックします。
Adobe Text & Target Tag テンプレートを選択します。Tag Config ウィンドウが表示されます。
右上隅にあるごみ箱アイコンをクリックして、現在のテンプレートを削除します。
Close をクリックします。
プロファイルを保存してパブリッシュします。次回プロファイルにログインすると、新しいタグテンプレートが自動的に取得されます。

Test & Target Extension の構成

Flicker Free を使用するための Extension の構成は、Extension 構成で「Flicker Free」ボックスを選択するだけです。Flicker Free を使用する場合、Mod Position の選択項目には Replace Node Content (leave default) を選択する必要があります。その他の構成はすべて、Test & Target の記事で説明されている従来の構成と変わりません。

重要事項

mBox の DIV ID を要素識別子と同じにすることはできません。同じにすると、utag.sync.js ファイルによって、その識別子を持つすべての要素も非表示になります。
キャンペーンに含まれていない mBox がある場合は、その mBox を Test and Target Content Modification Extension から必ず削除してください。削除しない場合、utag.sync.js ファイルは、Test & Target タグの構成にあるタイムアウトフィールドで指定した時間だけコンテンツを非表示にし、その後にデフォルトのコンテンツを表示します。mBox を削除すると、デフォルトのコンテンツが直ちに表示されます。