Development

yarn start:dev

Use Local Tunnel

npx localtunnel --port 8080 --subdomain your-name

Build

Web Library

yarn build:web

This creates ./.build/pacman-{version}.js. You can use this file in browser:

<script src="pacman-1.2.0"></script>
<script>
  var pacmanClient = mkPacmanClient({
    rockmanId: "9718dee6f1404543ba0c8ad27c5be405",
    serverUrl:  "https://de-pacman.sam-media.com/api/v2/mstore",
    impressionNumber: 1,
    signalInterval: 1000 // in milliseconds
  });
  pacmanClient.sendFlowEvent({
    category: 'Flow',
    action: 'advance',
    label: 'msisdn-submitted',
    args:  {
      msisdn: '...'
    }
  })
</script>

Upload to S3

First make sure you have AWS CLI installed and configured.

yarn upload:s3

This will upload the contents of the .build directory to s3://mobirun/pacman

The final JS file will be at for example:

https://d2b4jmuffp1l21.cloudfront.net/pacman/pacman-1.2.0.js

Library Module

yarn build:module

This creates ./.build-lib/**.

import mkPacmanClient from 'pacman-client'
const pacmanClient = mkPacmanClient({
  rockmanId: "9718dee6f1404543ba0c8ad27c5be405",
  serverUrl:  "https://de-pacman.sam-media.com/api/v2/mstore",
  impressionNumber: 1,
  signalInterval: 1000 // in milliseconds
});
pacmanClient.sendFlowEvent({
  category: 'Flow',
  action: 'advance',
  label: 'msisdn-submitted',
  args:  {
    msisdn: '...'
  }
})

API

function mkPacmanClient(config: {
    serverUrl: string;
    rockmanId: string;
    impressionNumber: number;
    signalInterval: number; // in milliseconds, defaults to 1000
    events: EventsEmitter;
}): PacmanClient;

type PacmanClient = {
  sendFlowEvent: (flowEvent: FlowEvent) => void;
  sendCustomEvent: (typeName: string, eventName: string) => void;
  sendOptInFlowEvent: (optInFlowName: OptInFlowName) => void;
  predefinedFlowEvents: {
    onAdvanceInPreFlow: (label: string, args?: any) => void;
    onSubmitMSISDN: (i: {
        msisdn: string
    }) => void;
    onSubmitPIN: (i: {
        pin: string;
        msisdn?: string;
    }) => void;
  };
}

type FlowEvent {
  category: string;
  action?: string;
  label?: string;
  value?: number;
  args?: any;
}

type OptInFlowName = 
    "Block" | "Click to sms" | "Hybrid Pin" | "Msisdn to sms" | "Not available" 
  | "Pin" | "Redirect" | "To be determined" | "USSD" | "3G click";

Events API

const {events} = mkPacmanClient({...})

events.addEventListener('battery', ({charging, percent}) => {
  // 0 or 1 time
})

events.addEventListener('touchmove', ({deltaX, deltaY}) => {
  // 0 or many times
})

events.addEventListener('ftouch', () => {
  // 0 or 1 time
})

events.addEventListener('fmotion', () => {
  // 0 or 1 time
})

events.addEventListener('manusia', () => {
  // 0 or 1 time
})

List of event types:

• battery ☀️ (new)

  { t: 'battery', a: { p: [ 1, 0.8 ] }, s: 0 } 
  // p: [is_charging, battery_percent]

• battery-not-supported ☀️ (new)

  { t: 'battery-not-supported', s: 0 }

• hidden

  { t: 'hidden', s: 3276.3 }

• visible

  { t: 'visible', s: 3757.3 }

• blur

  { t: 'blur', a: { e: 'window' }, s: 3275.9 }

• focus

  { t: 'focus', a: { e: 'window' }, s: 3757.1 },

• ftouch ☀️ (client logic updated)

  { t: 'ftouch', s: 58.2 }

• fmotion ☀️ (client logic updated)

  { t: 'fmotion', s: 13.2 }

• full_load

  { t: 'full_load', a: { p: [ 449, 1034 ] }, s: 0.2 }

• html_load

  { t: 'html_load', a: { p: [ 449, 1034 ] }, s: 0.2 }

• resize

  { t: 'resize', a: { p: [ 449, 1034 ] }, s: 0.9 }

• scroll

  { t: 'scroll', a: { p: [ 0, 16 ] }, s: 0.5 }

• click

  This is actually touch event, for backward compatibility I keep using click.

  { t: 'click', a: { e: '', p: [ 268.3, 298.5 ] }, s: 107.2 }

• touchmove ☀️ (new)

  { t: 'touchmove', a: { p: [ -1.9, -180.1 ] }, s: 59.7 }
  // p: [delta X, delta Y]

• mouseclick ☀️ (new)

  Mouse click events

  { t: 'mouseclick', a: { e: '', p: [ 268, 298 ] }, s: 107.2 }

• unload ☀️ (new)

  { t: 'unload', s: 101.2 }

• flow_event

• get_sub_method

• pageview

  {
    t: 'pageview',
    s: 0,
    a: {
      t: 'pageview',
      s: 0,
        
      // timezone in minutes
      tz: 60, 
        
      // Notification.permission
      n: 'default', 
        
      // window.top != window.self
      f: 0, 
        
      // navigator.connection.type
      nt: 'wifi', 
        
      // navigator.connection.effectiveType
      ns: '4g', 
        
      // navigator.language
      l: 'nl-nl', 
        
      // navigator.languages
      lz: 'nl-nl en-gb nl', 
        
      // document.body.clientWidth ⚠️
      vw: 412, 
        
      // document.body.clientHeight ⚠️
      vh: 756, 
        
      // window.screen.width
      sw: 412, 
        
      // window.screen.height
      sh: 892, 
        
      // window.screen.colorDepth
      sd: 24, 
        
      // window.devicePixelRatio
      sr: 2.625, 
        
      // navigator.platform
      np: 'Linux armv8l', 
        
      // navigator.doNotTrack
      dnt: null, 
        
      // navigator.cookieEnabled
      c: 1, 
        
      // !!navigator.sessionStorage
      ss: 1, 
        
      // !!navigator.webdriver
      wd: 0, 
        
      // !!window.localStorage
      ls: 1, 
        
      // !!window.indexedDB
      ib: 1, 
        
      // !!window.openDatabase
      od: 1, 
        
      // !!document.hasFocus()
      hf: 1, 
        
      // !!!document.hidden
      iv: 1, 
        
      // lied languages
      ll: 0, 
        
      // lied resolution
      lr: 0, 
        
      // lied OS ☀️ (client logic updated)
      lo: 0, 
        
      // lied browser ☀️ (client logic updated)
      lb: 0 
    }
  }