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.
221
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.
Odpowiedzi:
Jeśli korzystasz
ng-view
z aplikacji Angular, możesz nasłuchiwać$viewContentLoaded
wydarzenia i przekazywać zdarzenia śledzenia do Google Analytics.Zakładając, że masz ustawiony kod śledzenia w głównym pliku index.html o nazwie
var _gaq
i MyCtrl jest tym, co zdefiniowałeś wng-controller
dyrektywie.AKTUALIZACJA: do nowej wersji google-analytics użyj tej
źródło
_trackPageview
i nie_trackPageView
... spędziłem 10 minut drapania głowy :)$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
zagwarantuje, że nie zostanie ona usunięta przez inne wydarzenie lub zmianę DOM, a użycierouteChangeSuccess
będzie uruchamiane za każdym razem, gdy zmienia się pasek adresu, zamiast zmieniać szablon źródła widoku. Czy to ma sens?$window.ga('send', 'pageview', { page: $location.path() });
zamiast$window._gaq...
części. Możesz też chcieć usunąćga('send', 'pageview');
z oryginalnego kodu GA, aby zapobiec duplikatom przy pierwszym lądowaniu na stronie.Po załadowaniu nowego widoku
AngularJS
Google 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ć:
Podczas definiowania modułu kątowego dołącz moduł analityczny w następujący sposób:
AKTUALIZACJA :
Powinieneś użyć nowego kodu śledzenia Universal Google Analytics z:
źródło
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
Pozwoli to na użyciegoogleAnalytics.track();
w swoim app.run () funkcjaźródło
app.run(["$rootScope", "$location", function(...
Szybki dodatek. Jeśli używasz nowego pliku analytics.js, to:
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 )
źródło
$window
aby uzyskać dostęp do okna (ga
prawdopodobnie wewnątrz Angular prawdopodobnie będzieundefined
). Możesz też chcieć usunąćga('send', 'pageview');
z oryginalnego kodu GA, aby zapobiec duplikatom przy pierwszym lądowaniu na stronie.$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
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.
źródło
Dla mnie zadziałało połączenie odpowiedzi wynnwu i dpineda.
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.
źródło
Stworzyłem prosty przykład na github, stosując powyższe podejście.
https://github.com/isamuelson/angularjs-googleanalytics
źródło
/account/:accountId
ścieżki aka,http://somesite.com/account/123
to teraz zgłosi ścieżkę jako/account?accountId=123
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.
źródło
W twojej
index.html
, skopiować i wkleić fragment ga jednak usunąć wierszga('send', 'pageview');
Lubię nadać mu własny plik fabryczny
my-google-analytics.js
z własnym zastrzykiem:źródło
page
bieżącą ścieżkę, a następnie przesyłasz ją jakopageview
? Jaka jest różnica w robieniu tego w ten sposób zamiast po prostu$window.ga('send', 'pageview', {page: $location.url()});
?Odkryłem, że
gtag()
funkcja działała, zamiastga()
funkcji.W pliku index.html w
<head>
sekcji:W kodzie AngularJS:
Zamień
TrackingId
na własny identyfikator śledzenia.źródło
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)
a następnie dodaj następujący kod do dyrektywy
źródło
Jeśli używasz interfejsu użytkownika, możesz zasubskrybować zdarzenie $ stateChangeSuccess w następujący sposób:
Aby uzyskać pełny działający przykład, zobacz ten post na blogu
źródło
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.
Google zdecydowanie zaleca takie podejście, zamiast przekazywać trzeci parametr w „send”. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
źródło
Użytkownicy korzystający z AngularUI Router zamiast ngRoute mogą użyć następującego kodu do śledzenia wyświetleń stron.
źródło
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.
źródło
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:
Następnie dodaj detektor do $ stateChangeSuccess 'i wyślij zdarzenie trackPage.
W dowolnym momencie po zainicjowaniu użytkownika możesz wprowadzić tam Analytics i zadzwonić:
źródło
Używam interfejsu użytkownika i mój kod wygląda następująco:
W ten sposób mogę śledzić różne stany. Może ktoś uzna to za przydatne.
źródło
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/:id
lubprofile/: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.W mojej analizie uzyskuję teraz czyste wyświetlenia stron, takie jak
user-profile.html
imessage.html
zamiast wielu stronprofile/1
,profile/2
iprofile/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.
źródło
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ć
RouterOutlet
komponentowi na obsługę podczas renderowania strony i używać gongOnInit
do wywoływaniapage
połączeń. Poniższy przykład pokazuje jeden ze sposobów, w jaki możesz to zrobić: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. 🙂
źródło
Łą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):
w tym przypadku mam link w indeksie:
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 /)
źródło
Jeśli szukasz pełnej kontroli nad nowym kodem śledzenia Google Analytics, możesz użyć mojego własnego Angular-GA .
To sprawia, że
ga
dostę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.Dodatkowo istnieje dyrektywa,
ga
która pozwala powiązać wiele funkcji analitycznych ze zdarzeniami, takimi jak:źródło