2016-04-01 21 views
0

Googleアナリティクスのjavascriptイベントは、デベロッパーコンソールから完全に機能します。 しかし、は、外部jsファイルのページに含まれていると、まったく動作しません。何らかの理由でGoogleアナリティクスのイベントトラッキングJSは実行コンソールで動作しますが、exファイルでは動作しません

たとえば、コンソールに含まれている場合、以下のが実行されます。しかし、別の外部jsファイルに含まれている場合は表示されません。例えば。

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

私はまた、ヘッドとフッタの場所内の3つの異なる領域にインクルードを移動しようとしました。私はまた、


$(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 /gascript.js内部例えば

'準備DOMに'、GAイベントはJS追跡の様々なバージョン内のスクリプトを含むしようとしています。

<!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

+0

問題を修正できましたか? –

答えて

3

私の最高の推測では、スクリプトが実行されたときに、ターゲット要素が.like、DOMに存在しないということです。つまり、clickイベントは何もバインドされていません。これはコンソールに貼り付けられたときにスクリプトを実行できる理由です(その時点では、.like要素が存在します)。

おそらくイベントの委任を試してみてください。

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

は「ダイレクトと委任イベント」を参照してください:イベントの委任を使用してhttp://jqapi.com/#p=on

は、この場合にbodyの子孫要素のためのイベントが発生し、.click要素を確認します。将来、子孫要素が追加されても、クリックイベントは発生します。 をwww.google-analytics.com/analytics.jsので

1

おそらくgascripts.js前にロードされていません。デベロッパーコンソールはデフォルトでスクリプトキャッシュを防ぎます&は、ページ機能が評価される前にスクリプトを完全に読み込むように強制します。これが原因です。

<head>セクションにGoogleアナリティクスjsコードを入れてみましたか?

また、それに対して操作を実行する前に、有効なGAオブジェクトをチェックするのが安全だろう。 (window.gaまたは$ window)。ga)

Using Google Analytics asynchronous code from external JS file

関連する問題