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.

1. Analiza ruchu w
aplikacji AngularJS
Karol Borkowski
1

2. O autorze
Karol Borkowski
• Front-End Developer / Team
Leader @ Efigence
• Pasjonat technologii Front-
End’owych
• AngularJS geek
2

3. Agenda
• Problem
• Wybór technologii
• Biblioteka Angulartics oraz jej implementacja
• Aplikacja testowa i wykorzystanie Angulartics
• Analiza statystyk
• Podsumowanie
3

4. Problem
• Jedna strona HTML, zmieniają się jedynie widoki
• Dynamiczne ładowanie treści
• Konieczność śledzenia ruchu po załadowaniu treści
4

5. Dlaczego to jest ważne?
• Marketing
• Biznes
• Trafność UX
• Okresowe badanie popytu
5

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. 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. 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. 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. 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. 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. 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. Aplikacja testowa
Mapa strony
13

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. Analiza ruchu w aplikacji
Liczba osób, które poprawnie wypełniły formularz
15

16. Analiza ruchu w aplikacji
Na którym etapie ludzie rezygnują z wypełniania formularza
16

17. Analiza ruchu w aplikacji
Z której podstrony ludzie wychodzą ze strony konkursu
17

18. Analiza ruchu w aplikacji
Skąd ludzie trafiają na stronę konkursu
18

19. Analiza ruchu w aplikacji
Które zdjęcie jest najpopularniejsze
19

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. Kontakt:
karol.borkowski@efigence.com
Aplikacja:
http://4developers.efigence.com/

22. Dziękuję
22