カスタム アクションを作成する

 

JavaScript を使用して、独自のカスタム アクションを作成できます。定義したカスタム アクションはドキュメント内で再利用できます。

カスタム アクションを作成するには:

1. [イベント] パネルの下部にある「イベントを追加」ボタン をクリックして、新しいイベントを追加します。
2. ターゲットとイベントを選択します。
3. そのアクションについて、[カスタム] > [カスタム アクションを追加] を選択します。Google Web Designer で、カスタムコードを入力するように求められます。
   
4. コードボックスの上にある項目に（gwd. プレフィックスに続けて）アクションの名前を入力します。
   • それぞれのカスタム アクションには、ドキュメント内で固有の名前を付ける必要があります。
   • 名前は内容がわかりやすいものにします。
   • スペースが含まれているなど、無効な名前を入力すると、項目に赤色の下線が表示されます。
5. コードボックスに関数の定義を入力します。各コンポーネントの API では、各コンポーネントで利用できるプロパティ、イベント、メソッドの一覧を確認できます。
6. [OK] をクリックします。

イベントがカスタム アクションを使用するように構成されます。このアクションは [カスタム] に一覧表示されている他のイベントでも使用できます。

ダイアログ ボックスのサイズを変更するには、右下隅をドラッグします。

例

カスタム操作は、Google Web Designer の機能を拡張するコンポーネントと併用することができます。下記の例ではいずれも、操作を適用するドキュメント内の要素を document.getElementById メソッドを使用して指定します。

動画を再生するたびにミュートを解除する

次のイベントを追加します。

ターゲット	gwd-video_1（または動画の ID）
イベント	[動画] > [一時停止後の再生]
アクション	[カスタム] > [カスタム アクションを追加]
カスタムコード	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

このコードを使用するには、次のようにします。

• gwd-video_1 を動画の ID に置き換えます。

スワイプ ギャラリーの各フレームで字幕を表示する

次のイベントを追加します。

ターゲット	gwd-swipegallery_1（またはスワイプ ギャラリーの ID）
イベント	[スワイプ ギャラリー] > [フレームの表示]
アクション	[カスタム] > [カスタム アクションを追加]
カスタムコード	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

このコードを使用するには、次のようにします。

• gwd-swipegallery_1 をスワイプ ギャラリーの ID に置き換えます。
• caption-div を、字幕を表示するテキスト要素の ID に置き換えます。
• カスタムコードで各フレームの字幕テキストを置き換えます。

2 秒間一時停止した後、広告内の次のページに移動する

次のイベントを追加します。

ターゲット	page1（または開始ページの ID）
イベント	[ページ] > [ページの表示の準備完了]
アクション	[カスタム] > [カスタム アクションを追加]
カスタムコード	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

このコードを使用するには、次のようにします。

• page1 を開始ページの ID に置き換えます。