HTML5 フローティング作成ガイド

HTML5 イネーブラーを追加する

イネーブラーとはスタジオの中心的なコード ライブラリです。クリエイティブの頭脳と考えることができます。コンポーネントと API 呼び出しはすべて、イネーブラーを介する必要があります。イネーブラー ライブラリは、すべてのリッチメディア クリエイティブに必要です。イネーブラーを追加すると、自動的にクリエイティブで次の条件が整います。

  • 標準指標データ(表示時間、インプレッション数、インタラクション時間など)を得るための標準的なトラッキング機能が実装される
  • 動画やエキスパンド機能など、複雑な機能に対応できるようになる
Google Web Designer を使用して広告を作成する場合、「ディスプレイ&ビデオ 360」環境を選択するイネーブラーが自動的に組み込まれます。以下のコードを追加する必要はありません。

イネーブラーを追加する

HTML ファイルの <head> タグに、イネーブラーにリンクするスクリプトタグを追加します。

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

これにより、グローバル名前空間に「Enabler」という名のシングルトン オブジェクトができます。このオブジェクトのメソッドを呼び出すには、Enabler.isInitialized()、Enabler.exit() などを呼び出します。

省略可: エキスパンド フラグを設定する

いくつかのオプションのメソッドを使用して、エキスパンド広告の動作を設定できます。これらのメソッドを使用する必要がある場合は、イネーブル初期化コードの前に指定します。次のようなメソッドを使用できます。

  • Enabler.setExpandingPixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
    エキスパンド広告のステージ オフセットを設定します。
  • Enabler.setIsMultiDirectional(value:Boolean)
    広告を複数のルートで展開できるようにします。

  • Enabler.setStartExpanded(startExpanded:Boolean)
    広告は読み込まれるのと同時に展開されます。誰かが広告を展開するまで待機しません。

    これらのメソッドの詳細については、スタジオの HTML5 SDK をご覧ください。

イネーブラーの初期化を待つ

イネーブラーの初期化が完了するまで、広告内のいずれの要素も自動的に実行されることはありません。このため、すべてが正しく読み込まれてイネーブラーのメソッドにアクセスできるようになってからユーザーは広告を操作することになります。

JavaScript で、イネーブラーの isInitialized メソッドを使用してイネーブラーが初期化されたことを確認します。このメソッドは、true または false を返します。true の場合、関数を呼び出して開始します。この例では、enablerInitHandler() を呼び出します。false の場合、フォールバックを呼び出して、イネーブラーの INIT イベントをリッスンします。

// true の場合、関数を開始する。false の場合、INIT をリッスンする。
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // ポライトロードの開始、またはアニメーションの開始、
  // 画像アセットの読み込み、イネーブラーのメソッドの呼び出し、
  // 他のスタジオ モジュールの実装を行う。
}

イネーブラーの初期化が完了したら、アニメーションを開始し、画像アセットを読み込んで、トラッキング メソッドを呼び出すか、他のスタジオ モジュールを実装します。

イネーブラーを更新する

イネーブラーの新しいバージョンがリリースされると、クリエイティブのイネーブラーのバージョンが古いという警告がスタジオの管理画面に表示されます。イネーブラーを最新バージョンにアップグレードするには、クリエイティブのメイン HTML アセットを再度アップロードします。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。