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

 

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 に置き換えます。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。