From 9131a72a47690912db9b536186d05120daabd115 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 12:14:23 -0700 Subject: Replace calls to google analytics with calls to heap --- packages/website/ts/utils/analytics.ts | 80 ++++++++++++++++++++++++++-------- packages/website/ts/utils/configs.ts | 1 + packages/website/ts/utils/constants.ts | 1 + packages/website/ts/utils/utils.ts | 1 + 4 files changed, 65 insertions(+), 18 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index f4bfa083f..9a1684813 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,27 +1,71 @@ import * as _ from 'lodash'; -import * as ReactGA from 'react-ga'; -import { InjectedWeb3 } from 'ts/types'; +import { InjectedWeb3, ObjectMap, Order } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { utils } from 'ts/utils/utils'; -export const analytics = { - init(): void { - ReactGA.initialize(configs.GOOGLE_ANALYTICS_ID); - }, - logEvent(category: string, action: string, label: string, value?: any): void { - ReactGA.event({ - category, - action, - label, - value, - }); - }, - async logProviderAsync(web3IfExists: InjectedWeb3): Promise { +export interface HeapAnalytics { + indentify(id: string, idType: string): void; + track(eventName: string, eventProperties?: ObjectMap): void; + resetIdentity(): void; + addUserProperties(properties: ObjectMap): void; + addEventProperties(properties: ObjectMap): void; + removeEventProperty(property: string): void; + clearEventProperties(): void; +} + +export class Analytics implements HeapAnalytics { + private _heap: HeapAnalytics; + public static init(): Analytics { + const heap = (window as any).heap; + if (!_.isUndefined(heap)) { + return new Analytics(heap); + } else { + throw new Error('Could not find the Heap SDK on the page.'); + } + } + constructor(heap: HeapAnalytics) { + this._heap = heap; + } + // HeapAnalytics Wrappers + public indentify(id: string, idType: string): void { + this._heap.indentify(id, idType); + } + public track(eventName: string, eventProperties?: ObjectMap): void { + this._heap.track(eventName, eventProperties); + } + public resetIdentity(): void { + this._heap.resetIdentity(); + } + public addUserProperties(properties: ObjectMap): void { + this._heap.addUserProperties(properties); + } + public addEventProperties(properties: ObjectMap): void { + this._heap.addEventProperties(properties); + } + public removeEventProperty(property: string): void { + this._heap.removeEventProperty(property); + } + public clearEventProperties(): void { + this._heap.clearEventProperties(); + } + // Custom methods + public trackOrderEvent(eventName: string, order: Order): void { + const orderLoggingData = { + takerTokenAmount: order.signedOrder.takerTokenAmount, + makeTokenAmount: order.signedOrder.makerTokenAmount, + takerToken: order.metadata.takerToken.symbol, + makerToken: order.metadata.makerToken.symbol, + }; + this.track(eventName, orderLoggingData); + } + public async logProviderAsync(web3IfExists: InjectedWeb3): Promise { await utils.onPageLoadAsync(); const providerType = !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider) ? utils.getProviderType(web3IfExists.currentProvider) : 'NONE'; - ReactGA.ga('set', 'dimension1', providerType); - }, -}; + } +} + +// Assume heap library has loaded. +export const analytics = Analytics.init(); diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 97aabd13d..a2fd6a47e 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -23,6 +23,7 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION, GOOGLE_ANALYTICS_ID: 'UA-98720122-1', + HEAP_APP_ID: '410099666', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', OUTDATED_WRAPPED_ETHERS: [ diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index e43f541bf..d52b9b392 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -34,6 +34,7 @@ export const constants = { PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', + HEAP_APP_ID: '410099666', S3_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/doc-jsons', S3_STAGING_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/staging-doc-jsons', SUCCESS_STATUS: 200, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 8c76a7592..df7f8d10f 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -313,6 +313,7 @@ export const utils = { const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; return baseUrl; }, + // TODO: Fix this, it's a lie. async onPageLoadAsync(): Promise { if (document.readyState === 'complete') { return; // Already loaded -- cgit v1.2.3 From 098322c56475581df5bd80e12cb6c511963e4daf Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 15:39:12 -0700 Subject: Integrate heap analytics --- packages/website/ts/utils/analytics.ts | 56 ++++++++++++++++++++++------------ packages/website/ts/utils/utils.ts | 12 +++----- 2 files changed, 41 insertions(+), 27 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 9a1684813..961f9af5a 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,9 +1,9 @@ import * as _ from 'lodash'; -import { InjectedWeb3, ObjectMap, Order } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { ObjectMap, Order } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface HeapAnalytics { + loaded: boolean; indentify(id: string, idType: string): void; track(eventName: string, eventProperties?: ObjectMap): void; resetIdentity(): void; @@ -13,12 +13,15 @@ export interface HeapAnalytics { clearEventProperties(): void; } -export class Analytics implements HeapAnalytics { +export class Analytics { private _heap: HeapAnalytics; public static init(): Analytics { + return new Analytics(Analytics.getHeap()); + } + public static getHeap(): HeapAnalytics { const heap = (window as any).heap; if (!_.isUndefined(heap)) { - return new Analytics(heap); + return heap; } else { throw new Error('Could not find the Heap SDK on the page.'); } @@ -27,45 +30,58 @@ export class Analytics implements HeapAnalytics { this._heap = heap; } // HeapAnalytics Wrappers - public indentify(id: string, idType: string): void { + public async indentifyAsync(id: string, idType: string): Promise { + await this._heapLoadedGuardAsync(); this._heap.indentify(id, idType); } - public track(eventName: string, eventProperties?: ObjectMap): void { + public async trackAsync(eventName: string, eventProperties?: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.track(eventName, eventProperties); } - public resetIdentity(): void { + public async resetIdentityAsync(): Promise { + await this._heapLoadedGuardAsync(); this._heap.resetIdentity(); } - public addUserProperties(properties: ObjectMap): void { + public async addUserPropertiesAsync(properties: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.addUserProperties(properties); } - public addEventProperties(properties: ObjectMap): void { + public async addEventPropertiesAsync(properties: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.addEventProperties(properties); } - public removeEventProperty(property: string): void { + public async removeEventPropertyAsync(property: string): Promise { + await this._heapLoadedGuardAsync(); this._heap.removeEventProperty(property); } - public clearEventProperties(): void { + public async clearEventPropertiesAsync(): Promise { + await this._heapLoadedGuardAsync(); this._heap.clearEventProperties(); } // Custom methods - public trackOrderEvent(eventName: string, order: Order): void { + public async trackOrderEventAsync(eventName: string, order: Order): Promise { const orderLoggingData = { takerTokenAmount: order.signedOrder.takerTokenAmount, makeTokenAmount: order.signedOrder.makerTokenAmount, takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; - this.track(eventName, orderLoggingData); + this.trackAsync(eventName, orderLoggingData); } - public async logProviderAsync(web3IfExists: InjectedWeb3): Promise { - await utils.onPageLoadAsync(); - const providerType = - !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider) - ? utils.getProviderType(web3IfExists.currentProvider) - : 'NONE'; + /** + * Heap is not available as a UMD module, and additionally has the strange property of replacing itself with + * a different object once it's loaded. + * Instead of having an await call before every analytics use, we opt to have the awaiting logic in here by + * guarding every API call with the guard below. + */ + private async _heapLoadedGuardAsync(): Promise { + if (this._heap.loaded) { + return undefined; + } + await utils.onPageLoadPromise; + // HACK: Reset heap to loaded heap + this._heap = (window as any).heap; } } -// Assume heap library has loaded. export const analytics = Analytics.init(); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index df7f8d10f..bd6a57eea 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -313,15 +313,13 @@ export const utils = { const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; return baseUrl; }, - // TODO: Fix this, it's a lie. - async onPageLoadAsync(): Promise { + onPageLoadPromise: new Promise((resolve, _reject) => { if (document.readyState === 'complete') { - return; // Already loaded + resolve(); + return; } - return new Promise((resolve, _reject) => { - window.onload = () => resolve(); - }); - }, + window.onload = () => resolve(); + }), getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; let parsedProviderName = constructorName; -- cgit v1.2.3 From 1ee78062d7731b35e47c0d4c4e30a68628f364a9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 15:43:37 -0700 Subject: Remove unused configs and constants --- packages/website/ts/utils/configs.ts | 1 - packages/website/ts/utils/constants.ts | 1 - 2 files changed, 2 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index a2fd6a47e..97aabd13d 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -23,7 +23,6 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION, GOOGLE_ANALYTICS_ID: 'UA-98720122-1', - HEAP_APP_ID: '410099666', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', OUTDATED_WRAPPED_ETHERS: [ diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index d52b9b392..e43f541bf 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -34,7 +34,6 @@ export const constants = { PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', - HEAP_APP_ID: '410099666', S3_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/doc-jsons', S3_STAGING_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/staging-doc-jsons', SUCCESS_STATUS: 200, -- cgit v1.2.3 From 0941e0a929f2fe3ef6d0cf1de5a1274f5f45f031 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 16:50:00 -0700 Subject: Add no-floating-promises ignore comments --- packages/website/ts/utils/analytics.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 961f9af5a..2ff9f8918 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -66,6 +66,7 @@ export class Analytics { takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; + // tslint:disable-next-line:no-floating-promises this.trackAsync(eventName, orderLoggingData); } /** -- cgit v1.2.3 From 1df074b73e05adf669b0cedc4bb1473e9e5631db Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 16:57:03 -0700 Subject: Make Analytics API non-async --- packages/website/ts/utils/analytics.ts | 47 +++++++++++++++------------------- packages/website/ts/utils/utils.ts | 2 +- 2 files changed, 22 insertions(+), 27 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 2ff9f8918..e39998d7a 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -12,7 +12,6 @@ export interface HeapAnalytics { removeEventProperty(property: string): void; clearEventProperties(): void; } - export class Analytics { private _heap: HeapAnalytics; public static init(): Analytics { @@ -29,45 +28,39 @@ export class Analytics { constructor(heap: HeapAnalytics) { this._heap = heap; } + // tslint:disable:no-floating-promises // HeapAnalytics Wrappers - public async indentifyAsync(id: string, idType: string): Promise { - await this._heapLoadedGuardAsync(); - this._heap.indentify(id, idType); + public indentify(id: string, idType: string): void { + this._heapLoadedGuardAsync(() => this._heap.indentify(id, idType)); } - public async trackAsync(eventName: string, eventProperties?: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.track(eventName, eventProperties); + public track(eventName: string, eventProperties?: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.track(eventName, eventProperties)); } - public async resetIdentityAsync(): Promise { - await this._heapLoadedGuardAsync(); - this._heap.resetIdentity(); + public resetIdentity(): void { + this._heapLoadedGuardAsync(() => this._heap.resetIdentity()); } - public async addUserPropertiesAsync(properties: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.addUserProperties(properties); + public addUserProperties(properties: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.addUserProperties(properties)); } - public async addEventPropertiesAsync(properties: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.addEventProperties(properties); + public addEventProperties(properties: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.addEventProperties(properties)); } - public async removeEventPropertyAsync(property: string): Promise { - await this._heapLoadedGuardAsync(); - this._heap.removeEventProperty(property); + public removeEventProperty(property: string): void { + this._heapLoadedGuardAsync(() => this._heap.removeEventProperty(property)); } - public async clearEventPropertiesAsync(): Promise { - await this._heapLoadedGuardAsync(); - this._heap.clearEventProperties(); + public clearEventProperties(): void { + this._heapLoadedGuardAsync(() => this._heap.clearEventProperties()); } + // tslint:enable:no-floating-promises // Custom methods - public async trackOrderEventAsync(eventName: string, order: Order): Promise { + public trackOrderEvent(eventName: string, order: Order): void { const orderLoggingData = { takerTokenAmount: order.signedOrder.takerTokenAmount, makeTokenAmount: order.signedOrder.makerTokenAmount, takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; - // tslint:disable-next-line:no-floating-promises - this.trackAsync(eventName, orderLoggingData); + this.track(eventName, orderLoggingData); } /** * Heap is not available as a UMD module, and additionally has the strange property of replacing itself with @@ -75,13 +68,15 @@ export class Analytics { * Instead of having an await call before every analytics use, we opt to have the awaiting logic in here by * guarding every API call with the guard below. */ - private async _heapLoadedGuardAsync(): Promise { + private async _heapLoadedGuardAsync(callback: () => void): Promise { if (this._heap.loaded) { + callback(); return undefined; } await utils.onPageLoadPromise; // HACK: Reset heap to loaded heap this._heap = (window as any).heap; + callback(); } } diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index bd6a57eea..9c5e12ec7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -318,7 +318,7 @@ export const utils = { resolve(); return; } - window.onload = () => resolve(); + window.onload = resolve; }), getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; -- cgit v1.2.3 From 65af78c85d7872891c0bffeac76687a72a61dd59 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 18:20:46 -0700 Subject: Fix indentify typo --- packages/website/ts/utils/analytics.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index e39998d7a..e5a1ddfa4 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -4,7 +4,7 @@ import { utils } from 'ts/utils/utils'; export interface HeapAnalytics { loaded: boolean; - indentify(id: string, idType: string): void; + identify(id: string, idType: string): void; track(eventName: string, eventProperties?: ObjectMap): void; resetIdentity(): void; addUserProperties(properties: ObjectMap): void; @@ -30,8 +30,8 @@ export class Analytics { } // tslint:disable:no-floating-promises // HeapAnalytics Wrappers - public indentify(id: string, idType: string): void { - this._heapLoadedGuardAsync(() => this._heap.indentify(id, idType)); + public identify(id: string, idType: string): void { + this._heapLoadedGuardAsync(() => this._heap.identify(id, idType)); } public track(eventName: string, eventProperties?: ObjectMap): void { this._heapLoadedGuardAsync(() => this._heap.track(eventName, eventProperties)); -- cgit v1.2.3 From 2e5ff53d7271509accc226e83d76d1785350b1d2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 13 Jul 2018 12:42:01 +0200 Subject: -fetch'; --- packages/website/ts/utils/doc_utils.ts | 6 +++--- packages/website/ts/utils/fetch_utils.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'packages/website/ts/utils') diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index 7768835fb..1627b9b0c 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -1,5 +1,5 @@ import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs'; -import { logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0xproject/utils'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; @@ -16,7 +16,7 @@ export const docUtils = { return versionToFilePath; }, async getVersionFileNamesAsync(s3DocJsonRoot: string, folderName: string): Promise { - const response = await fetch(s3DocJsonRoot); + const response = await fetchAsync(s3DocJsonRoot); if (response.status !== 200) { // TODO: Show the user an error message when the docs fail to load const errMsg = await response.text(); @@ -73,7 +73,7 @@ export const docUtils = { }, async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise { const endpoint = `${s3DocJsonRoot}/${filePath}`; - const response = await fetch(endpoint); + const response = await fetchAsync(endpoint); if (response.status !== 200) { // TODO: Show the user an error message when the docs fail to load const errMsg = await response.text(); diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index 513f7e479..f159e3180 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -1,4 +1,4 @@ -import { logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import * as queryString from 'query-string'; @@ -19,14 +19,14 @@ export const fetchUtils = { async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise { const query = queryStringFromQueryParams(queryParams); const url = `${baseUrl}${path}${query}`; - const response = await fetch(url); + const response = await fetchAsync(url); logErrorIfPresent(response, url); const result = await response.json(); return result; }, async postAsync(baseUrl: string, path: string, body: object): Promise { const url = `${baseUrl}${path}`; - const response = await fetch(url, { + const response = await fetchAsync(url, { method: 'POST', headers: { 'Content-Type': 'application/json', -- cgit v1.2.3