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配置（域等）与托管站点类似，这种方法似乎工作正常。例如，如果主机域不同，则可能导致重复命中。

Answer 2

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

使用Google Analytics跟踪Javascript小部件

2 个答案: