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

exit を追加する

exit とは、クリックすると広告主のウェブサイトに移動する広告内の領域のことを指します。1 つの Studio クリエイティブに最大 100 個の exit を追加できるため、広告内からさまざまなウェブページにユーザーを誘導できます。たとえば、ソーシャル メディア ページへのリンク、広告主のウェブサイトへのリンク、CTA(行動を促すフレーズ)ボタンなどに個別に exit を設定し、それぞれをクリックしたユーザーの数をトラッキングできます。

exit は、すべてのクリエイティブに 1 つ以上追加する必要があります。exit はクリックタグに似ていますが、ランディング ページ URL をクリエイティブ コード内に指定する必要がない点が異なります。代わりに各 exit に名前を付けることで、キャンペーン レポートで識別できるようになっています。実際の URL は、クリエイティブを Studio にアップロードした後に指定します。この URL は後から Studio や キャンペーン マネージャーを使用して変更やカスタマイズを行うことが可能で、クリエイティブ コードを編集する必要はありません。

Google Web Designer を使用して exit を追加する

  1. 広告に、行動を促すフレーズが含まれていることを確認します。行動を促すフレーズは、ユーザーがクリックまたはタップできるボタンや、はっきりとした視覚的な要素である必要があります。
  2. [タップ領域] コンポーネントを、[コンポーネント] パネルの [操作] フォルダからステージにドラッグして行動を促すフレーズに重ねて配置します。
  3. [イベント] パネルで。新しいイベントボタン をクリックします。
  4. イベント ダイアログで、以下の設定を選択します。
    ターゲット タップ領域コンポーネント(gwd-taparea_1
    イベント [タップ領域] > [タップ / クリック]
    操作

    [Google 広告] > [広告を終了]

    注: 同様の操作である [広告を終了(URL を上書き)] では、スタジオやキャンペーン マネージャー内など、クリエイティブ外の URL は変更できません。ダイナミック広告でのみ使用します。

    レシーバー gwd-ad
    設定
    • 指標 ID - レポートをわかりやすくするためのラベル(「CTA」など)。
    • URL - exit URL。
    • 終了時に元に戻す - エキスパンド広告の場合、この設定をオンにすると、ユーザーが広告を閉じたときに広告が折りたたまれます。
    • 終了時にメディアを一時停止 - オンにすると、ユーザーが広告を閉じたときに動画や音声の再生が停止します。
    • 終了時に折りたたまれたページ - エキスパンド広告の場合に、ユーザーが広告を閉じたときに表示するページ。

クリエイティブを Studio にアップロードしたら、クリエイティブ ワークフローの [イベントの編集] ステップで exit の詳細情報を確認し、必要に応じて URL を編集します。

HTML エディタを使用して exit を追加する

exit の追加は 2 段階で行います。まず、HTML5 で exit 名を定義します。次に、クリエイティブを Studio にアップロードし、定義した exit にリンク先 URL を追加します。デフォルトでは、キャンペーン マネージャー内で URL を変更することもできます。

  1. <div> タグを使用して、クリエイティブ内にボタン要素を作成します。HTML ファイルに要素を作成し、ID を bg-exit とします。
    <div id="bg-exit"></div>
    exit にアンカータグ(<a> </a>)を使用しないでください。 Studio は、さまざまなブラウザやプラットフォームに対応できるように、カスタムコードを使用して URL を開きます。HTML アンカータグを使用すると、1 つのリンクから 2 つのタブまたはウィンドウが開くことになります。
  2. CSS を使用してボタンのスタイルを設定します。

    #bg-exit {
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  3. JavaScript ファイルで、exit メソッドを呼び出して exit をボタンに割り当てます。exit メソッドを使用するには、まずクリエイティブに Studio のイネーブラーを追加する必要があります。

コード例
function bgExitHandler(e) {
  Enabler.exit('Background Exit');
}

document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

このメソッドで exit に付けた名前(この例では「Background Exit」)が Studio 内で表示されます。この名前は Studio や キャンペーン マネージャー内で変更することが可能で、最終的なレポートに反映されます。

exit のテスト

クリエイティブに追加したすべての exit は、QA チームでテストされます。QA 時に頻出する修正を回避するためのおすすめの方法をご紹介します。

  • クリック可能な exit 要素を、クリエイティブ内の他の要素の上に配置します。exit の上にクリック可能な別の要素を配置すると、exit は機能しなくなります。
  • クリエイティブをローカルで実行する際や スタジオにアップロードする際に、追加した exit を毎回テストします。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。