Śledzenie wyświetleń strony Google Analytics za pomocą AngularJS

Konfiguruję nową aplikację, używając AngularJS jako interfejsu. Wszystko po stronie klienta odbywa się za pomocą pushstate HTML5 i chciałbym móc śledzić moje wyświetlenia stron w Google Analytics.

Jeśli korzystasz ng-viewz aplikacji Angular, możesz nasłuchiwać $viewContentLoadedwydarzenia i przekazywać zdarzenia śledzenia do Google Analytics.

Zakładając, że masz ustawiony kod śledzenia w głównym pliku index.html o nazwie var _gaqi MyCtrl jest tym, co zdefiniowałeś w ng-controllerdyrektywie.

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

AKTUALIZACJA: do nowej wersji google-analytics użyj tej

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

Po załadowaniu nowego widoku AngularJSGoogle Analytics nie liczy go jako wczytywania nowej strony. Na szczęście istnieje sposób, aby ręcznie powiedzieć GA, aby zalogował adres URL jako nową odsłonę.

_gaq.push(['_trackPageview', '<url>']); zrobiłby to zadanie, ale jak powiązać to z AngularJS?

Oto usługa, z której możesz skorzystać:

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

Podczas definiowania modułu kątowego dołącz moduł analityczny w następujący sposób:

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

AKTUALIZACJA :

Powinieneś użyć nowego kodu śledzenia Universal Google Analytics z:

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

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

Szybki dodatek. Jeśli używasz nowego pliku analytics.js, to:

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

Dodatkowo jedna wskazówka jest taka, że ​​Google Analytics nie uruchomi się na localhost. Więc jeśli testujesz na localhost, użyj następującego zamiast domyślnego tworzenia ( pełna dokumentacja )

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

Stworzyłem usługę + filtr, który może wam w tym pomóc, a może także u niektórych innych dostawców, jeśli zdecydujecie się je dodać w przyszłości.

Sprawdź https://github.com/mgonto/angularytics i daj mi znać, jak to działa.

Dla mnie zadziałało połączenie odpowiedzi wynnwu i 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()
          });
        });
    }
  ]);

Ustawienie trzeciego parametru jako obiektu (zamiast tylko $ location.path ()) i użycie $ routeChangeSuccess zamiast $ stateChangeSuccess załatwiło sprawę.

Mam nadzieję że to pomoże.

Stworzyłem prosty przykład na github, stosując powyższe podejście.

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

Najlepszym sposobem na to jest użycie Menedżera tagów Google do uruchomienia tagów Google Analytics na podstawie detektorów historii. Są one wbudowane w interfejs GTM i umożliwiają łatwe śledzenie interakcji HTML5 po stronie klienta.

Włącz wbudowane zmienne Historia i utwórz wyzwalacz, aby uruchomić zdarzenie na podstawie zmian historii.

W twojej index.html, skopiować i wkleić fragment ga jednak usunąć wierszga('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>

Lubię nadać mu własny plik fabryczny my-google-analytics.jsz własnym zastrzykiem:

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
    }
  ]);

Odkryłem, że gtag()funkcja działała, zamiast ga()funkcji.

W pliku index.html w <head>sekcji:

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

W kodzie AngularJS:

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

Zamień TrackingIdna własny identyfikator śledzenia.

Jeśli ktoś chce zaimplementować za pomocą dyrektyw, zidentyfikuj (lub utwórz) div w pliku index.html (tuż pod tagiem body lub na tym samym poziomie DOM)

<div class="google-analytics"/>

a następnie dodaj następujący kod do dyrektywy

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

Jeśli używasz interfejsu użytkownika, możesz zasubskrybować zdarzenie $ stateChangeSuccess w następujący sposób:

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

Aby uzyskać pełny działający przykład, zobacz ten post na blogu

Użyj GA „ustaw”, aby upewnić się, że są wybierane trasy do analizy Google w czasie rzeczywistym. W przeciwnym razie kolejne połączenia z GA nie będą wyświetlane w panelu w czasie rzeczywistym.

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

