动态添加追踪码

最新推荐文章于 2025-05-05 14:40:16 发布

原创最新推荐文章于 2025-05-05 14:40:16 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

工作记录专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在网页按钮上动态添加追踪码的技术方案，利用jQuery实现点击“发联系信”按钮时，在不同URL环境下自动添加特定追踪参数，包括使用正则表达式处理复杂URL结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间做了一个需求，要求在不同页面的“发联系信”按钮上添加Source追踪码，而且不能直接在页面里添加，就是查看源码是看不到追踪码，是需要通过点击按钮动态添加到地址栏上；

比如 http://wangmei.youkuaiyun.com 这个页面有一个“发联系信”按钮；
jquery代码如下：

var url = location.href;    //获取当前页面url
var addSource = function(val){  //创建一个添加追踪码的方法
    $('.js-source').on('click',function(e){
        e.preventDefault();    //阻止默认事件，像a标签默认事件是点击打开href里的地址

        var btnUrl = $(this).attr('href');     //获取当前a标签href属性
        btnUrl = btnUrl + '?source=' + val;    //把追踪码添加在href值上

        if($(this).attr('target') == '_blank'){//判断当前a标签是否新窗口打开
            window.open(btnUrl);               //如果是则新窗口打开这个拼接好的href值
        }else{
            location.href = btnUrl;           //如果不是则当前窗口打开，把当前url替换成href值
        }
    });
};

if(url.indexOf(wangmei) >= 0){ //在当前URL里检索是否有wangmei这个代码，如果有则把变量value的值拼接到按钮href上
   var value = 'CC01';
   addSource(value);
}

以上是简单的在按钮上动态添加追踪码事件；

还有一种情况就是URL内包含这个字符串，想要分别对下面这两个URL设置不同的追踪码，indexOf就不能满足我这个需求了；
比如：http://wangmei.youkuaiyun.com 和 http://wangmej/blog/.youkuaiyun.com
这个时候我们可以使用正则来处理，第二个URL我们还可以使用indexOf来处理，重点讲下第一种如何区分；
正则如下：

var  url = location.href;
var reg  = /^http(s)?:\/\/[a-z]+.[a-z]+.net(\/)?/;

可以通过这种方式在浏览器验证一下，自己写的正则是否匹配当前URL;
这里写图片描述

if(reg.test(url)){  //test()查找的字符串是否匹配前面的正则，返回布尔值；
    var value = 'PY08';
    addSource(value);
}

这种写法也比较适合那些动态变化的URL；
比如： https://xiaoming.youkuaiyun.com 、https://yangming.youkuaiyun.com 等等……

更新~
今天测试又发现新的问题，触屏端展示厅，需要在首页、产品列表、公司信息、联系方式四个页面底部的“发联系信”工具上添加追踪码，请看下图；
这里写图片描述
下面分别对应四个页面的链接，从链接上看除首页其它三个页面可以通过indexOf()检索出url中是否有 catalog、info、contact，就可以满足我的需求；
https://3g.made-in-china.com/company-wangmei1988/
https://3g.made-in-china.com/company-wangmei1988/catalog-1.html
https://3g.made-in-china.com/company-wangmei1988/info.html
https://3g.made-in-china.com/company-wangmei1988/contact.html

但是首页就不行，必须写一个正则；
var reg = /^http(s)?:\/\/3g.made-in-china.com\/company-[\w]+(\/)?/;
这样就能完美匹配到首页啦，可是出现了这样的一个URL，而且这种URL出现的合情合理，从URL可以看出focus-est01其实是客户的用户名，在这段代码中中间的横杠（-）可以出现在任意地方，可以出现任意次，这时我的正则就没法满足了；
https://3g.made-in-china.com/company-focus-test01/

好在这四个页面的代码相对独立，解决办法是在首页添加了一个隐藏域，通过值来判断是否是首页来添加追踪码，可以说是完美解决了这个问题，还想说的是不能把自己绕进去了，可能做这次需求用的较多的就是正则，所以碰到这种情况很自然就想到用正则来解决，但正则也不是万能的，还是需要根据业务本身找到解决办法；