Analiza ruchu w aplikacji AngularJS

Karol Borkowski

1

O autorze

Karol Borkowski• Front-End Developer / Team

Leader @ Efigence • Pasjonat technologii Front-

End’owych • AngularJS geek

2

Agenda• Problem

• Wybór technologii

• Biblioteka Angulartics oraz jej implementacja

• Aplikacja testowa i wykorzystanie Angulartics

• Analiza statystyk

• Podsumowanie

3

Problem

• Jedna strona HTML, zmieniają się jedynie widoki

• Dynamiczne ładowanie treści

• Konieczność śledzenia ruchu po załadowaniu treści

4

Dlaczego to jest ważne?

• Marketing

• Biznes

• Trafność UX

• Okresowe badanie popytu

5

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

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

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

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

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

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

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

Aplikacja testowaMapa strony

13

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

Analiza ruchu w aplikacjiLiczba osób, które poprawnie wypełniły formularz

15

Analiza ruchu w aplikacjiNa którym etapie ludzie rezygnują z wypełniania formularza

16

Analiza ruchu w aplikacjiZ której podstrony ludzie wychodzą ze strony konkursu

17

Analiza ruchu w aplikacjiSkąd ludzie trafiają na stronę konkursu

18

Analiza ruchu w aplikacjiKtóre zdjęcie jest najpopularniejsze

19

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

Kontakt: karol.borkowski@efigence.com

Aplikacja: http://4developers.efigence.com/

Dziękuję

22