当前位置： 首页 > news >正文

个人网站制作 Part 14 添加网站分析工具 | Web开发项目

news 2025/6/20 7:27:08

文章目录

  • 👩‍💻 基础Web开发练手项目系列：个人网站制作
    • 🚀 添加网站分析工具
      • 🔨使用Google Analytics
        • 🔧步骤 1: 注册Google Analytics账户
        • 🔧步骤 2: 获取跟踪代码
      • 🔨使用Vue.js
        • 🔧步骤 3: 集成Google Analytics到Vue.js项目
    • 🚀 预览与保存
    • 🚀 下一步计划

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证、数据库集成、电子邮件通知、社交媒体集成、博客功能、用户评论功能、用户权限管理、文件上传功能和搜索功能。

在本篇中，我们将学习如何添加网站分析工具，使你能够更好地了解访客行为。

在这里插入图片描述

🚀 添加网站分析工具

🔨使用Google Analytics

🔧步骤 1: 注册Google Analytics账户

首先，确保你已经注册了Google Analytics账户，并创建了一个新的属性（网站）。

🔧步骤 2: 获取跟踪代码

在Google Analytics中获取你的网站的跟踪代码，然后将其添加到你网站的所有页面中。这通常是通过在每个页面的 <head> 标签中插入一段JavaScript代码来实现的。

🔨使用Vue.js

🔧步骤 3: 集成Google Analytics到Vue.js项目

在 index.html 文件的 <head> 标签中添加Google Analytics跟踪代码：

<head><!-- 其他标签 --><!-- Google Analytics跟踪代码 --><script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID"></script><script>window.dataLayer = window.dataLayer || [];function gtag() { dataLayer.push(arguments); }gtag('js', new Date());gtag('config', 'YOUR_GA_TRACKING_ID');</script>
</head>

确保将 YOUR_GA_TRACKING_ID 替换为你在Google Analytics中获得的实际跟踪ID。

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该能够在Google Analytics仪表板中看到有关访客行为的信息了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加社交分享功能，使你的网站更容易分享。记得继续关注本系列，为你的网站增添更多强大的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加网站分析工具使你更好地了解访客行为。祝你编码愉快，不断提升技能！

相关文章：

个人网站制作 Part 14 添加网站分析工具 | Web开发项目

文章目录 &#x1f469;‍&#x1f4bb; 基础Web开发练手项目系列&#xff1a;个人网站制作&#x1f680; 添加网站分析工具&#x1f528;使用Google Analytics&#x1f527;步骤 1: 注册Google Analytics账户&#x1f527;步骤 2: 获取跟踪代码 &#x1f528;使用Vue.js&#…...

编程日记 2024/3/22 8:55:24

数据按设定单位（分辨率）划分的方法

1. 问题描述 需要将使用公式计算后的float数值换算到固定间隔数轴的对应位置上的数据&#xff0c;比如2.186这个数据&#xff0c;将该数据换算到以0.25为间隔的数轴上&#xff0c;换算后是2.0&#xff0c;还是2.25呢&#xff1f;该方法就是解决这个问题。 2. 方法 输入&…...

编程日记 2024/3/22 8:52:22

Ubuntu 搭建gitlab服务器，及使用repo管理

一、GitLab安装与配置 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 1、安装Ubuntu系统&#xff08;这个教程很多&#xff0c;就不展开了&#xff09;。 2、安装gitlab社区版本&#xff0c;有需…...

编程日记 2024/3/22 8:50:20

QT(19)-QNetworkRequest

attribute(QNetworkRequest::Attribute code, const QVariant &defaultValue QVariant()) const 获取指定的请求属性。如果该属性未设置&#xff0c;则返回默认值。 hasRawHeader(const QByteArray &headerName) const 检查是否存在指定名称的原始请求头。 header(Q…...

编程日记 2024/3/22 8:48:15

基于Vue的社区旧衣回收利用系统的设计与实现

经济的高速发展使得每一个家庭的收入都获得了大幅增长&#xff0c;随之而来的就是各种梦想的逐步实现&#xff0c;首当其冲的就是各类衣服的更新换代而导致了大量旧衣物在家中的积存。为了帮助人们解决旧衣物处理的问题而以当前主流的互联网技术构建一个可于社区中实现旧衣回收…...

编程日记 2024/3/22 8:43:07

【网站项目】291校园疫情防控系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

编程日记 2024/3/22 8:42:06

win git filter-repo教程

git filter-repo 是一个用于过滤和清理 Git 仓库历史的工具&#xff0c;它可以高效地批量修改提交历史中的文件内容、删除文件、重命名文件以及进行其他历史重构操作。相较于 git filter-branch&#xff0c;它通常更快且更易于使用。 以下是一个基本示例&#xff0c;说明如何使…...

编程日记 2024/3/22 8:40:04

Redis相关操作高阶篇--集群搭建

