ポライトロードとは
ポライトロードとは、親ページの読み込みが完了するまで、クリエイティブ アセット(画像など)の読み込みを遅らせる機能です。
ページの 20% を読み込み完了: コンテンツの表示を開始します。 | |
ページの 50% を読み込み完了: コンテンツの残り部分の表示を開始します。追加操作はありません。 | |
ページの 100% を読み込み完了: 追加のコンテンツと操作を表示します。 |
配信するファイルでポライトロードを使用することは Studio の要件ではありませんが、サイト運営者が要件として指定している場合があります。
この機能を使用すると、プリロード画像のあるクリエイティブを作成して、ページの読み込み完了を待ってから追加のアセット(画像、アニメーション、動画など)を読み込むようにすることができます。
Google Web Designer でポライトロードを設定する
クリエイティブを Google Web Designer でデザインしている場合は、コードを追加する必要はありません。ファイルをローカルにパブリッシュするときや、スタジオに直接パブリッシュするときに、パブリッシュ ダイアログの [設定] で [ポライトロード] チェックボックスをオンにします。
プリロード画像を使用する
ページの読み込みを待つ間に初期画像を表示するには、handleAdInitialized
ハンドラを使用します。詳細
JavaScript でポライトロードを設定する
JavaScript ファイルで、イネーブラーを初期化するコードの後に下記のコードを追加します。このコードはイネーブラーの isPageLoaded
メソッドを使用して、ページが読み込み済みかどうかを確認します。このメソッドは true または false を返します。このメソッドから true が返された場合は、クリエイティブを読み込むカスタム関数を呼び出します(この例では、カスタム関数は politeInit
です)。false が返された場合は、politeInit を呼び出す前にイネーブラーの PAGE_LOADED
イベントをリッスンします。
ポライトロードのコード スニペット
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// イネーブラーが準備できたら実行
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// ページが完全に読み込まれたら実行
function politeInit(){
// 読み込み中を示す画像またはアニメーションを非表示にするためのコードと、
// クリエイティブ アセットを読み込むためのコード、またはクリエイティブのアニメーションを開始するためのコードを追加
};
プリロード画像を使用する
ページの読み込みを待つ間に初期画像を表示する場合は、プリロード画像を読み込んで、PAGE_LOADED
イベントを受信した時点でその画像を非表示にすることができます。サンプル ファイルでは、読み込み中を示す画像の名前は「loading.gif」、その div 要素の ID は「loading_image_dc」となっています。