Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

4Developers 2015: Analiza ruchu w aplikacji AngularJS - Kamil Borkowski

397 views

Published on

Speaker: Kamil Borkowski

Language: Polish

Prezentacja na temat integracji i wykorzystania możliwości Google Analitycs z aplikacjami opartymi o AngularJS przy pomocy biblioteki Angulartics.

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015: Analiza ruchu w aplikacji AngularJS - Kamil Borkowski

  1. 1. Analiza ruchu w aplikacji AngularJS Karol Borkowski 1
  2. 2. O autorze Karol Borkowski • Front-End Developer / Team Leader @ Efigence • Pasjonat technologii Front- End’owych • AngularJS geek 2
  3. 3. Agenda • Problem • Wybór technologii • Biblioteka Angulartics oraz jej implementacja • Aplikacja testowa i wykorzystanie Angulartics • Analiza statystyk • Podsumowanie 3
  4. 4. Problem • Jedna strona HTML, zmieniają się jedynie widoki • Dynamiczne ładowanie treści • Konieczność śledzenia ruchu po załadowaniu treści 4
  5. 5. Dlaczego to jest ważne? • Marketing • Biznes • Trafność UX • Okresowe badanie popytu 5
  6. 6. Wybór technologii • Framework MVC AngularJS
 https://angularjs.org/ • Dostawca statystyk Google Analytics
 http://www.google.pl/intl/pl/analytics/ • Biblioteka Angulartics
 http://luisfarzati.github.io/angulartics/ 6
  7. 7. Angulartics • Wpięcie statystyk do aplikacji opartych o AngularJS • Integracja m. in. z Google Analytics, Kissmetrics, Mixpanel, Flurry, Piwik, Segment.io oraz wiele innych • Prosta implementacja 7
  8. 8. Implementacja Angulartics • W zależnościach aplikacji wystarczy dodać Angulartics oraz odpowiedni plugin dostawcy statystyk angular.module('myApp', ['angulartics', 'angulartics.google.analytics']) • Pamiętaj! Należy usunąć linię dotyczącą automatycznego śledzenia z kodu dostawcy statystyk // przykład z Google Analytics
 ga('send', 'pageview'); // <---- usuń linię! 8
  9. 9. Implementacja Angulartics • Angulartics domyślnie śledzi całą nawigację z routingu aplikacji • Można to wyłączyć w configu aplikacji dodając virtualPageviews(false) module.config(function ($analyticsProvider) {
 // wyłączenie automatycznego śledzenia
 $analyticsProvider.virtualPageviews(false); 9
  10. 10. Implementacja Angulartics • Śledzenie zdarzeń poprzez dodanie do elementu atrybutów analytics-on oraz analytics-event. • Należy o tym myśleć jako: on ’click’, śledź event ’name’: <a href="file.pdf" analytics-on="click" analytics-event="Download">Download</a> 10
  11. 11. Implementacja Angulartics • analytics-on powinien być zawsze obecny • Pozostałe atrybuty będą implikowane <!-- implikuje analytics-event z tekstu elementu -->
 <a href="file.pdf" analytics-on="click">Download</a> <!-- implikuje wartość analytics-on z typu elementu; dla odnośników jest 'click' -->
 <a href="file.pdf" analytics-on>Download</a> <!-- to samo co analytics-event="Step 3" -->
 <input type="submit" value="Step 3" analytics-on> 11
  12. 12. Implementacja Angulartics • Każdy dostawca statystyk posiada własne dodatkowe parametry śledzenia. Przykładowo Google Analytics ma category i label. Ustawiamy je jako atrybuty elementu zaczynające się od analytics- <button analytics-on analytics-event="Play" analytics-category="Videos" analytics- label="Interstellar">Play</button> • Do śledzenia zdarzeń z poziomu logiki aplikacji, należy dołączyć $analytics do kontrolera oraz wywołać odpowiednio metody pageTrack() lub eventTrack() module.controller('SampleCtrl', function ($analytics) {
 $analytics.pageTrack('/my/url');
 $analytics.eventTrack('eventName');
 $analytics.eventTrack('eventName', { category: 'category', label: 'label' }); 12
  13. 13. Aplikacja testowa Mapa strony 13
  14. 14. Co chcemy analizować? • Liczbę osób, które poprawnie wypełniły formularz • Na którym etapie ludzie rezygnują z wypełniania formularza • Z której podstrony ludzie wychodzą ze strony konkursu • Skąd ludzie trafiają na stronę konkursu • Które zdjęcie jest najpopularniejsze 14
  15. 15. Analiza ruchu w aplikacji Liczba osób, które poprawnie wypełniły formularz 15
  16. 16. Analiza ruchu w aplikacji Na którym etapie ludzie rezygnują z wypełniania formularza 16
  17. 17. Analiza ruchu w aplikacji Z której podstrony ludzie wychodzą ze strony konkursu 17
  18. 18. Analiza ruchu w aplikacji Skąd ludzie trafiają na stronę konkursu 18
  19. 19. Analiza ruchu w aplikacji Które zdjęcie jest najpopularniejsze 19
  20. 20. Podsumowanie • Dzięki bibliotece Angulartics możliwe jest używanie statystyk w aplikacjach SPA opartych o framework AngularJS jak dla zwykłych stron www • Istnieje możliwość integracji z wieloma różnymi dostawcami statystyk • Być może tego typu rozwiązania będą mogły być wykorzystane w sklepach internetowych typu SPA 20
  21. 21. Kontakt: karol.borkowski@efigence.com Aplikacja: http://4developers.efigence.com/
  22. 22. Dziękuję 22

×