Merge pull request #311 from cbernat/datahub

feat: allow custom tracking for datahub
FromDoppler · Jul 19, 2019 · 809cfac · 809cfac
2 parents d965bab + c133461
commit 809cfac
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
     "react-scripts": "^3.0.1",
     "semantic-release": "^15.13.18",
     "styled-components": "^4.3.2",
-    "typescript": "^3.5.3"
+    "typescript": "^3.5.3",
+    "url-parse": "^1.4.7"
   },
   "homepage": ".",
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Doppler</title>
-    <script type="text/javascript" async="async" src="https://hub.fromdoppler.com/public/dhtrack.js"></script>
+    <script src='https://hub.fromdoppler.com/public/dhapi.js' type='text/javascript' enableCustomTracking='true'></script>
   </head>
   <body>
     <noscript>

diff --git a/src/index.js b/src/index.js
@@ -16,6 +16,7 @@ import 'polyfill-array-includes';
 import 'promise-polyfill/src/polyfill';
 import { availableLanguageOrDefault } from './i18n/utils';
 import { HardcodedShopifyClient } from './services/shopify-client.doubles';
+import { getDataHubParams } from './utils';
 
 polyfill();
 
@@ -45,7 +46,8 @@ const trackNavigation = (location) => {
   const locationPage = location.hash && location.hash[0] === '#' && location.hash.slice(1);
   ReactGA.set({ page: locationPage });
   ReactGA.pageview(locationPage);
-  window._dha && window._dha.track({ navigatedPage: locationPage });
+  const dataHubParams = getDataHubParams(locationPage);
+  window._dha && window._dha.track(dataHubParams);
 };
 
 trackNavigation(window.location);

diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,14 @@
+import urlParse from 'url-parse';
+
 export function timeout(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+export function getDataHubParams(partialUrl) {
+  const parsedUrl = urlParse(partialUrl, false);
+  return {
+    navigatedPage: parsedUrl.pathname,
+    hash: parsedUrl.hash,
+    search: parsedUrl.query,
+  };
+}
diff --git a/src/utils.test.js b/src/utils.test.js
@@ -0,0 +1,63 @@
+import 'jest';
+import { getDataHubParams } from './utils';
+
+describe('utils', () => {
+  describe('getDataHubParams', () => {
+    it('should parse url with no params and no hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams('/login');
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('');
+      expect(dataHubParams.hash).toBe('');
+    });
+    it('should parse url with no params and hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams('/login#hash');
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('');
+      expect(dataHubParams.hash).toBe('#hash');
+    });
+    it('should parse url with params and no hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams('/login?param1=value');
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('?param1=value');
+      expect(dataHubParams.hash).toBe('');
+    });
+    it('should parse url with params and hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams('/login?param1=value#hash');
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('?param1=value');
+      expect(dataHubParams.hash).toBe('#hash');
+    });
+    it('should parse url with several params and several hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams('/login?param1=value&param2=value2#hash1#hash2');
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('?param1=value&param2=value2');
+      expect(dataHubParams.hash).toBe('#hash1#hash2');
+    });
+    it('should parse url with several params even badly formatted and several hash correctly', () => {
+      //Arrange
+      //Act
+      const dataHubParams = getDataHubParams(
+        '/login?param1=value?param2=value2?param3=value3#hash1#hash2',
+      );
+      //Assert
+      expect(dataHubParams.navigatedPage).toBe('/login');
+      expect(dataHubParams.search).toBe('?param1=value?param2=value2?param3=value3');
+      expect(dataHubParams.hash).toBe('#hash1#hash2');
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
@@ -12857,7 +12857,7 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-url-parse@^1.4.3:
+url-parse@^1.4.3, url-parse@^1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
   integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==