Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

如何

如何首页

菜单

图标栏 菜单图标 手风琴 选项卡 垂直选项卡 选项卡标题 全页选项卡 悬停选项卡 顶部导航 响应式顶部导航 分割导航 带图标的导航栏 搜索菜单 搜索栏 固定侧边栏 侧边导航 响应式侧边栏 全屏导航 画布外菜单 悬停侧边栏按钮 带图标的侧边栏 水平滚动菜单 垂直菜单 底部导航 响应式底部导航 底部边框导航链接 右对齐菜单链接 居中菜单链接 等宽菜单链接 固定菜单 滚动时下拉栏 滚动时隐藏导航栏 滚动时缩小导航栏 粘性导航栏 图像上的导航栏 悬停下拉菜单 点击下拉菜单 级联下拉菜单 顶部导航中的下拉菜单 侧边导航中的下拉菜单 响应式导航栏下拉菜单 子导航菜单 上拉菜单 巨型菜单 移动菜单 窗帘菜单 折叠侧边栏 折叠侧边面板 分页 面包屑导航 按钮组 垂直按钮组 粘性社交栏 药丸导航 响应式标题

图像

幻灯片 幻灯片库 模态图像 灯箱 响应式图像网格 图像网格 图像库 可滚动图像库 选项卡库 图像覆盖淡入 图像覆盖滑动 图像覆盖缩放 图像覆盖标题 图像覆盖图标 图像效果 黑白图像 图像文本 图像文本块 透明图像文本 全页图像 图像上的表单 英雄图像 模糊背景图像 滚动时更改背景 并排图像 圆角图像 头像图像 响应式图像 居中图像 缩略图 图像周围的边框 认识团队 粘性图像 翻转图像 摇晃图像 作品集库 带过滤器的作品集 图像缩放 图像放大镜 图像比较滑块 网站图标

按钮

警报按钮 轮廓按钮 分割按钮 动画按钮 淡入淡出按钮 图像上的按钮 社交媒体按钮 阅读更多阅读更少 加载按钮 下载按钮 药丸按钮 通知按钮 图标按钮 下一个/上一个按钮 导航中的更多按钮 块按钮 文本按钮 圆形按钮 滚动到顶部按钮

表单

登录表单 注册表单 结账表单 联系表单 社交登录表单 注册表单 带图标的表单 时事通讯 堆叠表单 响应式表单 弹出窗口表单 内联表单 清除输入字段 隐藏数字箭头 复制文本到剪贴板 动画搜索 搜索按钮 全屏搜索 导航栏中的输入字段 导航栏中的登录表单 自定义复选框/单选按钮 自定义选择 切换开关 选中复选框 检测大写锁定 在 Enter 上触发按钮 密码验证 切换密码可见性 多步骤表单 自动完成 关闭自动完成 关闭拼写检查 文件上传按钮 空输入验证

过滤器

过滤列表 过滤表格 过滤元素 过滤下拉菜单 排序列表 排序表格

表格

斑马条纹表格 居中表格 全宽表格 嵌套表格 并排表格 响应式表格 比较表格

更多

