常見問題
arrow_back_ios
我可以在小工具事件上執行自訂 JavaScript 代碼嗎？
是的，您可以使用 JavaScript 回應各種小工具事件。 請前往小工具設定中的 小工具代碼 面板，然後點擊 + 事件處理 按鈕。 這將會把事件處理程式碼加入您的小工具代碼中。
此程式碼會在不同小工具事件發生時，將訊息記錄到主控台。
只需根據需要將這些事件處理器替換為您自己的程式碼即可。
可用的事件如下：
- INITIALIZED — 小工具載入時觸發。
- RESOURCE_GROUP_OPENED — 在目錄中開啟群組時觸發。會傳遞 名稱 和 resourceGroupId 參數。
- RESERVATION_STARTED — 開啟資源進行預訂時觸發。會傳遞 名稱 和 resourceId 參數。
- RESERVATION_SAVED — 從預訂畫面移至訂單畫面時觸發。會傳遞 名稱 和 resourceId 參數。
- INDIRECT_ORDER_STARTED — 支付表單出現且等待支付時觸發。
- ORDER_COMPLETED — 訂單成功完成時觸發。會傳遞 訂單號碼、總計 和 預付款 參數。
在小工具內插入程式碼
在某些情況下，您可能無法直接將帶有事件處理器的小工具代碼加入您的頁面。 例如當小工具安裝在社群網路上，或您提供給客戶的是小工具的直接連結時，會出現這種情況。 在這些情境下，您可以透過內部框架直接在小工具內執行您的程式碼。
為此，請勾選 使用內部框架處理回呼 的核取方塊：
接下來，您有兩個選擇：可以將處理程式碼放在您自己的網站上並指定 頁面網址，或直接將 頁面原始碼 插入小工具中。
建議使用第一種方式，因為您的程式碼會從您自己的網域執行，並可存取瀏覽器中的使用者資料。 這讓您能夠識別使用者，對於分析系統來說非常有用。
如果您沒有網站，則可選擇第二種方式。在此情況下，所有來自小工具頁面的網址參數都會傳遞到內部框架。 例如，這對於處理來自小工具直接連結的 UTM 標籤是必要的。
內部框架的原始碼
請在內部框架中使用下方程式碼。 當小工具事件發生時，它同樣會將訊息記錄到主控台。
<html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
