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

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

news 2026/4/13 17:37:15

文章目录

  • 👩‍💻 基础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

建筑热成像检测数据集 建筑物表面缺陷图像识别 建筑外墙保温缺陷检测、管道热损失识别 建筑物表面温度识别第10357期(代码+数据集+模型+界面)

建筑热成像检测数据集 README数据集核心信息表项目详情类别数量及名称1 类&#xff08;定义缺陷具体类别&#xff09;样本数量200张格式种类YOLO 格式核心应用价值支持建筑热工性能检测模型开发、建筑能耗异常定位算法训练、建筑保温层缺陷识别系统搭建数据集核心要素概述 1. 类…...

编程新知 2026/4/13 16:51:05

猫抓Cat-Catch：解锁网页媒体资源的终极免费解决方案

猫抓Cat-Catch&#xff1a;解锁网页媒体资源的终极免费解决方案 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为无法保存心爱的在线视频而苦…...

编程新知 2026/4/13 15:59:55

脑电信号解码终极指南：5个步骤实现运动想象分类

脑电信号解码终极指南&#xff1a;5个步骤实现运动想象分类 【免费下载链接】bcidatasetIV2a This is a repository for BCI Competition 2008 dataset IV 2a fixed and optimized for python and numpy. This dataset is related with motor imagery 项目地址: https://gitc…...

编程新知 2026/4/13 15:49:37

解锁Android的Linux潜能：PRoot如何重塑移动开发边界

解锁Android的Linux潜能&#xff1a;PRoot如何重塑移动开发边界 【免费下载链接】proot An chroot-like implementation using ptrace. 项目地址: https://gitcode.com/gh_mirrors/pro/proot 在移动设备上运行完整的Linux环境曾经是遥不可及的梦想&#xff0c;需要复杂的…...

编程新知 2026/4/13 15:23:12

AI安全基础：AI系统权限管理的安全规范

AI安全基础&#xff1a;AI系统权限管理的安全规范&#x1f4dd; 本章学习目标&#xff1a;本章是基础入门部分&#xff0c;帮助零基础读者建立对AI安全合规治理的初步认知。通过本章学习&#xff0c;你将全面掌握"AI安全基础&#xff1a;AI系统权限管理的安全规范"这…...

编程新知 2026/4/13 14:56:15

vSphere 7.0连接iSCSI存储避坑指南：从TrueNAS配置到ESXi主机挂载全流程

vSphere 7.0与iSCSI存储深度集成实战&#xff1a;TrueNAS配置与ESXi主机挂载全解析 在企业虚拟化环境中&#xff0c;存储配置的稳定性和性能直接影响业务连续性。本文将深入探讨vSphere 7.0与TrueNAS iSCSI存储的集成方案&#xff0c;从底层协议原理到实战配置细节&#xff0c;…...

编程新知 2026/4/13 14:03:22

深度学习基于YOLOV11罂粟识别检测系统 YOLOV11框架如何训练无人机罂粟识别检测数据集 航拍罂粟数据集的训练及应用

深度学习基于YOLOV11罂粟识别检测系统 YOLOV11框架如何训练无人机罂粟识别检测数据集 航拍罂粟数据集的训练及应用 1以下是构建该系统的详细步骤和完整代码。第一步&#xff1a;环境准备 首先&#xff0c;你需要安装最新的 Ultralytics 库&#xff08;支持 YOLOv11&#xff09…...

编程新知 2026/4/13 13:36:42

EPLAN与ERP系统集成避坑指南：如何用VB.NET实现物料数据自动同步？

EPLAN与ERP系统集成实战&#xff1a;VB.NET实现物料数据双向同步的工程指南 当电气设计数据与企业资源管理系统&#xff08;ERP&#xff09;之间仍存在数据孤岛时&#xff0c;工程师们往往需要耗费30%以上的工作时间在手动数据核对上。这种低效的协作模式正在被EPLAN开放的API生…...

编程新知 2026/4/13 13:00:23

PyTorch遥感图像变化检测实战技巧：从原理到部署的完整指南

PyTorch遥感图像变化检测实战技巧&#xff1a;从原理到部署的完整指南 【免费下载链接】change_detection.pytorch Deep learning models for change detection of remote sensing images 项目地址: https://gitcode.com/gh_mirrors/ch/change_detection.pytorch 遥感图…...

编程新知 2026/4/13 12:52:06

测试数据管理：AI解决方案大比拼

在数字化转型的浪潮中&#xff0c;软件测试从业者面临的核心挑战之一是高效管理测试数据。测试数据作为质量保障的基石&#xff0c;直接影响缺陷检出率、测试覆盖度和发布周期。传统方法依赖手动生成和脱敏&#xff0c;不仅耗时耗力&#xff0c;还常因数据多样性不足、安全风险…...

编程新知 2026/4/13 12:35:50