全屏视频 模态框 删除模态框 时间轴 滚动指示器 进度条 技能条 范围滑块 颜色选择器 电子邮件字段 工具提示 悬停显示元素 弹出窗口 可折叠 日历 HTML 包含 待办事项清单 加载器 徽章 星级评分 用户评分 叠加效果 联系芯片 卡片 翻转卡片 个人资料卡片 产品卡片 警报 呼叫 笔记 标签 丝带 标签云 圆形 样式 HR 优惠券 列表组 带有徽章的列表组 无项目符号的列表 响应式文本 镂空文本 发光文本 固定页脚 粘性元素 等高 清除浮动 响应式浮动 Snackbar 全屏窗口 滚动绘图 平滑滚动 渐变背景滚动 粘性页眉 滚动时缩小页眉 价格表 视差 纵横比 响应式内嵌框架 切换喜欢/不喜欢 切换隐藏/显示 切换暗黑模式 切换文本 切换类 添加类 移除类 更改类 活动类 树状视图 移除小数 移除属性 离线检测 查找隐藏元素 重定向网页 格式化数字 缩放悬停 翻转盒子 垂直居中 在 DIV 中居中按钮 居中列表 悬停过渡 箭头 形状 下载链接 全高元素 浏览器窗口 自定义滚动条 隐藏滚动条 显示/强制滚动条 设备外观 可编辑边框 占位符颜色 禁用文本区域大小调整 禁用文本选择 文本选择颜色 项目符号颜色 垂直线 分隔线 文本分隔线 动画图标 倒计时器 打字机 敬请期待 聊天信息 弹出式聊天窗口 分屏 推荐 部分计数器 引言幻灯片 可关闭的列表项 典型设备断点 可拖动的 HTML 元素 JS 媒体查询 语法高亮器 JS 动画 JS 字符串长度 JS 指数运算 JS 默认参数 JS 随机数 JS 排序数字数组 JS 展开运算符 JS 滚动到视图 获取当前日期 获取当前 URL 获取当前屏幕大小 获取内嵌框架元素

网站

创建免费网站 制作网站 制作静态网站 托管静态网站 制作网站 (W3.CSS) 制作网站 (BS3) 制作网站 (BS4) 制作网站 (BS5) 创建和查看网站 创建链接树网站 创建投资组合 创建简历 制作餐厅网站 制作企业网站 制作网络书籍 居中网站 联系部分 关于页面 大标题 示例网站

网格

两列布局 三列布局 四列布局 扩展网格 列表网格视图 混合列布局 列卡 之字形布局 博客布局

谷歌

谷歌图表 谷歌字体 谷歌字体搭配 谷歌设置分析

转换器

转换重量 转换温度 转换长度 转换速度

博客

获得开发人员工作 成为前端开发人员 招聘开发人员

如何设置 Google Analytics

Google Analytics 用于查看和了解网站流量。

它免费且易于使用。

您可以将其自定义以适应多种用例。

它开箱即用。

它设置起来很快。 立即获取您的见解!

创建我的免费网站 ❯

跳过有关 Google Analytics 的阅读内容。 直接带我到第一步。 转到第一步

什么是 Google Analytics

Google Analytics 是一款网络分析解决方案。

它由 Google 开发和支持。

最新版本称为 Google Analytics 4。

它可用于查看数据,例如受众、页面浏览量、会话和人口统计以及事件。

为什么要启用 Google Analytics

了解您的网站流量以做出更明智的决策。

了解和改进销售漏斗。

从实验中学习(例如,A/B 测试)。

谷歌还有另一个名为 Google Optimize 的解决方案。此解决方案专为测试而设计。


Google Analytics 适合谁

Google Analytics 对任何拥有网站的人都有用。

它提供有关谁使用您的网站以及他们如何与您的网站交互的信息。

此外,界面易于理解。

您不需要分析背景即可使用和浏览该服务。


如何逐步设置 Google Analytics

Google Analytics 可以通过两种方式设置:**全局网站标签 (gtag.js)** 或 **Google Tag Manager**。

最简单的方法是使用全局网站标签。

本教程将使用全局网站标签方法。


准备工作

决定使用哪个代码编辑器并设置您的环境。

W3Schools 创建了一个易于使用的代码编辑器,名为 **W3Schools Spaces**。只需点击几下即可注册并开始使用。

免费开始 ❯

创建您的 **index.html** 文件,以便您可以开始输入代码。

一切就绪。让我们开始吧!


设置 Google Analytics:全局网站标签


步骤 1:创建一个 Google Analytics 帐户

访问 Analytics:创建帐户或登录 Analytics

上面的段落中的链接将带您前往 Google Analytics 着陆页。

点击“免费开始”按钮。

landing page

步骤 2:进入欢迎页面

创建帐户或登录后,您将被欢迎进入解决方案。

按“开始测量”按钮继续。

