Merge pull request smartcontractkit#3247 from smartcontractkit/featur…

…e/173928064-Explorer-get-the-Google-Anaytics-ID-from-the-backend

explorer/README.md

@@ -115,7 +115,7 @@ Observe network requests using the api having a different origin than the client
 Set Google Analytics tracking ID:
 
 ```
-export REACT_APP_EXPLORER_GA_ID="UA-128878871-10"
+GA_ID="UA-128878871-10"
 ```
 
 ## Typescript

explorer/client/public/config.json

@@ -0,0 +1,3 @@
+{
+    "GA_ID": ""
+}

explorer/client/src/__tests__/config.test.ts

@@ -10,9 +10,4 @@ describe('config', () => {
     process.env.REACT_APP_EXPLORER_BASEURL = 'baseUrl'
     expect(Config.baseUrl()).toEqual('baseUrl')
   })
-
-  it('returns gaId key from the process env', () => {
-    process.env.REACT_APP_EXPLORER_GA_ID = 'gaId'
-    expect(Config.gaId()).toEqual('gaId')
-  })
 })

explorer/client/src/config.ts

@@ -6,8 +6,4 @@ export class Config {
   static baseUrl(env = process.env): string | undefined {
     return env.REACT_APP_EXPLORER_BASEURL
   }
-
-  static gaId(env = process.env): string {
-    return env.REACT_APP_EXPLORER_GA_ID ?? ''
-  }
 }

explorer/client/src/index.tsx

@@ -11,10 +11,17 @@ import './index.css'
 import * as serviceWorker from './serviceWorker'
 import { theme } from '@chainlink/styleguide'
 import ReactGA from 'react-ga'
-import { Config } from './config'
 
-ReactGA.initialize(Config.gaId())
-ReactGA.pageview(window.location.pathname + window.location.search)
+interface BeConfig {
+  GA_ID: string
+}
+
+fetch('./config.json')
+  .then(response => response.json())
+  .then((beConfig: BeConfig) => {
+    ReactGA.initialize(beConfig.GA_ID)
+    ReactGA.pageview(window.location.pathname + window.location.search)
+  })
 
 JavascriptTimeAgo.locale(en)
 moment.defaultFormat = 'YYYY-MM-DD h:mm:ss A'

explorer/src/clientConfig.ts

@@ -0,0 +1,22 @@
+import fs from 'fs'
+import path from 'path'
+
+const workingDir = process.cwd()
+const clientDir = 'client/build/config.json'
+const fileToUpdate = path.resolve(workingDir, clientDir)
+const GA_ID = 'GA_ID'
+
+export function updateClientGaId(id: string) {
+  fs.readFile(fileToUpdate, 'utf8', (err, file) => {
+    if (err) {
+      return console.log(err)
+    }
+
+    const config = JSON.parse(file)
+    config[GA_ID] = id
+
+    fs.writeFile(fileToUpdate, JSON.stringify(config), 'utf8', err => {
+      if (err) return console.log(err)
+    })
+  })
+}

explorer/src/config.ts

@@ -79,6 +79,10 @@ export class Config {
       [key]: value,
     })
   }
+
+  static gaId(env = process.env): string {
+    return env.GA_ID ?? ''
+  }
 }
 
 /**

explorer/src/index.ts

@@ -4,10 +4,12 @@ import { logger } from './logging'
 import server from './server'
 import { getVersion } from './utils/version'
 import { Config } from './config'
+import { updateClientGaId } from './clientConfig'
 
 async function main() {
   const version = await getVersion(Config.env())
   logger.info(version)
+  updateClientGaId(Config.gaId())
 
   const db = await openDbConnection()
   try {