建立自訂動作

 

你可以利用 JavaScript 建立自訂動作。定義自訂動作後，您就可以在文件中重複使用這類動作。

如何建立自訂動作：

1. 如要新增事件，請按一下「事件」面板底部的「新增事件」按鈕 。
2. 選取目標和事件。
3. 在動作部分，依序選取 [自訂] > [新增自訂動作]。此時 Google Web Designer 會提示您輸入自訂程式碼。
   
4. 在程式碼方塊上方的欄位中輸入動作名稱 (gwd. 前置字元後方)。
   • 文件中每個自訂動作的名稱皆不得重複。
   • 名稱應含有足以讓人識別自訂動作的描述。
   • 如果您輸入的名稱無效 (例如內含空格的名稱)，系統會以紅色底線標示欄位。
5. 在程式碼方塊中定義函式。您可以參考 Component API 說明頁面，其中列有各個元件可用的屬性、事件和方法。
6. 按一下 [確定]。

系統會將您新增的事件設為使用自訂動作，並將這個動作列於「自訂」之下供其他事件使用。

如需調整對話方塊大小，只要拖曳對話方塊右下角即可。

範例

自訂動作與元件搭配使用即可擴充 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。
• 在自訂程式碼中替換每個畫格的說明文字。

在暫停兩秒之後前往廣告的下一頁

請新增下列事件：

目標	page1 (或您的起始頁面 ID)
事件	依序選擇 [頁面] > [準備顯示頁面]
動作	依序選擇 [自訂] > [新增自訂動作]
自訂程式碼	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

如何使用這個程式碼：

• 將 page1 替換成起始頁面 ID。