使用 Google Analytics 跟踪 Javascript 小部件答案

【问题标题】：Javascript widget tracking with Google Analytics使用 Google Analytics 跟踪 Javascript 小部件
【发布时间】：2012-11-05 06:27:56
【问题描述】：

我正在尝试找出跟踪 Javascript 小部件的最佳方法。我为一家非营利组织工作，我编写了一个 Javascript 小部件，网站可以嵌入到他们的网站上。他们放在网站上的那段代码有一个小部件容器（一个 div），它会加载我们的 .js 文件。我们的 .js 文件使用 HTML 填充容器以显示图像和一些信息。

我希望能够跟踪此小部件在其他网站上的使用情况以及它被加载（看到）的次数。我们在我们的网站上使用谷歌分析，所以这似乎是最有效的方法。我不想在小部件中嵌入 我们的 GA 代码，因为这很可能会破坏其他站点可能正在执行的任何 GA 跟踪。

我的想法是包含一个隐藏的 iframe，用于在我们的网站上加载跟踪页面，并且跟踪页面中将包含正确的 GA 代码。因此，例如： usersite.com 在他们的页面上嵌入了我们的小部件。 .js 文件由 mycompany.org/js/widget.js 提供 widget.js 在 usersite.com（在我们的 div 中）创建一个隐藏的 iframe，加载 mycompany.org/js/trackingpage.html（可能它包含一些参数，如 domain=usersite.com 或跟踪中的 js页面可以关闭并登录到 GA）并且 trackingpage.html 有我们的 GA 代码来注册小部件已被使用。

这似乎是解决此问题的一种简单方法。这似乎是一种合理的方法吗？还是有更好的方法？

【问题讨论】：

您总是可以做 Google 所做的事情：创建一个只提供一个像素的（子）域。在您的 javascript 小部件中的每个事件上请求该像素（带有事件名称的参数和任何不随 http 请求发送的参数）。编写一个脚本来解析该域的日志文件，并将结果连接到 Excel 表或商业仪表板解决方案。似乎比 GA 的混乱更干净。并与您的客户交谈，以便他们确保允许他们部署将各方发送到 3rd 方服务器的小部件（至少在欧洲，这不再是给定的）。
解析日志听起来像是一个巨大的 PITA。不用了，谢谢。但是感谢您的尝试！
我有一个非常相似的问题。自从您提出问题后，您是否提出了解决方案？有什么建议吗？
@davidrac 不，还没有。我还没有真正解决它。它实际上对除我之外的任何人来说都不是高优先级（因为我编写了这个小部件），但我想准备一些东西来跟踪它的使用情况。
谢谢。我实际上已经为我们的小部件解决了这个问题。这很简单。我会发布答案。

标签： javascript google-analytics

【解决方案1】：

在带有小部件的客户端站点上，有一个 ajax 请求调用您的服务器以请求小部件内容。使用 GA Campaign 参数信息标记请求 URL，您将能够看到小部件流量。可以调整 ajax 响应以适应场景。

【讨论】：

如果我理解正确的话，当小部件请求资源时，您是说将“?utm_campaign=widget”之类的东西附加到 URL 上？我不积极，但我认为这不会奏效。我认为这只有在您请求的资源中包含 GA JS 代码时才有效。由于小部件请求的不是 HTML，它不能在其中包含 GA JS，因此它不会跟踪它。不过，我可能完全错了。

【解决方案2】：

我们的小部件由客户使用，包括他网站中的 javascript 文件。我们的 javascript 代码将小部件添加到页面中所需的位置。

添加 Google Analytics 非常简单：我将 GA 代码添加到客户站点加载的 javascript 文件中：

// setup google analytics
var _gaq = _gaq || [];
_gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._setAccount', 'REPLACE_WITH_YOUE_GA_ID']);
_gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

我也像这样直接从我们的 Javascript 跟踪其他特定事件：

  _gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._trackEvent', 'REPLACE_WITH_YOUR_EVENT_CATEGORY', 'REPLACE_WITH_YOUR_EVENT_ACTION']);

重要

您必须使用命名空间以避免与网站的 GA（如果存在）发生冲突

您应该将您的 Google Analytics（分析）配置文件配置为也显示主机。谷歌在here 中有很好的解释（在使用过滤器修改跨域配置文件以在内容报告中显示完整域）

到目前为止，只要您确保 cookie 配置（域等）与托管站点的相似，这种方法似乎可以正常工作。例如，如果主机域不同，则可能会导致重复点击。

【讨论】：

这个命名空间是什么？我可以设置吗？我需要在谷歌仪表板上的任何地方配置它吗？
没有。您只需将其添加到命令中：例如REPLACE_WITH_SOME_UNIQUE_NAMESPACE._setAccount 顺便说一句，从那以后我已经转向谷歌通用分析，在这种情况下问题较少。
嘿，我有一个使用 GA 的网站，现在我正在开发一个将在其他网站上重新分发的小部件。它们是同一个应用程序，但我想为它们分开 GA。在 GA Admin 上，我应该创建一个新的属性或视图吗？如果我尝试创建一个属性，它会询问我“网站 URL”，我没有，因为它不会在我的网站上使用。请帮忙。