ridi / event-tracker Goto Github PK

View Code? Open in Web Editor NEW

16.0 12.0 4.0 648 KB

Provides tracking API that helps to send events to various logging services like Google Analytics, RIDI beacon system

License: MIT License

JavaScript 6.01% TypeScript 93.99%

google-analytics ridibooks tracking-plugin beacon

event-tracker's Introduction

@ridi/event-tracker

Provides tracking API that helps to send events to various logging services like Google Analytics, RIDI beacon system

Install

NPM

$ npm install @ridi/event-tracker

Browser

<script src="./node_modules/@ridi/event-tracker/dist/umd/bundle.min.js"></script>

Usage

import { Tracker, DeviceType } from "@ridi/event-tracker";

const tracker = new Tracker({
  deviceType: DeviceType.PC,
  userId: "ridi",
  serviceProps: {
    "prop1": "value1",
    "prop2": "value1"
  },
  beaconOptions: {
    use: true
  },
  gaOptions: {
    trackingId: "UA-XXXXXXXX-X",
    pathPrefix: "/PAPERSHOP",
    fields: {
      contentGroup5: "PAPERSHOP"
    }
  },
  pixelOptions: {
    pixelId: "1000000000"
  },
  tagManagerOptions: {
    trackingId: "GTM-XXXX00"
  },
  kakaoOptions: {
    trackingId: "12345678"
  },
  twitterOptions: {
    mainPid: "a1234",
    impressionPid: "b1632",
    booksSignUpPid: "a1245",
    selectStartSubscriptionPid: "z1253",
  }

});

tracker.initialize();

tracker.sendPageView(location.href);

tracker.sendEvent("Purchased", {
  t_id: "201808180210135",
  value: 29000
});

API

`new Tracker(MainTrackerOptions)`

MainTrackerOptions

Key	Required	Type	Description
`debug`	false	`boolean`	Defaults to `false` If set to `true`, All fired events are logged to browser via `console.log`
`development`	false	`boolean`	Represents the state of the system environment your application
`userId`	false	`string`	Logged user's identifier.
`deviceType`	true	`DeviceType`	Type of connected user's device. Please refer `DeviceType` type
`serviceProps`	false	`ServiceProp`	Additional properties related to specific service. Please refer `ServiceProp` type, which is `Record<string, string>`
`gaOptions`	false	`GAOptions`	Options related with Google Analytics tracking module
`gaOptions.trackingId`	true	`string`	GA Tracking ID like `UA-000000-01`.
`gaOptions.pathPrefix`	flase	`string`	Pathname prefix for manual content grouping.
`gaOptions.fields`	false	`GAFields`	GA configurable create only fields.
`beaconOptions`	false	`BeaconOptions`	Options related with Beacon tracking module
`beaconOptions.use`	false	`boolean`	Defaults to `true`, Specifies whether to send log data to beacon system
`beaconOptions.beaconSrc`	false	`string`	Source of the image to be used as a beacon
`pixelOptions`	false	`PixelOptions`	Options related with Pixel tracking module
`pixelOptions.pixelId`	true	`string	Array`
`tagManagerOptions`	false	`TagManagerOptions`	Options related with Google Tag Manager tracking module
`tagManagerOptions.trackingId`	true	`string`	Google Tag Manager Tracking ID like `GTM-XXXX00`
`gTagOptions`	false	`GTagOptions`	Options related with GTag tracking module
`gTagOptions.trackingId`	true	`string`	GTag Tracking ID like `AW-XXXX00`
`kakaoOptions.trackingId`	true	`string`	Kakao Pixel Tracking ID
`twitterOptions.mainTid`	true	`string`	Twitter Pixel universal tag type ID
`twitterOptions.impressionId`	true	`string`	ID of `impression` event tag

`Tracker.initialize()`

To use this library correctly, you need to call this method least once either before calling other methods or after.

written event records before calling initialize, this records flush after initialized.

`Tracker.sendPageView(href, referrer)`

Key	Required	Type	Description
`href`	true	string	e.g `https://example.com/path?key=value#hash`
`referrer`	false	string	e.g `https://google.com/search?q=example`

`Tracker.sendEvent(name, data)`

Key	Required	Type	Description
`name`	true	string	Indicating what the given event is
`data`	false	object	Data object to be sent with the event. e.g `{ color: 'red' }`

`Tracker.set(ChangeableTrackerOptions)`

Allow to set (change) MainTrackerOptions's attributes

ChangeableTrackerOptions

Key	Required	Type	Description
`userId`	false	`string`
`deviceType`	false	`DeviceType`

Develop

$ git clone https://github.com/ridi/event-tracker && cd tracking
$ npm install
$ npm run build

Test

$ npm run test

Publish

$ npm run deploy
$ # or
$ npm run build && npm publish --access public

LICENSE

MIT

event-tracker's People

Contributors

Stargazers

Watchers

Forkers

jeong-sik tirr-c broker4develop j132134

event-tracker's Issues

Automate documentation

https://github.com/jsdoc2md/jsdoc-to-markdown/wiki/How-to-document-TypeScript

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

BeaconTracker 가 Initialize 되지 않는 거 같습니다.

때문에 ruid 값이 없어 BeaconTracker sendPageView 시 this.ruid.value 를 찾지 못해 오류가 나는 상황입니다.

Version: 0.8.0

초기화 로그는 찍히기는 합니다.

[@ridi/event-tracker] Sending 'Initialize' event
index.js:71 userId	 null
index.js:71 deviceType	 "pc"
index.js:71 beaconOptions	 {"use":true,"beaconSrc":"https://s3.ap-northeast-2.amazonaws.com/beacon-ridibooks/beacon_ridibooks.gif"}
index.js:71 debug	 true
index.js:71 gaOptions	 {"trackingId":"UA-XXXXXX-2","fields":{"campaignName":"RENEWAL"}}
index.js:71 pixelOptions	 {"pixelId":["XXXXX","XXXXX"]}
index.js:71 tagManagerOptions	 {"trackingId":"GTM-XXXXXX"}
index.js:71 development	 true

트래커 초기화 코드

const tracker = new Tracker({
      // @ts-ignore
      userId: userId || null,
      // Todo device 판단  User-Agent ?
      deviceType: window.innerWidth > 999 ? DeviceType.PC : DeviceType.Mobile, // user agent 판단? 아니면?
      beaconOptions: {
        use: true, // Todo CSP Check
        beaconSrc:
          'https://s3.ap-northeast-2.amazonaws.com/beacon-ridibooks/beacon_ridibooks.gif',
      },
      debug: true,
      gaOptions: {
        trackingId: GA_KEY,
        fields: {
          campaignName: 'RENEWAL',
        },
      },
      pixelOptions: {
        pixelId: FB_KEYS,
      },
      tagManagerOptions: {
        trackingId: GTM_KEY,
      },
      development: true
    });
    return tracker;

트래커 호출 코드

useEffect(() => {
    setCookie(props.genre);
    const tracker = createTracker(loggedUser?.id || null);
    tracker.initialize();
    if (tracker) {
      try {
        tracker.set({ userId: loggedUser?.id || null });
        tracker.sendPageView(window.location.href, document.referrer);
      } catch (error) {
        console.log(error);
        captureException(error);
      }
    }
  }, [props.genre, loggedUser]);

에러 스택

TypeError: Cannot read property 'value' of undefined
    at BeaconTracker.push.../node_modules/@ridi/event-tracker/dist/cjs/trackers/beacon.js.BeaconTracker.sendBeacon (beacon.js:64)
    at BeaconTracker.sendPageView (beacon.js:75)
    at Tracker.sendPageView (index.js:102)
    at index.tsx:89
    at commitHookEffectList (react-dom.development.js:21893)
    at commitPassiveHookEffects (react-dom.development.js:21927)
    at HTMLUnknownElement.callCallback (react-dom.development.js:362)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
    at invokeGuardedCallback (react-dom.development.js:466)
    at flushPassiveEffectsImpl (react-dom.development.js:25338)
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12188)
    at flushPassiveEffects (react-dom.development.js:25305)
    at performSyncWorkOnRoot (react-dom.development.js:24163)
    at react-dom.development.js:12238
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12188)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12233)
    at flushSyncCallbackQueue (react-dom.development.js:12221)
    at unbatchedUpdates (react-dom.development.js:24381)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27662)
    at Object.hydrate (react-dom.development.js:27741)
    at renderReactElement (index.js:31)
    at _callee4$ (index.js:37)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _doRender (index.js:37)
    at doRender (index.js:33)
    at _callee2$ (index.js:21)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _render (index.js:21)
    at render (index.js:18)
    at _callee$ (index.js:18)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)