HTML5 フローティング作成ガイド
自動クローズを追加する
自動クローズとは、一定の時間が経過すると自動的にインタースティシャル クリエイティブを閉じる機能です。
サイト運営者からの要件として、手動クローズボタンの実装に加え、フローティング クリエイティブを一定時間経過後に閉じるよう指定されることはよくあります。自動クローズにより、長い時間（特に広告へのユーザー インタラクションがない状態で）サイト コンテンツが広告に隠れてしまう状況を回避できます。
サイト運営者のサイト仕様には常に、自動クローズが必要かどうかが記載されていますが、スタジオでは、デスクトップのインタースティシャル クリエイティブを 15 秒経過後に自動的に閉じることをおすすめしています。詳しくは、デベロッパー向けのおすすめの方法をご覧ください。
自動クローズを設定する方法
スタジオ クリエイティブに自動クローズを設定する方法には、スタジオのウェブ管理画面を使用する方法と API を使用する方法の 2 つがあります。併用するのではなく、どちらか 1 つを使用することをおすすめします。
自動クローズの機能をクリエイティブに追加するだけであれば、オプション 1 をおすすめします。
クリエイティブの折りたたみの方法やタイミングを細かく指定する場合は、オプション 2 をおすすめします。たとえば、ユーザー インタラクションがあったときにクリエイティブを開いたままにする場合は、API を使用して自動クローズを制御する必要があります。
オプション 1: スタジオのウェブ管理画面を使用するスタジオのウェブ管理画面で自動クローズを設定する場合は、ページ上でクリエイティブを何秒間開いた状態に保つかを指定できます。指定した秒数が経過すると、ユーザー インタラクションの最中であってもクリエイティブは折りたたまれます。
スタジオのウェブ管理画面を使用したクリエイティブの自動クローズ設定は、クリエイティブをスタジオにアップロードする際に行います。ひとまずこの作成ガイドの次の手順に進み、インタースティシャル クリエイティブのプロパティの [表示時間] で自動クローズを有効にしてください。
自動クローズを設定するには、タイマー カウントダウン関数の最後に enabler.close(); メソッドを呼び出します。この自動クローズは、手動クローズとしてレポートでトラッキングする必要はないため、閉じるボタンとは異なり、この関数と一緒に enabler.reportManualClose(); を呼び出す必要はありません。
HTML5 でタイマーを設定する方法は 2 つあります。
setTimeout メソッドを使用します。
setTimeout(autoClose, 15000);
function autoClose() {
Enabler.close();
}setInterval メソッドを使用し、インターバル ハンドラが呼び出された後にクリアします。
var autoTimer = setInterval(autoClose, 15000);
function autoClose() {
clearInterval(autoTimer);
Enabler.close();
} オプション: インタラクションがあったらインタースティシャルを開いたままにする
DoubleClick Studio API を使用すると、ユーザー インタラクションがあった場合にインタースティシャル クリエイティブを開いたままにするよう設定できる、という利点もあります。これには、studio.events.StudioEvent.INTERACTION というスタジオのイベントを使用します。
コード例
var autoTimer = setInterval(autoClose,15000)
function autoClose(){
clearInterval(autoTimer);
Enabler.close();
}
function userInteract(){
clearInterval(autoTimer);
}
Enabler.addEventListener(studio.events.StudioEvent.INTERACTION, userInteract);