Welcome page

步骤 3:帐户设置

您需要做出两个决定。

  1. 输入您的帐户名称。
  2. 决定您要共享哪些数据。
  3. 点击“下一步”按钮。

一个帐户可以有多个跟踪 ID。您可以使用一个帐户跟踪多个网站。

Account setup overview

步骤 4:属性设置

属性是您要测量的服务,例如网站、应用程序、链接树等。

  1. 输入属性名称。
  2. 输入您的时区。
  3. 输入您使用的货币。
  4. 点击“下一步”按钮。
Property setup overview

步骤 5:添加业务信息

Analytics 使用这些信息来定制您的体验。

  1. 选择您的行业类别。
  2. 选择企业规模。
  3. 勾选您计划如何使用 Analytics 的框。
  4. 点击“创建”按钮继续。
Business information details

步骤 6:服务条款协议

阅读并理解服务条款。

如果您同意,请勾选 GDPR 框并点击“我接受”按钮。

Terms and conditions overview

步骤 7:电子邮件订阅

  1. 勾选或取消勾选所有框。
  2. 点击“保存”按钮继续。
Email communication overview

步骤 8:选择平台

选择您收集数据的平台。

然后,点击相关平台继续。

在本教程中,我们将以“网络”为例继续。

Select platform overview

步骤 9:数据流设置

输入数据流详细信息。

  1. 您网站的 URL。
  2. 您要为数据流指定的名称。
  3. 决定是否启用增强型测量。
  4. 点击“创建数据流”按钮继续。
  5. 增强型测量可以为数据提供更多上下文。提高您对流量的理解。

    Data stream setup overview

    步骤 10:网络数据流概述

    在这里,您可以看到网络数据流的详细概述。

    Web stream details overivew

    以下是概述中的主要要点。

    1. 数据流 URL。

    数据流 URL 是连接网站的链接。

    stream URL

    2. 测量 ID

    测量 ID 是您的数据流的标识符。

    它的格式为 G-XXXXXXX。

    measurement ID

    Google Analytics 4 使用测量 ID。旧版本使用跟踪 ID。您不能同时拥有两者。

    3. 标签说明

    决定使用 **全局网站标签 (gtag.js)** 或 **标签管理器**。

    本教程将使用全局网站标签。

    安装全局网站标签是最简单、最快的使其运行起来的方法。

    tagging instructions

    步骤 11:全局网站标签 (gtag.js)

    点击“全局网站标签 (gtag.js)”行。

    Global site tag

    在这里,您可以看到代码片段。

    代码片段是允许 Google 测量您网站数据的脚本。

    您可以在代码片段的倒数第二行看到测量 ID。

    代码片段

    <!-- 全局网站标签 (gtag.js) - Google Analytics -->
    <script async src="https://127.0.0.1/gtag/js?id=G-DNJN1PF3CS"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX');
    </script>

    步骤 12:输入代码片段

    复制代码片段。

    确保包含您的测量 ID。

    在您的 HTML 中找到 <head> 标签。

    将代码片段粘贴到 <head> 标签下方。

    保存并发布代码。

    Add code snippet

    在本例中,我们使用了 W3Schools Spaces


    步骤 13:测试是否有效

    确保您已成功保存并发布包含正确测量 ID 的代码片段。

    打开您已连接到数据流的网站的 URL。

    点击左侧菜单上的“实时”。

    确认您看到自己作为活跃用户。

    恭喜!您已成功为您的网站启用 Google Analytics!

    Analytics dashboard

    探索 Google Analytics

    推荐的相关主题是 **标签管理器** 和 **事件**

    花时间在该服务中了解您的用户活动、商务、人口统计、设备和推荐来源。


    **提示:**听说过 W3Schools Spaces 吗?这是一个个人空间,您可以在其中从头开始制作网站或使用模板并免费托管它。

    它包含您在浏览器中所需的一切。

    只需点击几下即可开始使用。

    立即免费开始 ❯

    * 不需要信用卡

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.