Analytics para Devs

Transcript

3. analytics para devs
4. 1 DE SETEMBRO DE 2013
5. Por onde começar?
8. instalação <script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000-X"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-000000-X'); </script>
9. instalação <script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000-X"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-000000-X'); </script>
10. instalação <script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000-X"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-000000-X'); </script>
11. instalação <script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000-X"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-000000-X'); </script>
12. <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-00000'); </script> instalação
13. <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-00000'); </script> instalação
14. relatórios built-in
15. tempo real
17. navegadores
19. sistemas operacionais
21. resoluções de tela
23. regiões
25. dispositivos
27. visualizações & eventos
28. visualização de página gtag('config', 'UA-000000-X')
29. gtag('config', 'UA-000000-X', { page_title: 'homepage', page_path: '/home', }) visualização de página
30. gtag('config', 'UA-000000-X') gtag('config', 'UA-111111-Y', { page_title: 'homepage', page_path: '/home', }) visualização de página
31. gtag('event', 'play', { event_category: 'videos', event_label: 'video promocional', }) eventos
32. gtag('event', 'auto play', { event_category: 'videos', event_label: 'video promocional', non_interaction: true, }) eventos
33. tem mais?
34. avaliando tempo
35. user timing
36. gtag('event', 'timing_complete', { name: 'load', value: performance.now(), event_category: 'JS Dependencies', }) carregamento
37. gtag('event', 'timing_complete', { name: 'load', value: performance.now(), event_category: 'JS Dependencies', }) carregamento
38. carregamento
41. export function getUserByID(id) { return axios .get(`/users/${id})}`) .then(response => response.data) } http request
42. export function getUserByID(id) { return axios .get(`/users/${id})}`) .then(response => response.data) } http request
43. axios.interceptors.request.use((config) => { config.startTime = Date.now() return config }, error => Promise.reject(error)) http request
44. client.interceptors.response.use((response) => { const successfulRequestTime = Date.now() - response.config.startTime return response }, (error) => { const failedRequestTime = Date.now() - error.config.startTime return Promise.reject(error) }) http request
45. client.interceptors.response.use((response) => { const successfulRequestTime = Date.now() - response.config.startTime return response }, (error) => { const failedRequestTime = Date.now() - error.config.startTime return Promise.reject(error) }) http request
46. gtag('event', 'timing_complete', { name: response.config.url, value: successfulRequestTime, event_category : 'api request', event_label: 'success', }) http request
47. gtag('event', 'timing_complete', { name: error.config.url, value: failedRequestTime, event_category : 'api request', event_label: 'fail', }) http request
48. request time
50. exceções & crashs
51. gtag('event', 'exception', { description: 'exception', fatal: false, }) coletando erros
52. window.addEventListener('error', (event) => { gtag('event', 'exception', { description: `${event.error.name}: ${event.error.message}`, fatal: false, }) }) coletando erros
54. coletando erros
55. coletando erros
56. coletando erros
57. coletando erros
58. measurement protocol
59. http api
60. debug mode
61. consumindo dados
62. serviços google
63. extraindo via api
64. poderoso não é mesmo?
65. MUITO OBRIGADO!