AngularJS로 Google 웹 로그 분석 페이지 조회수 추적

AngularJS를 프론트 엔드로 사용하여 새 앱을 설정하고 있습니다. 클라이언트 측의 모든 것은 HTML5 푸시 상태로 수행되며 Google 애널리틱스에서 내 페이지 조회수를 추적하고 싶습니다.

ng-viewAngular 앱에서 사용중인 경우 $viewContentLoaded이벤트를 수신 하고 추적 이벤트를 Google 웹 로그 분석으로 푸시 할 수 있습니다 .

이름이 var _gaqMyCtrl 인 기본 index.html 파일에 추적 코드를 설정했다고 가정하면 ng-controller지시문 에서 정의한 것입니다 .

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

업데이트 : 새로운 버전의 google-analytics는이 버전을 사용하십시오.

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

에 새보기가로드 AngularJS되면 Google 웹 로그 분석은 새 페이지로드로 계산하지 않습니다. 다행히도 GA에 URL을 새 페이지 뷰로 기록하도록 수동으로 지시하는 방법이 있습니다.

_gaq.push(['_trackPageview', '<url>']); 작업을 수행하지만 AngularJS와 바인딩하는 방법은 무엇입니까?

사용할 수있는 서비스는 다음과 같습니다.

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

각도 모듈을 정의 할 때 다음과 같이 분석 모듈을 포함하십시오.

angular.module('myappname', ['analytics']);

업데이트 :

다음과 함께 새로운 범용 Google 웹 로그 분석 추적 코드를 사용해야합니다.

$window.ga('send', 'pageview', {page: $location.url()});

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

빠른 추가. 새로운 analytics.js를 사용중인 경우 다음을 수행하십시오.

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

또한 한 가지 팁은 Google 웹 로그 분석이 localhost에서 실행되지 않는다는 것입니다. 따라서 localhost에서 테스트하는 경우 기본 작성 ( 전체 문서 ) 대신 다음을 사용하십시오.

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

나는 당신을 도울 수있는 서비스 + 필터를 만들었으며, 나중에 추가하도록 선택하면 다른 공급자와 함께 할 수도 있습니다.

https://github.com/mgonto/angularytics를 확인하고 이것이 어떻게 작동하는지 알려주세요.

wynnwu와 dpineda의 답변을 병합하는 것이 저에게 효과적이었습니다.

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

세 번째 매개 변수를 $ location.path () 대신 객체로 설정하고 $ stateChangeSuccess 대신 $ routeChangeSuccess를 사용하여 트릭을 수행했습니다.

도움이 되었기를 바랍니다.

위의 접근 방식을 사용하여 github에 대한 간단한 예를 만들었습니다.

https://github.com/isamuelson/angularjs-googleanalytics

이를 수행하는 가장 좋은 방법은 Google 태그 관리자를 사용하여 기록 리스너를 기반으로 Google 웹 로그 분석 태그를 실행하는 것입니다. 이것들은 GTM 인터페이스에 내장되어 있으며 클라이언트 측 HTML5 상호 작용을 쉽게 추적 할 수 있습니다.

내장 된 내역 변수를 활성화하고 내역 변경을 기반으로 이벤트를 발생시키는 트리거를 만듭니다.

에서 index.html코드 조각을 복사하여 붙여 넣으십시오.ga('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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');
  ga('create', 'UA-XXXXXXXX-X');
</script>

my-google-analytics.js자체 주입이있는 자체 공장 파일 입니다.

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);

gtag()함수 대신 함수가 작동 한다는 것을 알았습니다 ga().

index.html 파일의 <head>섹션 내에서 :

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

AngularJS 코드에서 :

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

TrackingId자신의 추적 ID로 교체하십시오 .

누군가 지시문을 사용하여 구현하려는 경우 index.html에서 body 태그 바로 아래 또는 동일한 DOM 수준에서 div를 식별하거나 만듭니다.

<div class="google-analytics"/>

지시문에 다음 코드를 추가하십시오.

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});

ui-router를 사용하는 경우 다음과 같이 $ stateChangeSuccess 이벤트를 구독 할 수 있습니다.

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

완전한 작업 예제는 이 블로그 게시물을 참조하십시오.

