Question

我的Google分析JavaScript事件在开发者控制台中运行良好。但当它们从外部js文件包含在页面上时根本不起作用.. 出于某种原因。

例如;下面的将包含在控制台中。但是当包含在单独的外部js文件中时不会。例如。

<script type="text/javascript" src="js/gascript.js"></script>

我还没有尝试将包含移动到头部和页脚位置内的3个不同区域。我也尝试在不同版本的'on dom ready'

中包含该脚本

例如，/gascript.js

中的GA事件跟踪JS

$(function() {
  $('.like').click(function() { // good song, thumbs up
      var SongTitle = $('.like-data h2').text();        
      var date = new Date();
      var month = date.getUTCMonth() + 1;
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();
      var time = date.toLocaleTimeString();
      var formattedDate = month + '/' + day + '/' + year + '|' + time;    
     ga('send', 'event', SongTitle, 'Like', formattedDate);
  });
});

完整的HTML。

<!DOCTYPE html>
<html ng-app="root" ng-controller="IndexCtrl">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title ng-bind="pageTitle"></title>

        <!-- Favicon -->
        <link rel="icon" href="img/favicon.png" />

        <!-- CSS Libraries -->
        <!--<link rel="stylesheet" href="css/carousel.css">-->
        <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->

        <!-- CSS Core -->
        <link rel="stylesheet" href="css/app.css"/>

        <!-- Pre-load-required JS Libraries -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>

        <!-- Modified carousel plugin -->
        <link rel="stylesheet" type="text/css" href="plugins/3DSlider/css/style.css" />
        <script type="text/javascript" src="plugins/3DSlider/js/modernizr.custom.53451.js"></script>
        <script type="text/javascript" src="plugins/3DSlider/js/jquery.gallery.js"></script>

    </head>
    <body ng-click="clickBody()">

<!-- modular HTML components here -->

        <!-- Angular Files -->
        <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-mocks/angular-mocks.js"></script>
        <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-soundmanager2/dist/angular-soundmanager2.js"></script>
        <script type="text/javascript" src="plugins/bootstrap/modal.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/gascript.js"></script><!-- here -->
        <script type="text/javascript" src="js/controllers.js"></script>
        <script type="text/javascript" src="js/directives.js"></script>
        <script type="text/javascript" src="js/filters.js"></script>
        <script type="text/javascript" src="js/services.js"></script>
        <script type="text/javascript" src="js/services2.js"></script>

        <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');

        </script>

    </body>
</html>

另请注意，我通过UI路由器注入方法将GA包含在我的应用中。

例如

http://jasonwatmore.com/post/2015/11/07/AngularJS-Google-Analytics-with-the-UI-Router.aspx

Answer 1

我最好的猜测是，在运行脚本时，DOM中不存在目标元素.like。这意味着click事件对任何事物都没有约束力;这也是您在粘贴到控制台时能够运行脚本的原因（此时，.like元素确实存在）。

也许尝试事件委托：

$('body').on('click', '.like', callbackFunction);

请参阅＆＃34;直接和委派活动＆＃34;：http://jqapi.com/#p=on

使用事件委派将确保事件触发body的后代元素，在本例中为.click元素。即使将来添加了更多的后代元素，也会触发click事件。

Answer 2

可能是因为 www.google-analytics.com/analytics.js 未在 gascripts.js 之前加载。开发控制台默认情况下会阻止脚本缓存。在评估页面函数之前强制加载脚本，这可能就是为什么这样做的原因..

您是否尝试过将Google Analytics（分析）js代码放入<head>部分？

此外，在对其执行操作之前，检查有效的 ga 对象是安全的。（window.ga或$ window.ga）

Using Google Analytics asynchronous code from external JS file

Google Analytics事件跟踪JS在开发者控制台中运行/工作，但不在ex文件中运行

2 个答案: