Toward The Future Ahoy Tracker

Slide 1

Slide 1 text

Toward The Future Ahoy Tracker Tim Analisis Mar 10 2017 KMKLabs - Senayan City

Slide 2

Slide 2 text

Toward The Future - Ahoy Tracker Introduction about Tracker ● What is tracker ● Why we need tracker ● Example tracker ● Limitation existing tracker

Slide 3

Slide 3 text

Toward The Future - Ahoy Tracker What is Tracker Tracker is tools to measure and collect web data for purposes of understanding the effectiveness of a website, not limited for web traffic only but also for business and market research

Slide 4

Slide 4 text

Toward The Future - Ahoy Tracker Why We Need Tracker ● Help for analyzing web usage ● Measuring web traffic ● Market research Psssst, it can be used for tracking user behavior

Slide 5

Slide 5 text

Toward The Future - Ahoy Tracker Example of Web Tracker ● Google Analytics ● Adobe Analytics ● Bing Webmaster Tools ● Yandex Metrica

Slide 6

Slide 6 text

Toward The Future - Ahoy Tracker Limitation of Existing Tracker

Slide 7

Slide 7 text

Toward The Future - Ahoy Tracker The Answer to Life the Universe and Everything

Slide 8

Slide 8 text

Toward The Future - Ahoy Tracker Not This Ahoy

Slide 9

Slide 9 text

Toward The Future - Ahoy Tracker Overview ● Ahoy actually is Ruby Gem ● Ahoy.js only a small part of ahoy project (https://www.github.com/ankane/ahoy)

Slide 10

Slide 10 text

Toward The Future - Ahoy Tracker Why Ahoy? ● Open source ● We need send from both backend and front end ● We need custom data

Slide 11

Slide 11 text

Toward The Future - Ahoy Tracker Events Plenty Landing Page Rabbit MQ Presto Redshift ahoy

Slide 12

Slide 12 text

Toward The Future - Ahoy Tracker Ahoy under microscope How the Ahoy being loaded 1. Ahoy bootstrap written inside the application 2. Load the Real Ahoy asynchronously 3. After load completely, ahoy will set the visit and visitor_id inside the cookie 4. Real ahoy will evaluate the queue in bootstrap

Slide 13

Slide 13 text

Toward The Future - Ahoy Tracker Snippets - Ahoy bootstraper

Slide 14

Slide 14 text

Toward The Future - Ahoy Tracker Snippets - Async

Slide 15

Slide 15 text

Toward The Future - Ahoy Tracker Snippets - Set Cookie

Slide 16

Slide 16 text

Toward The Future - Ahoy Tracker Snippets - Consume Queue

Slide 17

Slide 17 text

Toward The Future - Ahoy Tracker What we do so far ● Adding test using testem ● Big refactoring for ahoy ● Add Deploy Script

Slide 18

Slide 18 text

Toward The Future - Ahoy Tracker Testem - Gotta Test ‘Em All ● Additional Layer for Jasmine ● Easily setup ● Automatic detect browser ● CI Integration

Slide 19

Slide 19 text

Toward The Future - Ahoy Tracker Snippets - testem.yml

Slide 20

Slide 20 text

Toward The Future - Ahoy Tracker Testem in Action

Slide 21

Slide 21 text

Toward The Future - Ahoy Tracker Refactoring Ahoy

Slide 22

Slide 22 text

Toward The Future - Ahoy Tracker Different with first version ahoy ● No queue -> Possible event lost if change page ● No bootstrap -> Blocking Javascript ● Dependent with JQuery ● TDD -> Trust Driven Development (NO TEST) (>ლ) ● Difficult to test ლ(ಠ益ಠლ)

Slide 23

Slide 23 text

Toward The Future - Ahoy Tracker Toward The Future ● Implementing Dependency Injection in Ahoy (http://www.yusufaytas.com/dependency-injection-in-javascript/) ● Implementing local storage (https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) ● Cross Domain Tracking (http://clearcode.cc/2013/04/alternatives-to-cookie- tracking/) ● Batch sending event