如何为Wix表单添加UTM标签并解决Webhook数据源异常问题

核心问题分析 #

你的代码存在以下关键问题，导致UTM参数无法正确传递到Webhook：

1. 代码结构混乱：多个$w.onReady回调重复执行，存在冗余import语句和语法错误（如中间多余的});），引发变量作用域冲突、逻辑执行顺序混乱。
2. UTM参数未持久化：仅在页面加载时读取URL参数，用户在网站内跳转后UTM参数会丢失，无法在表单提交时获取原始来源。
3. 来源数据未加入Webhook：当前代码仅收集表单字段值，未将UTM参数或来源信息合并到发送给Webhook的数据包中。
4. Referrer处理错误：直接使用wixWindow.referrer会获取跳转后的域名（如google.co.il），而非真正的广告/邮件来源，需结合UTM参数判断。

修复后的完整代码 #

// 统一导入所需模块
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
import { session } from 'wix-storage';

$w.onReady(function () {
    // 初始化UTM参数存储：优先从URL读取，无则从session获取
    const urlUtmParams = wixLocation.query;
    const storedUtmParams = JSON.parse(session.getItem('utmParams') || '{}');
    
    // 合并参数，新URL参数覆盖旧参数
    const utmParams = { ...storedUtmParams, ...urlUtmParams };
    
    // 保存到session，确保页面跳转后仍能获取
    session.setItem('utmParams', JSON.stringify(utmParams));

    // 可选：将UTM参数赋值到表单字段（如需在表单中显示）
    $w('#campaign').value = utmParams.utm_campaign || utmParams.campaign_name || '';
    $w('#source').value = utmParams.utm_source || '';
    $w('#refbox').value = wixWindow.referrer || '';
});

export function wixForms1_wixFormSubmitted(event) {
    // 收集表单字段数据
    const formData = {};
    event.fields.forEach(field => {
        formData[field.id] = field.fieldValue;
    });

    // 从session获取存储的UTM参数和来源信息
    const utmParams = JSON.parse(session.getItem('utmParams') || '{}');
    const referrer = wixWindow.referrer;

    // 合并表单数据、UTM参数、来源信息
    const webhookData = {
        ...formData,
        utm_source: utmParams.utm_source || '',
        utm_medium: utmParams.utm_medium || '',
        utm_campaign: utmParams.utm_campaign || utmParams.campaign_name || '',
        utm_term: utmParams.utm_term || '',
        utm_content: utmParams.utm_content || '',
        referrer_url: referrer,
        // 自动判断来源类型
        source_type: determineSourceType(utmParams, referrer)
    };

    // 发送Webhook
    fetch("https://hook.eu1.make.com/62tsltjotop6iwboufggguuxhhqrjaen", {
        method: "post",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(webhookData)
    })
    .then(httpResponse => {
        if (httpResponse.ok) {
            return httpResponse.json();
        } else {
            return Promise.reject(`HTTP错误: ${httpResponse.status}`);
        }
    })
    .then(json => console.log("Webhook发送成功:", json))
    .catch(err => console.error("Webhook发送失败:", err));
}

// 辅助函数：根据UTM参数和referrer判断来源类型
function determineSourceType(utmParams, referrer) {
    if (utmParams.utm_source === 'google' && utmParams.utm_medium === 'cpc') {
        return 'Google Ads';
    } else if (utmParams.utm_source === 'email' || referrer.includes('mail.') || referrer.includes('gmail.')) {
        return '邮件来源';
    } else if (referrer.includes('google.co.il')) {
        return 'Google自然搜索';
    } else {
        return '其他来源';
    }
}

关键修复点说明 #

1. 统一代码结构：合并所有初始化逻辑到单个$w.onReady，清理冗余代码，确保逻辑执行顺序清晰。
2. UTM参数持久化：使用session存储保存UTM参数，用户在网站内跳转后仍能获取原始来源参数。
3. 数据合并发送：表单提交时，将UTM参数、来源URL、自动判断的来源类型合并到Webhook数据包中，确保接收端拿到完整来源信息。
4. 来源类型自动判断：通过辅助函数结合UTM参数（如utm_source=google+utm_medium=cpc识别Google Ads）和referrer域名，精准区分不同来源类型。

测试与验证 #

• 使用带UTM参数的Google Ads链接访问页面（如?utm_source=google&utm_medium=cpc&utm_campaign=夏季促销），提交表单后检查Webhook接收的数据是否包含正确UTM信息和source_type: Google Ads。
• 使用邮件内的自定义UTM链接（如?utm_source=email&utm_medium=newsletter）测试，验证source_type是否识别为邮件来源。
• 查看浏览器控制台日志，确认Webhook发送状态，便于调试问题。

内容的提问来源于stack exchange，提问作者Hedva Nakache