Отслеживание событий в Google Analytics JS запускается / работает в консоли разработчика, но не из ex-файла

0

Мои события javascript в Google Analytics отлично работают с консолью разработчика. Но они не работают вообще, если они включены на странице из внешнего js файла.. по какой-то причине.

Например; ниже будет запускаться при включении в консоль. Но не будет включен в отдельный внешний файл js. например.

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

Не я также попробовал переместить включение в 3 разных области в местах головы и нижнего колонтитула. Я также пытался включить скрипт в различные версии "on dom ready",

Например, отслеживание событий GA JS внутри /gascript.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>

Также обратите внимание: я включаю GA в свое приложение через метод инъекции маршрутизатора UI.

например.

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

  • 0
    Удалось ли вам решить проблему?
Теги:
google-analytics

2 ответа

3
Лучший ответ

Мое лучшее предположение заключается в том, что целевые элементы. .like не существуют в DOM, когда скрипт запущен. Это означает, что событие click не привязано ни к чему; поэтому вы можете запускать скрипт при вставке в консоль (в этот момент существуют .like элементы).

Возможно, попробуйте делегирование событий:

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

См. "Прямые и делегированные события": http://jqapi.com/#p=on

Использование делегирования событий гарантирует, что событие срабатывает для потомков элементов body, в этом случае .click элементов. Событие click будет срабатывать, даже если в будущем будет добавлено больше элементов-потомков.

Поделиться
1

Вероятно, потому, что перед gugcripts.js не загружается www.google-analytics.com/analytics.js. Консоль разработчика предотвращает кеш-скрипт по умолчанию и полностью загружает скрипты до того, как функции страницы оцениваются, и это может быть причиной, по которой это работает.

Пробовали ли вы использовать js-код google analytics в разделе <head>?

Кроме того, перед выполнением операций над ним было бы безопасно проверять действительный объект ga. (window.ga или $ window.ga)

Использование асинхронного кода Google Analytics из внешнего JS файла

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню