9

我正在尝试找出跟踪 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 代码来注册小部件已被使用。

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

4

2 回答 2

9

我们的小部件由客户使用，包括他网站中的 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 配置文件配置为也显示主机。谷歌在这里有一个很好的解释（在使用过滤器修改您的跨域配置文件以在您的内容报告中显示完整域）

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

于 2013-08-13T14:28:29.317 回答
0

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

于 2013-07-23T13:57:23.650 回答