使用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在此处对此进行了很好的解释（使用过滤器修改您的跨域个人资料，以在内容报告中显示完整的域）

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

Answer 2

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