HTML5 エキスパンド作成ガイド

HTML5 のポライトロードを設定する(省略可能)

ポライトロードとは

ポライトロードとは、親ページの読み込みが完了するまで、クリエイティブ アセット(画像など)の読み込みを遅らせる機能です。

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A ページの 20% を読み込み完了: コンテンツの表示を開始します。
green letter b ページの 50% を読み込み完了: コンテンツの残り部分の表示を開始します。追加操作はありません。
red letter c ページの 100% を読み込み完了: 追加のコンテンツと操作を表示します。

配信するファイルでポライトロードを使用することは Studio の要件ではありませんが、サイト運営者が要件として指定している場合があります。

この機能を使用すると、プリロード画像のあるクリエイティブを作成して、ページの読み込み完了を待ってから追加のアセット(画像、アニメーション、動画など)を読み込むようにすることができます。

Google Web Designer でポライトロードを設定する

クリエイティブを Google Web Designer でデザインしている場合は、コードを追加する必要はありません。ファイルをローカルにパブリッシュするときや、スタジオに直接パブリッシュするときに、パブリッシュ ダイアログの [設定] で [ポライトロード] チェックボックスをオンにします。

Publish dialog in Google Web Designer with Polite Loading checked

プリロード画像を使用する

ページの読み込みを待つ間に初期画像を表示するには、handleAdInitialized ハンドラを使用します。詳細

JavaScript でポライトロードを設定する

JavaScript ファイルで、イネーブラーを初期化するコードの後に下記のコードを追加します。このコードはイネーブラーの isPageLoaded メソッドを使用して、ページが読み込み済みかどうかを確認します。このメソッドは true または false を返します。このメソッドから true が返された場合は、クリエイティブを読み込むカスタム関数を呼び出します(この例では、カスタム関数は politeInit です)。false が返された場合は、politeInit を呼び出す前にイネーブラーの PAGE_LOADED イベントをリッスンします。

ポライトロードを使用するクリエイティブの例をダウンロードし、DCRM_HTML5_inPage_Polite_300x600.html を開いて、必要なイネーブラーのコードを確認します。

ポライトロードのコード スニペット

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」となっています。

この情報は役に立ちましたか?

改善できる点がありましたらお聞かせください。

さらにサポートが必要な場合

次の手順をお試しください。

検索
検索をクリア
検索を終了
メインメニュー
8911829563195746759
true
ヘルプセンターを検索
true
true
true
true
true
74220
false
false