Wix Velo中带预设链接按钮无法触发onClick读取UTM参数问题

问题描述 #

我需要把URL查询参数中的UTM参数传递到跳转页面，已经完成以下操作：

• 从当前URL查询中读取UTM参数
• 将参数存入sessionStorage
• 计划在按钮点击时从存储读取参数并追加到跳转URL

相关代码如下：

masterPage.js #

import wixLocation from 'wix-location';
import { session } from "wix-storage-frontend";

$w.onReady(function () {
    const urlQuery = wixLocation.query;

    if (urlQuery) {
        session.setItem('utm_source', urlQuery.utm_source || '');
        session.setItem('utm_medium', urlQuery.utm_medium || '');
        session.setItem('utm_campaign', urlQuery.utm_campaign || '');
        session.setItem('utm_term', urlQuery.utm_term || '');
        session.setItem('utm_content', urlQuery.utm_content || '');
    }

    // 其他代码
});

Pricing页面代码 #

import wixLocationFrontend from 'wix-location-frontend';
import { session } from "wix-storage-frontend";

const LINKS = {
  basic: "http://url",
  pro: "https://url",
  growth: "https://url"
};

$w.onReady(() => {
  $w("#repeater1").onItemReady(($item, itemData) => {

    $item("#button48").onClick(() => {
      console.log("button clicking")

      const plan = itemData.plan;
      const base = LINKS[plan];

      const params = [];
      ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"]
        .forEach(k => {
          const v = session.getItem(k);
          console.log("utm", k, v);  
          if (v) params.push(`${k}=${encodeURIComponent(v)}`);
        });

      const finalUrl = params.length
        ? `${base}?${params.join("&")}`
        : base;

      console.log("Redirecting:", finalUrl);
      wixLocationFrontend.to(finalUrl);
    });

  });
});

目前UTM值已正确存入sessionStorage，但按钮的onClick事件未触发——因为按钮在Wix编辑器中已配置了预设链接，点击时会直接执行默认跳转，不会触发自定义的JS逻辑。请问在Wix Velo中，当按钮已有预设链接时，如何修改跳转URL并追加UTM参数？

解决方法 #

核心问题原因 #

Wix编辑器中给按钮设置的预设链接会优先触发默认跳转行为，直接绕过自定义的onClick事件回调。要让自定义逻辑生效，必须先处理这个冲突。

具体实现步骤 #

1. 移除编辑器中的按钮预设链接
   打开Wix编辑器，选中目标按钮（#button48），在右侧面板的「链接」设置中，清空已配置的链接（选择「无链接」）。这是让自定义onClick逻辑生效的前提。

2. 优化代码逻辑（可选但推荐）

   • 移除不必要的模块导入：前端跳转仅需导入wixLocationFrontend即可，无需重复导入wixLocation；
   • 用更简洁的方式处理UTM参数的读取与拼接：

   修改后的Pricing页面代码：

   import wixLocationFrontend from 'wix-location-frontend';
   import { session } from "wix-storage-frontend";
   
   const LINKS = {
     basic: "http://url",
     pro: "https://url",
     growth: "https://url"
   };
   
   $w.onReady(() => {
     $w("#repeater1").onItemReady(($item, itemData) => {
       $item("#button48").onClick(() => {
         const baseUrl = LINKS[itemData.plan];
         if (!baseUrl) return;
   
         // 收集非空的UTM参数
         const utmParams = Object.fromEntries(
           ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"]
             .map(key => [key, session.getItem(key)])
             .filter(([_, value]) => value)
         );
   
         // 拼接最终URL
         const url = new URL(baseUrl);
         Object.entries(utmParams).forEach(([key, value]) => {
           url.searchParams.append(key, encodeURIComponent(value));
         });
   
         console.log("Redirecting to:", url.toString());
         wixLocationFrontend.to(url.toString());
       });
     });
   });
   

3. 验证效果
   保存代码并预览站点，携带UTM参数访问页面后点击按钮，查看控制台输出的最终URL，确认UTM参数已正确追加，且跳转行为符合预期。

补充说明 #

如果出于特殊原因必须保留编辑器中的预设链接（不推荐），可以尝试通过事件阻止默认行为的方式覆盖，但Wix的按钮默认跳转行为在底层做了拦截，这种方法稳定性较差，因此优先推荐清空预设链接的方案。

内容的提问来源于stack exchange，提问作者sumanth.js