Google zdecydowanie zaleca takie podejście, zamiast przekazywać trzeci parametr w „send”. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Użytkownicy korzystający z AngularUI Router zamiast ngRoute mogą użyć następującego kodu do śledzenia wyświetleń stron.

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

Deweloperzy tworzący pojedynczą stronę Aplikacje mogą korzystać z AutoTrack , która zawiera urlChangeTracker plugin, który obsługuje wszystkie z ważnych względów wymienionych w niniejszym przewodniku dla Ciebie. Zobacz dokumentację AUTOTRACK eksploatacji i instalacji instrukcji.

Używam AngluarJS w trybie HTML5. Znalazłem następujące rozwiązanie jako najbardziej niezawodne:

Użyj biblioteki angular-google-analytics . Zainicjuj to za pomocą czegoś takiego:

//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);
  }
]);

Następnie dodaj detektor do $ stateChangeSuccess 'i wyślij zdarzenie 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
            }
        });
    }
]);

W dowolnym momencie po zainicjowaniu użytkownika możesz wprowadzić tam Analytics i zadzwonić:

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

Używam interfejsu użytkownika i mój kod wygląda następująco:

$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);
});

W ten sposób mogę śledzić różne stany. Może ktoś uzna to za przydatne.

Osobiście lubię konfigurować dane analityczne z adresem URL szablonu zamiast bieżącej ścieżki. Wynika to głównie z tego, że moja aplikacja ma wiele niestandardowych ścieżek, takich jak message/:idlub profile/:id. Gdybym wysłał te ścieżki, miałbym tak wiele stron przeglądanych w ramach analizy, zbyt trudno byłoby sprawdzić, którzy użytkownicy odwiedzają najwięcej.

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

W mojej analizie uzyskuję teraz czyste wyświetlenia stron, takie jak user-profile.htmli message.htmlzamiast wielu stron profile/1, profile/2i profile/3. Teraz mogę przetwarzać raporty, aby zobaczyć, ile osób przegląda profile użytkowników.

Jeśli ktoś ma jakiś sprzeciw wobec tego, dlaczego jest to zła praktyka w zakresie analiz, chętnie o tym usłyszę. Zupełnie nowy w korzystaniu z Google Analytics, więc nie jestem pewien, czy jest to najlepsze podejście, czy nie.

Sugeruję skorzystanie z biblioteki analitycznej Segment i skorzystanie z naszego przewodnika Szybki start Angular . Będziesz mógł śledzić odwiedziny na stronie i działania użytkownika za pomocą jednego interfejsu API. Jeśli masz SPA, możesz pozwolić RouterOutletkomponentowi na obsługę podczas renderowania strony i używać go ngOnInitdo wywoływania pagepołączeń. Poniższy przykład pokazuje jeden ze sposobów, w jaki możesz to zrobić:

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

Jestem opiekunem https://github.com/segmentio/analytics-angular . Dzięki Segment będziesz mógł włączać i wyłączać różne miejsca docelowe jednym naciśnięciem przycisku, jeśli chcesz wypróbować wiele narzędzi analitycznych (obsługujemy ponad 250 miejsc docelowych) bez konieczności pisania dodatkowego kodu. 🙂

Łącząc się jeszcze bardziej z odpowiedzią Pedro Lopeza,

Dodałem to do mojego modułu ngGoogleAnalytis (którego używam ponownie w wielu aplikacjach):

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

w tym przypadku mam link w indeksie:

  <base href="/store/">

przydaje się, gdy używasz trybu HTML5 na angular.js v1.3

(usuń wywołanie funkcji replace (), jeśli tag podstawowy nie kończy się ukośnikiem /)

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()
          });
        }
      );
    }
  ]);

Jeśli szukasz pełnej kontroli nad nowym kodem śledzenia Google Analytics, możesz użyć mojego własnego Angular-GA .

To sprawia, że gadostępne poprzez iniekcję, więc jest to łatwe do testu. Nie robi żadnej magii, oprócz ustawiania ścieżki na każdej trasie Zmień. Nadal musisz wysłać odsłonę, tak jak tutaj.

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

Dodatkowo istnieje dyrektywa, gaktóra pozwala powiązać wiele funkcji analitycznych ze zdarzeniami, takimi jak:

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