使用 Google Analytics 跟踪 Javascript 小部件

Question

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

我希望能够跟踪此小部件在其他站点上的使用情况以及它被加载(看到)的次数。我们在网站上使用 Google Analytics，这似乎是最有效的方式。我不想在小部件中嵌入我们的 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 代码来注册小部件已被使用。

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

Answer 1

我们的小部件由客户在他的站点中包含一个 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 配置文件配置为也显示主机。 Google 在 here 中对此有很好的解释(在使用过滤器修改跨域配置文件以在内容报告中显示完整域下)

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