イベントを利用すると、ユーザーのジェスチャーやタイムラインのキーフレームなど、広告または HTML ドキュメント内で発生する出来事に応じてアクションを設定できます。たとえば、広告のタッチイベントを使用してアニメーションの開始をトリガーできます。または、タイムライン上のイベント マーカーを設定したポイントで CSS の変更をトリガーすることもできます。
[イベント] ダイアログ
オブジェクトとアクションをイベントに関連付けるには、[イベント] ダイアログを使用します。[イベント] ダイアログは、イベントをセットアップするための以下の手順をガイドするインタラクティブなダイアログです。
- ターゲット: イベントをトリガーするオブジェクト（ボタンなど）を選択します。
- イベント: 検出対象のイベント（ユーザーによるボタンのクリックなど）を選択します。
- アクション: イベントの結果として発生するアクション（動画の再生など）を指定します。
- レシーバー: アクションを実行する要素（動画など）を選択します。
- 設定: アクションによっては、詳細情報の追加が必要です。
[イベント] ダイアログを使用してイベントを定義する方法をご確認ください。
必要なアクションが [イベント] ダイアログの一覧にない場合は、独自の JavaScript 関数を作成してカスタム アクションとして使用できます。ただし、この機能は AMPHTML 広告では使用できません。
[イベント] パネル
[イベント] パネルには、プロジェクト内のイベントが一覧表示されます（[イベント] パネルが表示されない場合は、[ウィンドウ] メニューから開くことができます）。
イベントを追加するには:
- パネルの下部にある「イベントを追加」ボタン
をクリックします。
をクリックします。イベントを編集するには、次のように操作します。
- [イベント] パネルでイベントをダブルクリックすると [イベント] ダイアログが開き、このダイアログで変更を加えることができます。
- イベントを右クリックして、ポップアップ メニューから [編集] をクリックすることもできます。
イベントを削除するには:
- パネルでイベントをクリックし、パネルの下部にある削除ボタン
をクリックします。
- イベントを右クリックして、ポップアップ メニューから [削除] をクリックすることもできます。
- 複数のイベントを削除するには、パネルでそれらのイベントを選択し、上記のいずれかの方法を使用します。
イベントのリストをフィルタリングするには:
- パネルの上部にあるプルダウンを使用すると、現在のページまたは選択したイベントのみが一覧表示されます。
- [イベントをフィルタリング] に要素 ID、イベントタイプ、アクションを入力することもできます。
イベントのターゲットを選択するには:
- イベントを右クリックして、ポップアップ メニューから [ターゲットを選択] をクリックします。
- ターゲットが非表示またはロックされている（または親要素が非表示になっているか、ロックされている）場合は、ポップアップ メニューに [ターゲットの表示と選択] または [ターゲットのロック解除と選択] のオプションが表示されます。
イベントのレシーバーを選択するには:
- イベントを右クリックして、ポップアップ メニューから [レシーバーを選択] をクリックします。
- レシーバーが非表示またはロックされている（または親要素が非表示になっているか、ロックされている）場合は、ポップアップ メニューに [レシーバーを表示して選択] または [レシーバーをロック解除して選択] のオプションが表示されます。
[イベント] パネルから要素を選択する
- 別のページでターゲットまたはレシーバーを選択すると、ステージはそのページに切り替わります。
- 複数のターゲットやレシーバーを同時に選択することはできません。
イベントをプレビューする
Google Web Designer インターフェースでは、イベントのプレビューはできません。実際のイベントを確認するには、ブラウザでプロジェクトをプレビューしてイベントをトリガーします。