analytics-client - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1-roman-web-fdda3601c5cf7b1e70b327b239b1c9a23af91e18

CHANGELOG.md

@@ -7,2 +7,7 @@ # Change Log
 
+# v0.5.1
+## (2020-04-13)
+
+* Remove mixpanel dependency from url params code [Roman Mazur]
+
 # v0.5.0
@@ -9,0 +14,0 @@ ## (2020-04-13)

dist/package.json

 {
     "name": "analytics-client",
-    "version": "0.5.0",
+    "version": "0.5.1-roman-web-fdda3601c5cf7b1e70b327b239b1c9a23af91e18",
     "description": "Convenient builders to compose analytics tools",
@@ -5,0 +5,0 @@ "repository": {

dist/src/url-params.d.ts

@@ -1,6 +0,6 @@
-import { Mixpanel } from 'mixpanel-browser';
+import { Client } from './client';
 export declare class AnalyticsUrlParams {
-    private mixpanel?;
+    private client?;
     private deviceIds;
-    constructor(mixpanel?: Mixpanel | undefined);
+    constructor(client?: Client | undefined);
     private setDeviceIds;
@@ -7,0 +7,0 @@ clearCookies(): void;

dist/src/url-params.js

@@ -7,4 +7,4 @@ "use strict";
 var AnalyticsUrlParams = (function () {
-    function AnalyticsUrlParams(mixpanel) {
-        this.mixpanel = mixpanel;
+    function AnalyticsUrlParams(client) {
+        this.client = client;
         this.deviceIds = new Set();
@@ -33,9 +33,6 @@ var storedValue = Cookies.get(config_1.COOKIES_DEVICE_IDS);
         if (passedDeviceId) {
-            var originalMixpanelId = this.mixpanel != null ? this.mixpanel.get_distinct_id() : null;
-            var newCurrentDeviceId = this.setDeviceIds(passedDeviceId, originalMixpanelId);
-            if (this.mixpanel != null && newCurrentDeviceId) {
-                this.mixpanel.register({
-                    distinct_id: newCurrentDeviceId,
-                    $device_id: newCurrentDeviceId,
-                });
+            var originalDeviceId = this.client != null ? this.client.deviceId() : null;
+            var newCurrentDeviceId = this.setDeviceIds(passedDeviceId, originalDeviceId);
+            if (this.client != null && newCurrentDeviceId != null) {
+                this.client.amplitude().setDeviceId(newCurrentDeviceId);
             }
@@ -50,8 +47,8 @@ params.delete(config_1.URL_PARAM_DEVICE_ID);
     AnalyticsUrlParams.prototype.allDeviceIds = function () {
-        var mixpanelId = this.mixpanel ? this.mixpanel.get_distinct_id() : null;
-        if (mixpanelId == null) {
+        var currentId = this.client != null ? this.client.deviceId() : null;
+        if (currentId == null) {
             return Array.from(this.deviceIds);
         }
         var res = new Set(this.deviceIds);
-        res.add(mixpanelId);
+        res.add(currentId);
         return Array.from(res);
@@ -58,0 +55,0 @@ };

dist/src/web.js

@@ -7,2 +7,4 @@ "use strict";
             client.track(name ? name : 'Page View', {
+                current_url: window.location.href,
+                current_url_path: window.location.pathname,
                 metrics: getPageloadMetrics(),
@@ -9,0 +11,0 @@ });

dist/test/url-params.test.js

@@ -34,21 +34,26 @@ "use strict";
 });
-var mpMock = function () {
+var clientMock = function () {
     return ({
-        registerParams: null,
-        distinctIdRetrieved: false,
-        get_distinct_id: function () {
+        setDeviceIdParams: null,
+        deviceIdRetrieved: false,
+        deviceId: function () {
             this.distinctIdRetrieved = true;
             return 'test_mp_distinct_id';
         },
-        register: function (params) {
-            this.registerParams = params;
+        amplitude: function () {
+            var mock = this;
+            return {
+                setDeviceId: function (id) {
+                    mock.setDeviceIdParams = id;
+                },
+            };
         },
     });
 };
-var mpUrlParameters = function () {
-    var mp = mpMock();
+var clientUrlParameters = function () {
+    var mp = clientMock();
     return [new url_params_1.AnalyticsUrlParams(mp), mp];
 };
 test('use mixpanel distinct ID', function () {
-    var urlParams = mpUrlParameters()[0];
+    var urlParams = clientUrlParameters()[0];
     urlParams.consumeUrlParameters('d_id=d1,d2,d3&other=value');
@@ -60,8 +65,8 @@ urlParams.consumeUrlParameters('d_id=d2,d3,d4&other=value');
 });
-test("don't call mixpanel in constructor", function () {
-    var _a = mpUrlParameters(), mock = _a[1];
-    expect(mock.distinctIdRetrieved).toBeFalsy();
+test("don't call client in constructor", function () {
+    var _a = clientUrlParameters(), mock = _a[1];
+    expect(mock.deviceIdRetrieved).toBeFalsy();
 });
-test('update mixpanel state', function () {
-    var _a = mpUrlParameters(), urlParams = _a[0], mp = _a[1];
+test('update client state', function () {
+    var _a = clientUrlParameters(), urlParams = _a[0], mock = _a[1];
     urlParams.consumeUrlParameters('d_id=test_input&other=value');
@@ -71,17 +76,11 @@ ['test_input', 'test_mp_distinct_id'].forEach(function (id) {
     });
-    expect(mp.registerParams).toStrictEqual({
-        distinct_id: 'test_input',
-        $device_id: 'test_input',
-    });
+    expect(mock.setDeviceIdParams).toStrictEqual('test_input');
 });
-test('use first device id for mixpanel', function () {
-    var _a = mpUrlParameters(), urlParams = _a[0], mp = _a[1];
+test('use first device id for analytics client', function () {
+    var _a = clientUrlParameters(), urlParams = _a[0], mock = _a[1];
     urlParams.consumeUrlParameters('d_id=test_input1,d2');
-    expect(mp.registerParams).toStrictEqual({
-        distinct_id: 'test_input1',
-        $device_id: 'test_input1',
-    });
+    expect(mock.setDeviceIdParams).toStrictEqual('test_input1');
 });
-test('device IDs with mixpanel', function () {
-    var urlParams = mpUrlParameters()[0];
+test('device IDs with analytics client', function () {
+    var urlParams = clientUrlParameters()[0];
     expect(urlParams.allDeviceIds()).toStrictEqual(['test_mp_distinct_id']);
@@ -88,0 +87,0 @@ urlParams.consumeUrlParameters('d_id=d1,d2,d3&other=value');

dist/test/web.test.js

@@ -21,2 +21,4 @@ "use strict";
     expect(passedData).toHaveProperty('metrics');
+    expect(passedData).toHaveProperty('current_url');
+    expect(passedData).toHaveProperty('current_url_path');
     tracker.trackPageView('test event');
@@ -23,0 +25,0 @@ expect(passedEventType).toStrictEqual('test event');

example/main.js

 const client = analyticsClient.createClient({
     endpoint: 'localhost:3001',
     projectName: 'balena-test',
+    componentName: 'example',
     amplitude: {
@@ -8,4 +9,5 @@ forceHttps: false
 });
+console.log(`Original device ID: ${client.deviceId()}`);
 
-const urlHandler = new analyticsClient.AnalyticsUrlParams();
+const urlHandler = new analyticsClient.AnalyticsUrlParams(client);
 const newUrl = urlHandler.consumeUrlParameters(location.search);
@@ -15,2 +17,4 @@ if (newUrl != null) {
 }
+console.log(`Final device ID: ${client.deviceId()}`);
+console.log(`All device IDs: ${urlHandler.allDeviceIds()}`);
 
@@ -31,1 +35,2 @@ const identify = client.amplitude().Identify;
 webTracker.trackPageView();
+console.log('Reported page view');

package.json

 {
   "name": "analytics-client",
-  "version": "0.5.0",
+  "version": "0.5.1-roman-web-fdda3601c5cf7b1e70b327b239b1c9a23af91e18",
   "description": "Convenient builders to compose analytics tools",
@@ -5,0 +5,0 @@ "repository": {

src/url-params.ts

 import * as Cookies from 'js-cookie';
-import { Mixpanel } from 'mixpanel-browser';
+import { Client } from './client';
 import {
@@ -18,3 +18,3 @@ COOKIES_DEVICE_IDS,
 
-	constructor(private mixpanel?: Mixpanel) {
+	constructor(private client?: Client) {
 		const storedValue = Cookies.get(COOKIES_DEVICE_IDS);
@@ -56,18 +56,11 @@ this.setDeviceIds(storedValue, null);
 		if (passedDeviceId) {
-			const originalMixpanelId =
-				this.mixpanel != null ? this.mixpanel.get_distinct_id() : null;
+			const originalDeviceId =
+				this.client != null ? this.client.deviceId() : null;
 
 			const newCurrentDeviceId = this.setDeviceIds(
 				passedDeviceId,
-				originalMixpanelId,
+				originalDeviceId,
 			);
-
-			if (this.mixpanel != null && newCurrentDeviceId) {
-				// Switch mixpanel ID to using the passed device ID, so we can track events in one timeline branch.
-				// Previous user activity recorded with another device ID will be merged upon signup,
-				// since we store the previous ID to pass it to other sites.
-				this.mixpanel.register({
-					distinct_id: newCurrentDeviceId,
-					$device_id: newCurrentDeviceId,
-				});
+			if (this.client != null && newCurrentDeviceId != null) {
+				this.client.amplitude().setDeviceId(newCurrentDeviceId);
 			}
@@ -86,8 +79,8 @@
 	allDeviceIds() {
-		const mixpanelId = this.mixpanel ? this.mixpanel.get_distinct_id() : null;
-		if (mixpanelId == null) {
+		const currentId = this.client != null ? this.client.deviceId() : null;
+		if (currentId == null) {
 			return Array.from(this.deviceIds);
 		}
 		const res = new Set(this.deviceIds);
-		res.add(mixpanelId);
+		res.add(currentId);
 		return Array.from(res);
@@ -94,0 +87,0 @@ }

src/web.ts

@@ -14,2 +14,4 @@ import { Client } from './client';
 			client.track(name ? name : 'Page View', {
+				current_url: window.location.href,
+				current_url_path: window.location.pathname,
 				metrics: getPageloadMetrics(),
@@ -16,0 +18,0 @@ });

test/url-params.test.ts

@@ -1,2 +0,3 @@
-import { Mixpanel } from 'mixpanel-browser';
+import { AmplitudeClient } from 'amplitude-js';
+import { Client } from '../src/client';
 import { AnalyticsUrlParams } from '../src/url-params';
@@ -51,23 +52,28 @@
 
-interface MpMock {
-	registerParams: any;
-	distinctIdRetrieved: boolean;
+interface AnalyticsMock {
+	setDeviceIdParams: string | null;
+	deviceIdRetrieved: boolean;
 }
 
-const mpMock = () =>
+const clientMock = () =>
 	({
-		registerParams: null,
-		distinctIdRetrieved: false,
+		setDeviceIdParams: null,
+		deviceIdRetrieved: false,
 
-		get_distinct_id() {
+		deviceId() {
 			this.distinctIdRetrieved = true;
 			return 'test_mp_distinct_id';
 		},
-		register(params: any) {
-			this.registerParams = params;
+		amplitude() {
+			const mock = this;
+			return {
+				setDeviceId(id: string): void {
+					mock.setDeviceIdParams = id;
+				},
+			} as AmplitudeClient;
 		},
-	} as Mixpanel & MpMock);
+	} as Client & AnalyticsMock);
 
-const mpUrlParameters = (): [AnalyticsUrlParams, MpMock] => {
-	const mp = mpMock();
+const clientUrlParameters = (): [AnalyticsUrlParams, AnalyticsMock] => {
+	const mp = clientMock();
 	return [new AnalyticsUrlParams(mp), mp];
@@ -77,3 +83,3 @@ };
 test('use mixpanel distinct ID', () => {
-	const [urlParams] = mpUrlParameters();
+	const [urlParams] = clientUrlParameters();
 
@@ -88,9 +94,9 @@ urlParams.consumeUrlParameters('d_id=d1,d2,d3&other=value');
 
-test("don't call mixpanel in constructor", () => {
-	const [, mock] = mpUrlParameters();
-	expect(mock.distinctIdRetrieved).toBeFalsy();
+test("don't call client in constructor", () => {
+	const [, mock] = clientUrlParameters();
+	expect(mock.deviceIdRetrieved).toBeFalsy();
 });
 
-test('update mixpanel state', () => {
-	const [urlParams, mp] = mpUrlParameters();
+test('update client state', () => {
+	const [urlParams, mock] = clientUrlParameters();
 
@@ -103,21 +109,15 @@ urlParams.consumeUrlParameters('d_id=test_input&other=value');
 
-	expect(mp.registerParams).toStrictEqual({
-		distinct_id: 'test_input',
-		$device_id: 'test_input',
-	});
+	expect(mock.setDeviceIdParams).toStrictEqual('test_input');
 });
 
-test('use first device id for mixpanel', () => {
-	const [urlParams, mp] = mpUrlParameters();
+test('use first device id for analytics client', () => {
+	const [urlParams, mock] = clientUrlParameters();
 
 	urlParams.consumeUrlParameters('d_id=test_input1,d2');
 
-	expect(mp.registerParams).toStrictEqual({
-		distinct_id: 'test_input1',
-		$device_id: 'test_input1',
-	});
+	expect(mock.setDeviceIdParams).toStrictEqual('test_input1');
 });
 
-test('device IDs with mixpanel', () => {
-	const [urlParams] = mpUrlParameters();
+test('device IDs with analytics client', () => {
+	const [urlParams] = clientUrlParameters();
 	expect(urlParams.allDeviceIds()).toStrictEqual(['test_mp_distinct_id']);
@@ -124,0 +124,0 @@ urlParams.consumeUrlParameters('d_id=d1,d2,d3&other=value');

test/web.test.ts

@@ -22,2 +22,4 @@ import { createClient } from '../src/client';
 	expect(passedData).toHaveProperty('metrics');
+	expect(passedData).toHaveProperty('current_url');
+	expect(passedData).toHaveProperty('current_url_path');
 
@@ -24,0 +26,0 @@ tracker.trackPageView('test event');

No alert changes

Improved metrics

Total package byte prevSize

250362

increased by0.34%

Lines of code

1564

increased by0.19%

No dependency changes