Google 실시간 분석을 위해 경로를 선택하려면 GA 'set'을 사용하십시오. 그렇지 않으면 이후의 GA 호출은 실시간 패널에 표시되지 않습니다.

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google은 일반적으로 '보내기'에서 3 번째 매개 변수를 전달하는 대신이 방법을 강력히 권장합니다. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

ngRoute 대신 AngularUI 라우터를 사용하는 사용자에게는 다음 코드를 사용하여 페이지보기를 추적 할 수 있습니다.

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

단일 페이지 애플리케이션을 작성하는 개발자 는이 안내서에 나열된 모든 중요 고려 사항을 처리 하는 urlChangeTracker 플러그인 이 포함 된 autotrack 을 사용할 수 있습니다. 사용법 및 설치 지침 은 자동 추적 설명서 를 참조하십시오 .

html5 모드에서 AngluarJS를 사용하고 있습니다. 가장 신뢰할 수있는 솔루션으로 다음을 발견했습니다.

angular-google-analytics 라이브러리를 사용하십시오 . 다음과 같이 초기화하십시오.

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

그런 다음 $ stateChangeSuccess '에 리스너를 추가하고 trackPage 이벤트를 보냅니다.

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

언제든지 사용자를 활성화하면 여기에 Analytics를 주입하고 전화를 걸 수 있습니다.

Analytics.set('&uid', user.id);

ui-router를 사용하고 있으며 코드는 다음과 같습니다.

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

이 방법으로 다른 상태를 추적 할 수 있습니다. 누군가가 유용하다고 생각할 수도 있습니다.

개인적으로 현재 경로 대신 템플릿 URL을 사용하여 분석을 설정하고 싶습니다. 이 내 응용 프로그램과 같은 많은 사용자 정의 경로가 주로 때문입니다 message/:id또는 profile/:id. 이러한 경로를 보내려면 웹 로그 분석에 너무 많은 페이지가 표시되므로 가장 많이 방문하는 페이지를 확인하기가 너무 어려울 것입니다.

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

지금과 같은 내 분석에서 청소 페이지 뷰 수 user-profile.html및 message.html대신있는 많은 페이지를 profile/1, profile/2그리고profile/3 . 이제 보고서를 처리하여 얼마나 많은 사용자가 사용자 프로필을보고 있는지 확인할 수 있습니다.

왜 이것이 분석 내에서 이것이 나쁜 습관인지에 반대하는 의견이 있다면, 나는 그것에 대해 기뻐할 것입니다. Google 웹 로그 분석 사용에 익숙하지 않으므로 이것이 최선의 접근인지 아닌지 확실하지 않습니다.

세그먼트 분석 라이브러리를 사용하고 Angular 빠른 시작 안내서를 따르는 것이 좋습니다 . 단일 API로 페이지 방문을 추적하고 사용자 행동을 추적 할 수 있습니다. SPA가있는 경우 RouterOutlet페이지가 렌더링 될 때 구성 요소가 처리 ngOnInit하고 호출을 호출 하는 데 사용할 수 page있습니다. 아래 예제는이를 수행 할 수있는 한 가지 방법을 보여줍니다.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

https://github.com/segmentio/analytics-angular 의 관리자입니다 . 세그먼트를 사용하면 추가 코드를 작성하지 않고도 여러 분석 도구 (250 개 이상의 대상을 지원함)를 사용하려는 경우 스위치를 사용하여 여러 대상을 켜거나 끌 수 있습니다. 🙂

페드로 로페즈의 대답으로 훨씬 더 합병

나는 이것을 ngGoogleAnalytis 모듈 (많은 앱에서 재사용)에 추가했다.

var base = $('base').attr('href').replace(/\/$/, "");

이 경우 색인 링크에 태그가 있습니다.

  <base href="/store/">

angular.js v1.3에서 html5 모드를 사용할 때 유용합니다

(기본 태그가 슬래시로 끝나지 않으면 replace () 함수 호출을 제거하십시오.)

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);

Google 웹 로그 분석의 새로운 추적 코드를 완전히 제어하려면 고유 한 Angular-GA를 사용할 수 있습니다 .

그것은 수 ga그래서 시험에 쉽게 주입을 통해 가능합니다. 모든 routeChange에서 경로를 설정하는 것 외에는 마법을 사용하지 않습니다. 여전히 여기처럼 페이지 뷰를 보내야합니다.

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

또한 다음 ga과 같이 여러 분석 기능을 이벤트에 바인딩 할 수 있는 지시문 이 있습니다.

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>