クリエイティブは、ページ上のどの位置に広告が配信されるかに応じて、エキスパンドの方向を変えることができます。位置を検出してエキスパンドする方向を判別するようにクリエイティブをプログラミングできます。たとえば、多方向エキスパンド（MDE）機能を有効にすることにより、同一のクリエイティブを、ページの左側に配信された場合は右にエキスパンドさせ、ページの右側に配信された場合は左にエキスパンドさせることができます。
- HTML では、3 つのパネルを作成します。
- メインパネル: 異なるエキスパンドの方向を含めた、折りたたみパネルとエキスパンド パネルの両方を含みます
- 折りたたみパネル: 折りたたみパネルのコンテンツを含みます
- エキスパンド パネル: エキスパンド パネルのコンテンツを含みます
- CSS では、広告の位置とエキスパンドの方向を反映するように 3 つのオブジェクトのスタイルを設定します。
- JavaScript の場合:
setExpandingPixelOffsetsイネーブラー メソッドを使用して、折りたたみパネルのオフセットを設定します。このオフセットはローカルでのテスト環境には影響しませんが、実際に広告として掲載されたときに、広告の折りたたみ部分が座標 0, 0 で表示されます。このメソッドでは、相対配置されたボディ要素のmarginLeftとmarginTopCSS プロパティが設定されます。setIsMultiDirectionalイネーブラー メソッドを使用して、多方向エキスパンドを有効にします。getExpandDirectionイネーブラー メソッドを使用して、広告のエキスパンドの方向を判別し、エキスパンド パネルの位置とアニメーションを動的に変更します。
パネル レイアウトの例 |
700x350 - メインパネル |
<div> タグを使用して HTML ファイルで 3 つのオブジェクトを作成し、ID を割り当てます。
HTML の例
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- 折りたたみ時のコンテンツをここに追加します。 -->
</div>
<div id="expanded-panel">
<!-- エキスパンド時のコンテンツをここに追加します。 -->
</div>
</div>
</body>
作成したオブジェクトに割り当てた ID を使用して、CSS でそれらのオブジェクトのスタイルを設定します。
- メインパネルは常に座標 0,0 に配置します。また、折りたたみパネルとエキスパンド パネルの有効なすべての方向が入る十分な大きさのサイズであるようにします。メインパネルのサイズの計算方法は次のとおりです。
- メインパネルの幅 = エキスパンド パネルの幅 +（エキスパンド パネルの幅 - 折りたたみパネルの幅）
- メイン パネルの高さ = エキスパンド パネルの高さ +（エキスパンド パネルの高さ - 折りたたみパネルの高さ）
- 例
上記の画像を使用します。- width = 500px +（500px - 300px）= 700px
- height = 300px +（300px - 250px）= 350px
- 折りたたみパネルの領域は常にメインパネルの中心に配置します。この位置の計算方法は次のとおりです。
- 折りたたみパネルの左端 = エキスパンド パネルの幅 - 折りたたみパネルの幅
- 折りたたみパネルの上端 = エキスパンド パネルの高さ - 折りたたみパネルの高さ
- 例
上記の画像を使用します。- left = 500px - 300px = 200px
- top = 300px - 250px = 50px
- エキスパンド パネルの位置はエキスパンドの方向によって異なりますが、JavaScript を使用して動的に変更する必要があります。この例では、有効な方向ごとにクラスを追加しました（左端と上端の位置が含まれます）。後で、イネーブラーが検出した方向に応じて JavaScript でこれらのクラスにアクセスします。
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 700px;
height: 350px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
width: 500px;
height: 300px;
}
.direction-tl {
left: 0px;
top: 0px;
}
.direction-tr {
left: 100px;
top: 0px;
}
.direction-bl {
left: 0px;
top: 200px;
}
.direction-br {
left: 100px;
top: 200px;
}
広告の折りたたみパネルではピクセル単位のオフセットを設定し、エキスパンド パネルではサイズを設定します。これで、Studio は配信先のサイトページにおける広告の位置とエキスパンドの方向の両方を識別できます。これを行うには、イネーブラーを初期化した後に setExpandingPixelOffsets メソッドを使用します。
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- 折りたたみパネルのスタイル設定と同様に、
leftとtopのパラメータに設定する値が、折りたたみパネルの領域をメインパネルの中心に配置するものでなければなりません。これらの位置の計算方法は次のとおりです。- left = エキスパンド パネルの幅 - 折りたたみパネルの幅
- top = エキスパンド パネルの高さ - 折りたたみパネルの高さ
- MDE の
opt_expandedWidthとopt_expandedHeightの値の設定は基本的なエキスパンドの設定と異なります。エキスパンド パネルのサイズと一致するように設定するのではなく、メインパネルのサイズと一致するように設定します。これらの値の計算方法は次のとおりです。opt_expandedWidth= エキスパンド パネルの幅 +（エキスパンド パネルの幅 - 折りたたみパネルの幅）opt_expandedHeight= エキスパンド パネルの高さ +（エキスパンド パネルの高さ - 折りたたみパネルの高さ）
Enabler.setExpandingPixelOffsets(
200, // エキスパンドする広告の左オフセット
100, // エキスパンドする広告の上オフセット
700, // 広告がエキスパンドしたときの幅
350); // 広告がエキスパンドしたときの高さ
// エキスパンド状態で開始するかどうか。デフォルトは false です。
Enabler.setStartExpanded(false);
// ページ上の広告の位置に基づく、利用できる最適な方向で
// 多方向エキスパンドを有効にします。
// デフォルトは false です。
Enabler.setIsMultiDirectional(true);
if (Enabler.isInitialized) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
function enablerInitHandler() {
// イネーブラーが初期化されたら
// クリエイティブ要素を読み込むコードを追加します。
}
エキスパンドの方向に応じて、メインパネル上のエキスパンド パネルの位置を変更する必要があります。このためには、getExpandedDirection イネーブラー メソッドを使用してエキスパンドの方向を判別し、それに従って EXPAND_START イベントのトリガ時にクリエイティブを変更します。上記の CSS の例では、エキスパンドの方向ごとに別々のクラスが設定されています。下記のコードでは、エキスパンドの方向に基づいて className がエキスパンド パネル オブジェクトに割り当てられます。
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
function() {
document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
// 必要なエキスパンド アニメーションのためのコードを追加します。
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
function() {
// エキスパンド パネルを表示して要素を読み込むか、または
// アニメーションを開始するコードを追加します。
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
MDE クリエイティブをローカルでプレビューする際は、広告をエキスパンドするたびに、すべての有効なエキスパンドの方向が表示されます。表示される順序は次のとおりです。
- tl: 左上
- tr: 右上
- bl: 左下
- br: 右下
Studio でプレビューする際は、Studio で検出された方向のみが表示されます。異なる方向をテストしてプレビューするには、プレビュータブにクリエイティブを配置して各方向をテストする必要があります。