如何使用Google Analytics（分析）跟踪JavaScript和Ajax事件

最新推荐文章于 2024-08-06 17:30:55 发布

dingshi7798

最新推荐文章于 2024-08-06 17:30:55 发布

阅读量544

点赞数

文章标签： javascript ux php ViewUI

交出所有使用Google Analytics（分析）来跟踪您网站上用户的信息。 公平地说，计算不使用Google Analytics（分析）的用户可能更快。 无论您对Google及其对世界的统治计划有何看法，Google Analytics（分析）都是一种出色的工具，彻底改变了网络统计数据。

为了查看访问者报告，您需要将分析跟踪代码嵌入网站上的每个网页中。

就是这样：

注册Google Analytics （分析）（或关联您现有的Google / Gmail ID）。
打开左侧的“ 管理员”部分（齿轮图标），然后从“ 帐户”列中创建新帐户 。
打开“ 属性”列，然后单击使用您网站的URL 创建新属性 。然后，将为您的网站分配一个跟踪ID，其格式为UA-XXXXX-Y。
从“ 跟踪信息”子菜单中打开跟踪代码 。

尽管此跟踪代码有一些较旧的变体，但Google建议针对现代浏览器使用以下JavaScript实现：

<!-- Google Analytics tracking code -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- end Google Analytics tracking code -->

将此添加到您网站的模板中，并用新的跟踪ID替换UA-XXXXX-Y 。 Google建议将跟踪代码插入HTML的<head>部分，但实际上，它可以随处可见。我喜欢将其插入页面底部（在结束body标签之前），或者在页面加载后调用它，以确保其优先级低于其他任务（这对于提高网站性能而言是更好的选择）。

从这一刻起，Google Analytics（分析）将跟踪并报告您的用户访问情况，以及我们在整个网站上的用户人口统计信息和用户行为。

页内活动

上面提到的标准跟踪代码适用于更简单的仅内容的网站和基本的WordPress主题，但是它不记录“页内”事件，例如：

Ajax通话
影片播放
文件下载
社交媒体互动
客户端互动
出站链接，或…
其他不会导致正常页面加载的活动。

可以使用以下JavaScript代码记录页内事件，该JavaScript代码调用全局Google Analytics（分析）对象：

ga(
  'send',
  'event',
  [eventCategory],
  [eventAction],
  [eventLabel],
  [eventValue]
);

一种替代方法是使用JavaScript对象：

ga('send', {
  hitType: 'event',
  eventCategory: [eventCategory],
  eventAction: [eventAction],
  eventLabel: [eventLabel],
  eventValue: [eventValue],
  [transport: beacon ]
});

让我们分别查看该对象中的每一行……

[eventCategory]（必填）

特定类型事件的单一名称（例如，用于视频交互的“视频”或用于PDF链接的“下载”）。

[eventAction]（必填）

导致事件触发的用户交互（例如，视频的“播放”或下载的文件名）。

[eventLabel]（可选）

用于对事件进行分类的可选标签。例如，我们可以使用广告系列名称，例如“ Winter Campaign”。所有事件，无论是下载，视频播放，出站链接还是其他事件，都可以使用相同的标签进行分类。

[eventValue]（可选）

与事件关联的可选数值。对于视频，我们可以定义文件大小或视频长度，以便可以报告总带宽和平均带宽统计信息。

您也可以记录金额，但是请注意，Google Analytics（分析）具有用于记录电子商务交易的特殊功能。

[运输：信标]（可选）

这用于跟踪表单和出站链接。当新页面开始加载时，浏览器将停止在当前网页上执行JavaScript，因此该选项不会产生响应。

简单链接跟踪

事件跟踪可用于通过内联onclick事件记录类似PDF下载的内容：

<a href="document.pdf" onclick="ga('send', 'event', 'download', this.href); return true;">download</a>

在此示例中，将eventCategory设置为可download而eventAction是文件URL。

更有效地，我们可以定义一个JavaScript事件处理程序来记录所有PDF下载，无论下载多少：

// record all PDF download events
document.body.addEventListener('click', e => {
  let t = e.target;
  if (t.href && t.href.endsWith('.pdf')) {
    ga('send', {
      hitType: 'event',
      eventCategory: 'download',
      eventAction: t.href,
      transport: beacon
    });
  }
}, false);

社交媒体互动

事件跟踪还可以用于跟踪您网站上的社交媒体互动。 Google为此提供了一个社交互动API ，它是事件跟踪代码片段的衍生产品：

ga(
  'send',
  'social',
  [socialNetwork],
  [socialAction],
  [socialTarget]
);

您还可以使用以下命令：

ga('send', {
  hitType: 'social',
  socialNetwork: [socialNetwork],
  socialAction: [socialAction],
  socialTarget: [socialTarget]
});

再次，让我们分别查看该对象中的每一行……

[socialNetwork]（必填）

相关的社交网络（例如Facebook，Twitter等）。

[socialAction]（必填）

动作类型（例如，喜欢，发送，鸣叫等）。

[socialTarget]（必填）

社会互动的目标。这通常是一个URL。

实时报告中的事件跟踪

事件操作应在实时报告中立即可用（“ 实时”→“事件” ）。 24小时后，可在“ 行为”→“事件”部分中获得更多详细信息。

有关更多信息，请参阅Google Analytics（分析）文档：

您可以在此处查看我们的UX Analytics系列中的更多文章。

From: https://www.sitepoint.com/google-analytics-track-javascript-ajax-events/