搜索
首页web前端js教程如何跟踪Google Analytics(分析)中的出站链接

How to Track Outbound Links in Google Analytics

关键要点

  • Google Analytics 不会自动追踪外链,但用户可以通过升级到 Universal Analytics 并实现自定义事件追踪代码来添加此功能。
  • 自定义事件追踪代码使用 JavaScript 向 body 元素添加点击事件处理程序,然后记录外链点击并将其数据发送到 Google Analytics。建议使用 jQuery 1.x 或其他库来实现强大的跨浏览器事件处理。
  • 追踪外链对于理解用户行为、优化网站内容、提升用户体验、增加参与度以及识别与其他网站的潜在合作机会至关重要。不懂代码的用户可以使用 Google Tag Manager。

Google Analytics 提供了海量信息。如果您只是将追踪脚本添加到页面中,您将面临关于网站用户活动的无尽数据流和报告。但是,虽然 Analytics 显示退出页面,但它不会告诉您用户点击了哪些链接离开您的网站。在本文中,我们将了解如何添加外链追踪。

Google 是否记录外链?

可能。如果您使用 Analytics 从一个网站链接到另一个使用 Analytics 的网站,Google 可能会记录这种关系。不幸的是,如果一个或多个外站不使用 Analytics,报告就会产生误导。Google 有其他收集数据的方法:当您拥有顶级浏览器和搜索引擎时,您可以收集大量统计数据!但是,我们随后会从网站 Analytics 转向更模糊的领域;Google 不一定会想分享这些数据。幸运的是,我们可以自己收集外链详细信息。

首先升级到 Universal Analytics!

在我们继续之前,您必须升级到 Universal Analytics。Google 可能已经为您启动了此过程,但必须更新您网站页面上的追踪代码。这很麻烦,但是下面显示的外链追踪代码在没有它的情况下将无法工作。(它可以与旧版 Analytics 配合使用,但最终会停止工作,因此最好现在升级。)

自定义事件追踪

Analytics 支持事件追踪。通常,它用于记录页面内 JavaScript 控制的交互,例如打开小部件或进行 Ajax 调用。我们可以使用事件追踪来记录外链,但需要克服一些障碍:

  • 该事件必须在所有浏览器上记录,并且不会妨碍导航;
  • 我们不应该需要手动识别或附加到每个外链的单独处理程序;
  • 我们必须确保在外部页面开始加载之前记录事件。

解决方案……

  1. 我们将点击事件处理程序附加到 body 元素。这将接收点击链接事件,因为它们通过 DOM 冒泡。
  2. 我们可以检测链接是否会打开与我们不同的域上的页面。如果它是外链,我们将取消点击事件并启动 Analytics 事件追踪。
  3. 在后台,Analytics 通过请求图像信标来发送数据。调用完成后,它可以运行回调函数,以便我们可以重定向到外部页面。
  4. 我们需要注意并确保追踪永远不会停止用户导航,即使在失败的情况下也是如此。该过程必须快速,不处理已被其他进程停用的点击,并确保即使 Analytics 事件失败,链接也能正常工作。

我们希望追踪在任何地方都能工作,所以我建议使用一个具有强大的跨浏览器事件处理的库。我将在此示例中使用 jQuery 1.x,因为大多数网站都使用它,但您可以替换轻量级选项,例如 min.js、Zepto.js、Minified.js 或您自己的事件处理函数。完整的代码如下所示。这可以添加到现有的 JavaScript 文件中,或者在一个脚本块中,只要它加载在 HTML body 中的某个位置(理想情况下,就在结束标签之前)。jQuery(或您的替代方案)必须首先加载,尽管 Google Analytics 追踪代码可以出现在页面的任何位置。

/* Track outbound links in Google Analytics */
(function($) {

  "use strict";

  // current page host
  var baseURI = window.location.host;

  // click event on body
  $("body").on("click", function(e) {

    // abandon if link already aborted or analytics is not available
    if (e.isDefaultPrevented() || typeof ga !== "function") return;

    // abandon if no active link or link within domain
    var link = $(e.target).closest("a");
    if (link.length != 1 || baseURI == link[0].host) return;

    // cancel event and record outbound link
    e.preventDefault();
    var href = link[0].href;
    ga('send', {
      'hitType': 'event',
      'eventCategory': 'outbound',
      'eventAction': 'link',
      'eventLabel': href,
      'hitCallback': loadPage
    });

    // redirect after one second if recording takes too long
    setTimeout(loadPage, 1000);

    // redirect to outbound page
    function loadPage() {
      document.location = href;
    }

  });

})(jQuery); // pass another library here if required

