使用Google Analytics进行JavaScript小部件跟踪

Question

使用Google Analytics进行JavaScript小部件跟踪

9

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

我想能够在其他网站上跟踪此小部件的使用情况以及它被加载（查看）的次数。我们在自己的网站上使用Google Analytics，所以这似乎是最有效的方式。我不想在小部件中嵌入我们的GA代码，因为那很可能会破坏其他网站可能正在进行的任何GA跟踪。

我的想法是包含一个隐藏的iframe，该iframe会加载我们网站上的跟踪页面，并且跟踪页面会有正确的GA代码。例如： usersite.com在其页面上嵌入了我们的小部件。 .js文件来自mycompany.org/js/widget.js widget.js在usersite.com上创建了一个隐藏的iframe（在我们的div中），该iframe加载mycompany.org/js/trackingpage.html（也许它包括一些参数，如domain=usersite.com之类的东西，跟踪页面上的js可以解析并记录到GA中），并且trackingpage.html具有我们的GA代码来注册小部件已被使用。

这似乎是解决此问题的简单方法。这是否是合理的方法？还是有更好的方法？

- Brian Pipa

你可以像 Google 一样创建一个（子）域，仅提供一个单像素。在 JavaScript 小部件的每个事件中请求该像素（带有事件名称和任何不随 http 请求发送的参数）。编写一个解析该域的日志文件并将结果连接到 Excel 表格或商业仪表板解决方案的脚本。这似乎比混乱处理 GA 更干净。请与客户交谈，以确保他们有权部署将数据发送到第三方服务器的小部件（至少在欧洲不再是一项已知事实）。 - Eike Pierstorff

解析日志听起来像是一件非常麻烦的事情。谢谢你的尝试，但我还是不想做。 - Brian Pipa

我有一个非常类似的问题。自从你提出了这个问题，你想到了解决方案吗？有什么建议吗？ - davidrac

@davidrac 没有，目前还没有。我还没有真正着手解决它。实际上，除了我（因为我编写了小部件）以外，这对任何人都不是高优先级的，但我想要建立一个跟踪其使用情况的系统。 - Brian Pipa

谢谢。我已经为我们的小部件解决了这个问题。这很简单。我会发布答案。 - davidrac

2个回答

0

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

- tmerrick

如果我理解你的意思正确，你是说在小部件请求资源时，在URL上添加类似“?utm_campaign=widget”的东西？我不确定，但我认为那样做不会起作用。我认为只有当你请求的资源中包含GA JS代码时，它才能起作用。由于小部件请求的不是HTML，因此它不能包含GA JS，因此无法跟踪它。不过我可能完全错了。 - Brian Pipa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidrac · Accepted Answer

我们的小部件是通过客户在其网站中包含一个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配置（域等）与托管站点的相似，这种方法似乎运行良好。例如，如果主机域不同，则可能会导致重复点击。