入門

概述

Wix Form Webhook 源可將基於 Wix Form 實現的表單的提交事件同步到 TTO CDP 中。

配置參數

WIX 表單類型

1. 一般表單

特徵：一般是頁面直接顯示的表單，或者在 WIX 網頁編輯器中非燈箱區域查看的：

表單内的輸入框或選項可以通過 WIX的 velo 頁面程式碼進行讀寫。

2. 嵌入燈箱的表單（lightbox）

特徵：一般由頁面中點擊按鈕，頁面URL不改變顯示，或者在 WIX 網頁編輯器中燈箱欄位可查看：

表單内的輸入框或選項不可通過 WIX的 velo 頁面程式碼進行讀寫。

源配置指南

配置自定義程序碼

1. 進入 WiX 後臺的 設定 - 開發與整合 - 自定義程式碼

2. 選擇 添加自定義程式碼，設置以下代碼，設置應用範圍，選擇將編碼置於本文開頭，套用

//在此貼上代碼片段
<script>
(function() {
  // 从 Cookie 获取 _ttoclid
  const getCookieValue = (name) => {
console.log('啓動')
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  };
  
  const cdpid = getCookieValue('_ttoaid');
  if (cdpid) {
    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search);
    // 设置 ttoclid 参数
    params.set('cdpId', cdpid);
    url.search = params.toString();
    // 更新 URL
    history.replaceState({}, '', url);
    console.log('已从 Cookie 设置 cdpId:', cdpid);
  }
})();
</script>

配置 WiX Form 的 CDP ID 欄位（燈箱表單不需要）

1. 參考圖片中的樣式在Wix Form中新建一個文字欄位

2. 頁面右下角設置輸入欄屬性，將其隱藏，記住輸入欄ID（#input5）

3. 左側頁面程式碼中選擇頁面，注意：masterPage.js是所有頁面共享脚本，如果所有頁面都是同一份表格并且欄位編號相同可以在此設置，否則建議逐個在各個頁面中設置脚本。

4. 在下面頁面程式碼中貼上代碼，注意這裏 $w("#input5") 中的ID改成實際ID

//此行代碼複製到onReady外代碼區頂部，用以導入模塊
import wixLocation from "wix-location";

// 以下代碼複製到onReady中，當頁面加載時，檢查 ttoclid 查詢參數
const query = wixLocation.query;
if (query.cdpId) {
    console.log('預設cdp id')
    $w("#input5").value = query.cdpId;
}

根據 WiX Form 欄配置源

1. CDP ID key：

   事件数据中作为cdp id值（anonymous id）的字段。由於燈箱表單不需要設置 wix 表單的cdp id欄位，因爲是必填參數，所以配置燈箱表單時默認設置為’cdp id’即可。

2. Traits Set：

   在Wix網站編輯中找到對應的Wix Form，查看每個欄位的提交字段名，例如以下舉例Email=email,Phone=phone，將表單提交字段名和traits字段名映射關係設置好。注意traits字段一般以個人信息爲主包括如下圖所示這些字段，表單内不相關字段請勿設置

埋点指南

1. 進入Wix Studio 後臺的自動化功能

2. 点击右上角建立新自动化功能

3. 选择从头开始

4. 第一个选择`表单已提交`操作，指定对应的Wix form表单

5. 第二个选择`发出HTTP请求`操作，填入已配置的源的webhook地址