该事件使用类别名称“outbound”(外链)、操作名称“link”(链接)以及设置为外链 URL 的值进行记录。如有必要,您可以修改 ga 调用中的这些内容(第 24 至 26 行)。实施后,访问您的网站并点击一些外链。您应该在 Analytics 实时 > 事件面板中看到活动。几小时后,更多数据将出现在行为 > 事件窗格中。请随意使用此代码。

关于在 Google Analytics 中追踪外链的常见问题

追踪 Google Analytics 中的外链有什么意义?

在 Google Analytics 中追踪外链对于了解网站上的用户行为至关重要。它允许您查看访客点击了哪些外部链接,从而深入了解他们的兴趣和偏好。此数据可用于优化网站内容、改善用户体验和提高参与度。它还有助于识别与受众经常访问的其他网站的潜在合作机会。

如何设置 Google Analytics 来追踪外链?

设置 Google Analytics 来追踪外链涉及创建和实现自定义事件追踪代码。此代码应添加到网站上每个外链的 HTML 中。当用户点击链接时,该事件将在 Google Analytics 中记录。然后,您可以在 Google Analytics 帐户的“事件”部分访问此数据。

我可以在没有编码知识的情况下追踪网站上的外链吗?

是的,您可以使用 Google Tag Manager 在没有编码知识的情况下追踪外链。此工具允许您创建和管理追踪标签,而无需修改网站代码。您只需为外链点击设置一个新的标签,并配置触发器以便在用户点击外链时触发。

外链和内链有什么区别?

外链是指网站上将用户定向到其他网站的链接,而内链是指其他网站上将用户定向到您网站的链接。追踪这两种类型的链接对于 SEO 和了解用户行为都很重要。

如何使用外链追踪数据来改进我的网站?

外链追踪数据可用于识别受众感兴趣的内容类型。通过了解访客经常访问哪些外部网站,您可以调整内容以匹配他们的兴趣。这可以提高参与度和用户留存率。

追踪外链会影响我的网站 SEO 吗?

追踪外链不会直接影响您的网站 SEO。但是,获得的数据可用于改进您的内容策略,这可以间接改善您的 SEO。同样重要的是要注意,链接到高质量的相关网站可以提高您网站的可信度和搜索引擎排名。

如何实时追踪 Google Analytics 中的外链?

通过为外链点击设置事件追踪,可以在 Google Analytics 中实现外链的实时追踪。设置完成后,您可以在 Google Analytics 帐户的“实时”部分查看实时数据。

我可以追踪网站特定页面上的外链吗?

是的,您可以通过在 Google Analytics 中设置特定于页面的事件追踪来追踪特定页面上的外链。这使您可以了解各个页面的用户行为并相应地对其进行优化。

追踪外链的常见挑战有哪些?我该如何克服这些挑战?

追踪外链的一些常见挑战包括正确设置追踪代码、解释数据以及随着网站发展而维护追踪设置。可以通过使用 Google Tag Manager 等工具、寻求专业人士的帮助或学习更多关于 Google Analytics 的知识来克服这些挑战。

我可以在移动设备上追踪外链吗?

是的,Google Analytics 允许您在台式机和移动设备上追踪外链。这提供了跨所有设备的用户行为的全面视图。

以上是如何跟踪Google Analytics(分析)中的出站链接的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python和JavaScript:了解每个的优势Python和JavaScript:了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势,选择取决于项目需求和个人偏好。1.Python易学,语法简洁,适用于数据科学和后端开发,但执行速度较慢。2.JavaScript在前端开发中无处不在,异步编程能力强,Node.js使其适用于全栈开发,但语法可能复杂且易出错。

JavaScript的核心:它是在C还是C上构建的?JavaScript的核心:它是在C还是C上构建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1)javascriptwasdesignedAsalightweight,解释edganguageforwebbrowsers.2)Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers,典型地提示。

JavaScript应用程序:从前端到后端JavaScript应用程序:从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验,后端通过Node.js处理服务器任务。1.前端示例:改变网页文本内容。2.后端示例:创建Node.js服务器。

Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,JavaScript有强大的前端框架。

JavaScript框架:为现代网络开发提供动力JavaScript框架:为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑:1.项目规模和复杂度,2.团队经验,3.生态系统和社区支持。

JavaScript,C和浏览器之间的关系JavaScript,C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪,JavaScript、C 和浏览器之间到底有什么关系?它们之间看似毫无关联,但实际上,它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章,你将了解到JavaScript如何在浏览器中运行,C 在浏览器引擎中的作用,以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道,JavaScript是前端开发的核心语言,它直接在浏览器中运行,让网页变得生动有趣。你是否曾经想过,为什么JavaScr

node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具