Google Web Designer ライトボックス作成ガイド

このガイドでは、Google Web Designer(GWD)を使用して Google ディスプレイ ネットワーク用のカスタム ライトボックス広告を作成する方法について説明します。Google Web Designer には、すぐに使用できるコンポーネントが用意されているため、カスタムコードを作成する手間を軽減して、スタジオにクリエイティブを直接公開できます。

広告ユニットをデザインする際は、ライトボックス広告の技術要件とポリシーに準拠してください。

手順 1: 新しいファイルを作成する

  1. Google Web Designer で新しいエキスパンド クリエイティブを作成します。[展開モード] プルダウンで [全画面ライトボックス] を選択します。
  2. エキスパンド サイズを入力します(例: 800x500)。
     
    エキスパンド サイズは扱いやすい任意のサイズにすることができますが、このサイズは展開時に無視されます。Fullscreen API では、すべてのデバイスにおいて全画面サイズが使用されます。
  3. 名前を入力して、他のファイル プロパティを選択し、[OK] をクリックします。

バナーページとエキスパンド ページの 2 つが作成されます。

手順 2: 閉じるボタンを削除する

  1. ステージ下部のページ インジケーターをクリックして、エキスパンド ページに切り替えます。
  2. 閉じるボタンのタップ領域を削除します。閉じるボタンは、Lightbox API で自動的に追加されるため必要ありません。

手順 3: タッチ対応のデバイスを検出する

タッチデバイス検出コードを追加して、エキスパンドの行動を促すフレーズ(CTA)をデバイスに合わせて変更できます。クリエイティブが配信されるデバイスがタッチ操作に対応しているかどうかを検出するには、カスタムコードが必要です。

  1. バナーページに行動を促すテキスト要素を追加し、「cta_text」という名前を付けます。ID の名前は自由に指定できますが、次の手順で示すコードの ID と同じである必要があります。
  2. [イベント] パネルでプラス(+)ボタンを選択して、新しいイベントを追加します。
    1. ターゲットとして [バナーページ] を選択し、[ページ] > [有効化されたページ]、[カスタム] > [カスタム アクションを追加] を選択します。
    2. 関数に名前(例: 「updateCTA」)を付けて、次のコードをコピーして貼り付けます。
タッチ検出コード

if (('ontouchstart' in window)
    || window.DocumentTouch 
    && document instanceof DocumentTouch) {
  gwd.actions.events.getElementById("cta_text").textContent = "Tap to Expand";
} else {
  gwd.actions.events.getElementById("cta_text").textContent = "Hover to Expand";
};

 

以上が、さまざまな画面に対応したライトボックス クリエイティブの基本的な作成手順です。ここからさらにコンポーネントや視覚要素を追加して、固定のピクセルではなく割合を指定して配置するなどの作業に進むことができます。

Google Web Designer でメディアクエリを使用してレスポンシブ クリエイティブをデザインする方法について

 

iOS のアプリ内 exit の修正

クリエイティブを iOS 環境に対してアプリ内配信する際に exit で折りたたみを呼び出すとランディング ページがすぐに閉じてしまう、という問題が報告されています。

iOS のアプリ内 exit を修正する方法
  1. exit を呼び出す前に配信環境を確認します。Google Web Designer で、カスタム関数内または exit 呼び出しの直前で「pageactivated」イベントを使用します。

    環境を検出するためのサンプルコード

    
    var standalone = window.navigator.standalone,
        userAgent = window.navigator.userAgent.toLowerCase(),
        safari = /safari/.test(userAgent),
        ios = /iphone|ipod|ipad/.test(userAgent);
    
    if (ios) {
      if (!standalone && safari) {
        gwd.iOSEnvironment = "web";
      } else if (standalone && !safari) {
        gwd.iOSEnvironment = "fullscreen";
      } else if (!standalone && !safari) {
        gwd.iOSEnvironment = "app";
      }
    }
  2. 各 exit 呼び出しの前に、広告の配信先が iOS のアプリ内かどうかを確認します。
    1. Google Web Designer で、タップ領域コンポーネントを使用している場合は、コードビューで手動でコードを編集します。タップ領域の関数名にはタップ領域 ID が使用されています(たとえば、「ExpandExitTaparea」という名前のタップ領域の関数名は「gwd.auto_ExpandExitTapareaAction」となります)。

      Google Web Designer で事前に定義されているタップ領域関数

      
      if (gwd.iOSEnvironment == "app") {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', false, true);
      } else {
        gwd.actions.gwdDoubleclick.exit('gwd-ad', 'My Exit', 'http://google.com', true, true);
      }
      exit メソッドの末尾に 2 つのブール値パラメータが追加されています。1 つ目のパラメータは折りたたむかどうかで、アプリ内クリエイティブでは false となります。2 つ目のパラメータはメディア(動画または音声)の再生を一時停止するかどうかで、すべてのクリエイティブで true となります。
  3. クリエイティブをアップロードしてテストを行い、ランディング ページが開いたままであることを確認します。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。