如何修改JavaScript实现Unbounce按钮链接的Google跨域测量装饰？

问题场景 #

• 用Unbounce搭建着陆页，按钮跳转至不同域名的注册页，依赖Google跨域测量（Cross Domain Measurement）追踪用户行为。
• 顶部按钮存在Unbounce特性：点击后先跳转至隐藏子目录，再重定向至注册页，导致Google Linker无法自动装饰链接（无_gl参数），无法追踪流量；底部按钮无此问题，链接可正常被装饰。
• 现有代码仅适配表单重定向场景，无法解决按钮的隐藏子目录重定向问题，需调整代码实现按钮链接的正确装饰。

现有代码 #

<script>
  $('.lp-pom-button, .lp-pom-text a, .lp-pom-image a').click(function(event) {
    var parentClass = $(this).parent().attr('class');
    
    var isFormRedirect =
      parentClass === 'lp-element lp-pom-form' &&
      window.module.lp.form.data.confirmAction === 'url' &&
      lp.jQuery('form').valid() === true;

    if (isFormRedirect) {
      ga(function(tracker) {
        var linker = new window.gaplugins.Linker(tracker);
        window.module.lp.form.data.confirmData = linker.decorate(window.module.lp.form.data.confirmData);
      });
    } else {
      ga('linker:decorate', this);
    }
  });
</script>

解决方案 #

针对Unbounce按钮的隐藏重定向特性，需要拦截点击事件，手动获取目标URL并装饰，再执行跳转。修改后的代码如下：

<script>
  $('.lp-pom-button, .lp-pom-text a, .lp-pom-image a').click(function(event) {
    var $element = $(this);
    var parentClass = $element.parent().attr('class');
    
    var isFormRedirect =
      parentClass === 'lp-element lp-pom-form' &&
      window.module.lp.form.data.confirmAction === 'url' &&
      lp.jQuery('form').valid() === true;

    if (isFormRedirect) {
      ga(function(tracker) {
        var linker = new window.gaplugins.Linker(tracker);
        window.module.lp.form.data.confirmData = linker.decorate(window.module.lp.form.data.confirmData);
      });
    } else {
      // 拦截默认跳转行为
      event.preventDefault();
      
      // 获取按钮的目标URL：适配Unbounce按钮的内部存储
      var targetUrl;
      if ($element.hasClass('lp-pom-button')) {
        // Unbounce按钮的目标URL存储在data属性中
        targetUrl = $element.data('lp-pom-button').url;
      } else {
        // 普通链接直接取href
        targetUrl = $element.attr('href');
      }
      
      // 装饰URL并跳转
      ga(function(tracker) {
        var linker = new window.gaplugins.Linker(tracker);
        var decoratedUrl = linker.decorate(targetUrl);
        window.location.href = decoratedUrl;
      });
    }
  });
</script>

关键修改说明 #

1. 拦截默认行为：用event.preventDefault()阻止按钮的默认跳转，避免先跳隐藏子目录的流程。
2. 获取目标URL：针对Unbounce按钮，从其内部data-lp-pom-button属性中提取真实目标URL；普通链接直接取href。
3. 手动装饰并跳转：通过Google Linker装饰URL后，用window.location.href跳转到装饰后的地址，确保_gl参数被正确添加。

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