首页 > 其他分享 >干货:如何在前端统计用户访问来源?

干货:如何在前端统计用户访问来源?

时间:2023-10-11 10:33:46浏览次数:34  
标签:获取 URL 前端 访问 干货 Referer 日志 解析

在前端统计用户访问来源是一个常见的需求,通过获取访问来源信息,我们可以了解用户是通过直接访问、搜索引擎、外部链接等途径进入我们的网站或应用。下面是一个详细的介绍,包括方法和实现步骤。

一、获取HTTP Referer

HTTP Referer是HTTP请求头的一部分,它记录了用户从哪个页面跳转而来。我们可以通过获取Referer来统计用户的访问来源。下面是实现步骤:

1. 使用JavaScript获取Referer:在前端代码中,使用document.referrer可以获取到当前页面的Referer。这个值是一个URL字符串,包含了用户上一个页面的地址。

2. 解析Referer获取相关信息:通过解析Referer字符串,可以获取到相关的信息,例如域名、搜索关键词等。

3. 将获取到的信息发送到后端进行存储和统计:将解析得到的访问来源信息通过Ajax等方式发送到后端,后端进行处理、存储和统计。

二、利用utm_campaign等参数

除了获取HTTP Referer,我们还可以通过在URL中添加utm_campaign、utm_source等参数来标识访问来源。这些参数可以在URL中自定义添加,并在后端进行解析和存储。下面是实现步骤:

1. 在URL中添加自定义参数:比如可以在外部链接中添加utm_campaign表示广告系列,utm_source表示广告来源等。

2. 后端解析URL参数:后端接收到请求后,解析URL中的参数,获取到访问来源相关信息。

3. 存储和统计信息:将解析得到的信息进行存储和统计,可以使用数据库、日志文件等方式。

三、结合服务器日志

除了前端获取访问来源信息,我们还可以利用服务器日志来获取相关信息。服务器日志记录了用户请求的信息,包括请求的页面、来源URL等。下面是实现步骤:

1. 配置服务器日志:在服务器配置中开启日志记录功能,并设置记录的详细程度。

2. 解析服务器日志:通过解析服务器日志文件,提取出需要的访问来源信息。

3. 存储和统计信息:将解析得到的信息进行存储和统计,可以使用数据库、日志文件等方式。

四、结合第三方工具

除了自己实现访问来源统计,我们还可以使用一些第三方工具来简化操作。例如,Google Analytics、百度统计等工具可以提供详细的访问来源分析报告,我们只需在网页中添加相应的跟踪代码即可。

总之,在前端统计用户访问来源时,我们可以通过获取HTTP Referer、利用utm_campaign等参数、结合服务器日志、使用第三方工具等方式来实现。根据具体需求和技术场景,

选择适合的方法来进行实现和统计分析。记得遵循隐私保护和合规的原则,确保用户信息的安全和合法性。

 

本文原文来自:薪火数据   干货:如何在前端统计用户访问来源? (datainside.com.cn)

标签:获取,URL,前端,访问,干货,Referer,日志,解析
From: https://www.cnblogs.com/datainside/p/17756467.html

相关文章

  • 解决前端传递Date类型时自动转换为国际时间的问题
    本质原因是前端对象中使用了Data类型的属性字段,在向后端传递时会自动将JSON对象转换为JSON字符串进行传递Date类型的属性在进行转换时会调用自身的toJSON方法,转换为国际时间的字符串表达形式letdate=newDate();console.log(date);console.log(JSON.stringify(date));导......
  • # yyds干货盘点 #盘点一个Python自动化办公Excel数据填充实战案例(下篇)
    大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Python自动化办公的问题,一起来看看吧。上一篇【论草莓如何成为冻干莓】大佬给出的方法太深奥了,粉丝没有看懂,这一篇文章,一起来围观大佬在粉丝的代码基础上进行修改出正确的代码。二、实现过程这里是【论草莓......
  • 在DC上使用管理员账号,激活系统时出现““Windows 无法访问指定设备、路劲或文件。你可
    1.在增加语言选择是,也会遇到类似错误:2.在管理工具中,找到“本地安全策略”:3.进入本地策略->安全选项->用户帐户控制:用于内置管理员帐户的管理员批准模式 ->启用......
  • 前端如何实现大文件上传
    在开发过程中,经常会遇到一些较大文件上传,如果只使用一次请求去上传文件,一旦这次请求中出现什么问题,那么无论这次上传了多少文件,都会失去效果,用户则需要重新上传所有资源。所以就想到一种方式,将一个大文件分成多个小文件,这样通过多个请求实现大文件上传。接下来我们就来看看具体......
  • vconsole 前端调试神器,h5页面调试工具
    npminstallvconsole在需要的页面引入,并初始化<script> importVconsolefrom'vconsole'; exportdefault{ created(){ letvConsole=newVconsole(); } }</script>先安装vconsole组件,然后vue页面调用即可,注意一定要放在created方法里面。否则......
  • 前端网页sessionStorage对值的获取与传值
    前端网页sessionStorage对值的获取与传值sessionStorage主要在页面之间进行值得传输·允许跨页面。可以是单个值,以及JSON对象的传递,主要方法有这些sessionStorage[key]=val//保存一个数据sessionStorage.setItem(key,val)//保存一个数据varval=sessionStorage[key]//读取一个数......
  • 前端讲义10_HTTP Request header
    前端讲义10_HTTPRequestheader把Requestheader进行分类,比较清晰记忆。监控打开URLhttps://blog.csdn.net/msh2016Cache头域If-Modified-Since作用:把浏览器端缓存页面的最后修改时间发送到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。......
  • 前端大文件上传方法
    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会......
  • 前端面试八股文 工程化+性能优化+计算机基础
    前端面试八股文工程化+性能优化+计算机基础前端页面性能如何优化?以下是一些前端性能优化的常用方法:减少资源加载时间:这可以通过多种方式实现,比如压缩和合并CSS和JavaScript文件,使用CDN(内容分发网络)来快速传输资源,以及使用浏览器缓存来避免重复下载。优化图片:图片通常是网页......
  • 前端面试八股文 Vue
    前端面试八股文Vue讲一下Vue框架的原理?我们使用Vue开发应用,实际上是编写若干Vue组件,实现模板、data、生命周期钩子等,然后执行newVue(),将根组件挂载到指定的DOM节点上面,当我们编写的组件中生命周期钩子里面的或者在模板的元素事件中改变数据时候,视图会响应地更新。这样就实现了......