Redis相关操作大全一篇全搞定-CSDN博客 Redis集群 是一个由多个主从节点群组成的分布式服务器群&#xff0c;它具有复制、高可用和分片特性。Redis集群不需要seninel哨兵也能完成节点移除和故障转移的功能。需要将每个节点 设置成集群模式&#xff0c;这种集群模式没有中心节…...

编程日记 2024/3/22 8:35:59

JNDI注入原理及利用IDEA漏洞复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…...

编程日记 2024/3/22 8:34:58

大数据，或称巨量资料

大数据&#xff0c;或称巨量资料&#xff0c;指的是在传统数据处理应用软件不足以处理的大或复杂的数据集。大数据也可以定义为来自各种来源的大量非结构化或结构化数据。从学术角度而言&#xff0c;大数据的出现促成广泛主题的新颖研究&#xff0c;这也导致各种大数据统计方法…...

编程日记 2024/3/22 8:26:51

windows上打开redis服务闪退问题处理

方法1&#xff1a;在windows上面打开redis服务时&#xff0c;弹窗闪退可能是6379端口占用&#xff0c;可以用以下命令查看&#xff1a; netstat -aon | findstr 6379 如果端口被占用可以用这个命令解决&#xff1a; taskkill /f /pid 进程号 方法2&#xff1a; 可以使用…...

编程日记 2024/3/22 8:25:50

分布式锁简单实现

分布式锁 Redis分布式锁最简单的实现 想要实现分布式锁&#xff0c;必须要求 Redis 有「互斥」的能力&#xff0c;我们可以使用 SETNX 命令&#xff0c;这个命令表示SET if Not Exists&#xff0c;即如果 key 不存在&#xff0c;才会设置它的值&#xff0c;否则什么也不做。 …...

编程日记 2024/3/22 8:21:46

BM23 二叉树的前序遍历

public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param root TreeNode类 * return int整型一维数组*/public void preorder(List<Integer> list,TreeNode root){if(root null)return;l…...

编程日记 2024/3/22 8:20:45

阿里云代理仓库地址

在天朝使用jcenter、mavenCentral及google三个远程仓库&#xff0c;Gradle Sync会很慢&#xff0c;google仓库甚至需要科学上网才能访问。为了加快Gradle Sync速度&#xff0c;一招教你优先用 阿里云仓库服务 的仓库作为下载源。 一劳永逸之道 将本项目的gradle/init.d/init.g…...

编程日记 2024/3/22 8:19:44

nginx的location规则与其他功能

1. nginx中location规则&#xff1a; 规则描述~表示执行一个正则匹配&#xff0c;区分大小写~*表示执行一个正则匹配&#xff0c;不区分大小写^~表示普通字符匹配&#xff0c;如果该选项匹配&#xff0c;只匹配该选项&#xff0c;不匹配别的选项&#xff0c;一般用来匹配目录进…...

编程日记 2024/3/22 8:17:42

用汇编进行字符串匹配

用汇编进行字符串匹配 2、试编写一程序&#xff0c;要求比较两个字符串 STRING1 和 STRING2 所含字符是否完全相同&#xff0c;若相同则显示 MATCH&#xff0c;若不相同则显示 NO MATCH。 .model small .dataSTRING1 db hello world!,0STRING2 db hello china!,0matchString d…...

编程日记 2024/3/22 8:16:41

回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SAO-B…...

编程日记 2024/3/22 8:15:40

mysql数据库的索引管理

目录 一、索引的概述 1、索引的概念 2、索引的作用 3、索引的副作用 4、创建索引的原则依据 5、索引优化 6、索引的分类 7、数据文件与索引文件 二、管理数据库索引 1、查询索引 2、创建索引 2.1 创建普通索引 2.2 创建唯一索引 2.3 创建主键索引 2.4 创建组合…...

编程日记 2024/3/22 8:14:39

VUE+Vant实现H5组织架构选人选公司组件

提醒自己&#xff1a; 这是之前的逻辑&#xff0c;或许你重新写会有更好的方法&#xff0c;可以参考逻辑&#xff01;&#xff01;&#xff01; 功能介绍 1.有面包屑点击切换 2.有公司、部门、人员 3.单选、多选实现 4.编辑/回显 5.使用随意切换层级和跳转到指定层级回显等功…...

编程日记 2024/3/22 8:13:38

【以图搜图】GPUNPU适配万物识别模型和Milvus向量数据库

目录 以图搜图介绍项目地址Milvuscv_resnest101_general_recognition 代码使用流程结果展示模型部署环境Milvus部署及使用docker安装docker-compose安装Milvus可视化工具Attu进入网页端 Data数据示例点个赞再走呗&#xff01;比心&#x1f49e;️ 以图搜图 • &#x1f916; Mo…...

编程日记 2024/3/22 8:12:36

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/6/19 11:24:13

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/6/19 11:35:33

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/15 6:14:34

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/6/20 1:28:49

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/6/19 16:21:08

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/6/17 0:45:47

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/17 17:12:04

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/6/16 18:54:12

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/6/15 13:15:33

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/6/19 16:01:42