使用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 参数信息标记请求 URL，您将能够看到小部件流量。可以调整 ajax 响应以适应场景。