菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何做 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
     ❯   

HOW TO

HowTo Home

Menus

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

图片

幻灯片 幻灯片画廊 模态框图像 灯箱 响应式图像网格 图像网格 图像画廊 可滚动图像画廊 选项卡画廊 图像叠加渐隐 图像叠加滑动 图像叠加缩放 图像叠加标题 图像叠加图标 图像效果 黑白图像 图像文字 图像文本块 透明图像文本 全页图像 图像上的表单 英雄图像 模糊背景图像 滚动时更改背景 并排图像 圆角图像 头像图像 响应式图像 居中图像 缩略图 图像边框 团队介绍 粘性图像 翻转图像 抖动图像 作品集画廊 带过滤的作品集 图像缩放 图像放大镜 图像比较滑块 网站图标

按钮

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

表单

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

Filters

筛选列表 筛选表格 筛选元素 筛选下拉菜单 排序列表 排序表格

表格

斑马条纹表 居中文档 全宽表 嵌套表 并排表 响应式表 对比表

More

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

网站

创建免费网站 制作网站 制作静态网站 托管静态网站 制作网站 (W3.CSS) 制作网站 (BS3) 制作网站 (BS4) 制作网站 (BS5) 创建和查看网站 创建 Link Tree 网站 创建作品集 创建简历 制作餐厅网站 制作企业网站 制作 WebBook 居中网站 联系部分 关于页面 大标题 示例网站

Grid

2 列布局 3 列布局 4 列布局 展开式网格 列表网格视图 混合列布局 列卡片 锯齿布局 博客布局

Google

Google Charts Google Fonts Google Font 配对 Google 设置分析

Converters

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

博客

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

如何设置 Google Analytics

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

它是免费且易于使用的。

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

开箱即用。

设置速度很快。立即获取您的洞察!

创建我的免费网站 ❯

跳过关于 Google Analytics 的阅读。直接带我去第一步。 转到第一步

什么是 Google Analytics

Google Analytics 是一个网站分析解决方案。

它由 Google 开发和支持。

最新版本称为 Google Analytics 4。

它可以用于查看受众、页面浏览量、会话、人口统计信息和事件等数据。

为何启用 Google Analytics

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

了解并改进销售漏斗。

通过实验学习(例如,A/B 测试)。

Google 还有另一个名为 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:选择平台

选择您正在收集数据的平台。

然后,点击相应的平台继续。

在本教程中,我们继续使用“Web”作为示例。

Select platform overview

步骤 9:数据流设置

输入数据流详细信息。

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

    Data stream setup overview

    步骤 10:Web 流概述

    在这里,您可以看到 Web 流的详细概述。

    Web stream details overivew

    以下是概述中的要点。

    1. 流 URL。

    流 URL 是已连接网站的链接。

    stream URL

    2. 衡量 ID

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

    它的格式为 G-XXXXXXX。

    measurement ID

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

    3. 标记说明

    选择使用 全局网站代码 (gtag.js)Tag Manager

    本教程将使用全局网站代码。

    安装全局网站代码是让它投入运行最简单快捷的方式。

    tagging instructions

    步骤 11:全局网站代码 (gtag.js)

    点击“全局网站代码 (gtag.js)”行。

    Global site tag

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

    代码片段是一个脚本,允许 Google 衡量您网站上的数据。

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

    代码片段

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://#/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

    推荐的相关主题是 Tag ManagerEvents

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


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

    它拥有您在浏览器中需要的一切。

    只需点击几下即可开始。

    立即免费开始 ❯

    * 无需信用卡

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持