閉じるボタンを追加する

デスクトップ ブラウザまたはモバイル ブラウザに配信する場合は、ユーザーがクリエイティブを閉じて広告の背面にあるページ コンテンツを閲覧できるよう、閉じるボタンを必ず追加する必要があります。

Google Web Designer で閉じるボタンを追加する

1. ユーザーがクリックまたはタップするための閉じるボタンや、閉じる操作を表現するその他の明確な視覚要素を作成します。たとえば、テキストベースの閉じるボタンには、[X を閉じる] のようなテキストを表示するのが一般的です。
2. [コンポーネント] パネルからステージにタップ領域コンポーネントをドラッグし、閉じるボタン要素の上に配置します。
3. [イベント] パネルで新しいイベントボタンをクリックします。
4. [イベント] ダイアログで、次のオプションを選択します。

   ターゲット	TapArea コンポーネント（gwd-taparea_1）
   イベント	[タップ領域] > [タップ / クリック]
   操作	[カスタム] > [カスタム操作を追加]

5. [カスタムコード] ウィンドウで、カスタム関数の名前（たとえば「closead」）を指定し、コードボックス内に次のコードを貼り付けます。
   Enabler.reportManualClose();
Enabler.close();
6. [OK] をクリックします。

 

HTML、CSS、JavaScript で閉じるボタンを追加する

1. <div> タグを使用して、クリエイティブにボタン要素を作成します。HTML ファイルに要素を作成し、CSS ファイルでスタイルを設定します。この要素に、ID close-btn を割り当てます。

   HTML ファイルの <div> タグの例

   <div id="close-btn"></div>

   CSS ファイルでのスタイル設定と ID セレクタの例

   #close-btn {
     position: absolute;
     width: 20px;
     height: 18px;
     top: 0px;
     left: 278px;
     cursor: pointer;
     z-index:220;
     background-image: url('close.png');
     background-repeat: no-repeat;
   }

2. イベントを記録してからクリエイティブを閉じるため、JavaScript に reportManualClose メソッドと close メソッドを追加します。

   クリエイティブを閉じてイベントをトラッキングする場合のコードの例

   function closeHandler() {
     Enabler.reportManualClose(); 
     Enabler.close();
   }
   
   document.getElementById('close-btn').addEventListener('click', closeHandler, false);
   

クリエイティブがアプリ内で配信される場合に閉じるボタンを非表示にする

クリエイティブがモバイルアプリ内で配信される場合、モバイルアプリ広告 SDK によって、クリエイティブの上に独自の閉じるボタンが自動的に追加されます。クリエイティブ内にすでに閉じるボタンが含まれている場合、そのクリエイティブには閉じるボタンが 2 つ表示されることになります。MRAID の閉じるボタンを非表示にするには、イネーブラーのメソッド setUseCustomClose を使用します。

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // MRAID の閉じるボタンを非表示にして、代わりにクリエイティブの閉じるボタンを使用します。
    Enabler.setUseCustomClose(true);
  }
};