javascript - 如何在具有文件 :///URI 的 JavaScript Web 应用程序中使用 Google Analytics

Question

我正在开发一个仅前端的 JavaScript Web 应用程序(使用的技术是 HTML5、CSS 和 JavaScript)。该应用程序被注入(inject)到一个移动应用程序中，该应用程序采用我的 JS Web 应用程序并以一种奇特的方式显示它。

我想使用 Google Analytics 跟踪用户在我的应用中的事件，但是问题是我注入(inject)移动应用的 JS 应用程序没有使用 GA 时所需的常规 URL对于网站/网络应用程序，但它也不是移动应用程序尝试移动应用程序的GA。结果是移动和网络应用程序之间的混合，我只能编辑我的JS应用程序。

我制作了下图以更好地形象化我的问题。

使用jsconsole.com我可以通过编程方式访问我的应用程序，并且即使在 iPresent 中上传该应用程序时也可以检查其控制台。没有错误。如果我提醒应用程序的 URL，我会得到文件 URI:

alert( $( location ).attr( 'href ') );

//returns file:///var/mobile/..../index.html

我尝试了很多想要的解决方案(即 this 或 this )，但没有一个有效。但我是这个领域的初学者，只是盲目地试图解决这个问题，所以可能错过了一些重要的注意事项。 Cookie 在我的 iPresent 应用程序中运行良好。

我最后使用的 GA 代码:

    <script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    if(window.localStorage) {
        ga('create', 'UA-NUMBER-1', 'none', {
          'storage': 'none'
          , 'clientId': window.localStorage.getItem('ga_clientId')
        });
        ga(function(tracker) {
          window.localStorage.setItem('ga_clientId', tracker.get('clientId'));
        });
    }
    else {
        ga('create', 'UA-NUMBER-1', 'none');
    }
    ga('send', 'pageview');
    </script>

是否可以让 GA 与这个没有常规 URL、但有文件 URI 的混合 Web 应用程序配合使用？如果是这样，怎么办？

谢谢你!

Answer 1

我建议你看看Analytics Measurement Protocol 。它将允许您跟踪 Google Analtycis JavaScript 使用 HTTP 请求 https://www.google-analytics.com/collect 进行的大多数(如果不是全部)交互。 .

下面是一个纯 JavaScript 示例，说明如何使用 GET 发出请求:

var hit = 'https://www.google-analytics.com/collect?';
    hit += 'v=1';                 // Version.
    // Be sure to update the tid, Tracking ID, with your Google Analytics Tracking ID.
    hit += '&tid=UA-XXXXX-Y';     // Tracking ID / Property ID.
    hit += '&cid=555';            // Anonymous Client ID.
    hit += '&t=pageview';         // Pageview hit type.
    hit += '&dh=mydemo.com';      // Document hostname.
    hit += '&dp=/home';           // Page.
    hit += '&dt=homepage';        // Title.

httpGetRequest(hit);

function httpGetRequest(theUrl)
{
    var req = new XMLHttpRequest();
    req.open("GET", theUrl, true);
    req.send(null);
}

您应该查看HTTP GET request in JavaScript?和 Eloquent JavaScript Second Edition - Chapter 17 HTTP有关使用 JavaScript 发送 HTTP 请求的更多信息。如果您有权访问 jQuery，那么您也可以使用 jQuery.ajax() .

提出请求后，您可以登录 Google Analytics(分析)帐户并在报告中查看综合浏览量。您可以在“实时>>概述”或“行为>>网站内容>>所有页面”中查看它。

在上图中，我转到“行为”>>“网站内容”>>“所有页面”，以红色显示。然后我将日期范围设置为 2015 年 10 月 21 日，以蓝色显示。突出显示的部分显示了我在 JavaScript hit 变量中设置的文档主机名和页面。请注意，我有一个过滤器，可以更新主页以包含主机名，因此您可能只会看到主页的 /home。

如果您有任何疑问，请告诉我。