Added the ability to configure custom pageViewHit (may useful for web analytics) (#1566)

* added the ability to configure custom pageViewHit (may useful for web analytics)
* updated version and changelog
* fixed comments
* cvat-ui minor v++
* subscribe on history updates in the root component

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `datumaro_project` export format (https://github.com/opencv/cvat/pull/1352)
 - Ability to configure user agreements for the user registration form (https://github.com/opencv/cvat/pull/1464)
 - Added cuboid interpolation and cuboid drawing from rectangles (<https://github.com/opencv/cvat/pull/1560>)
+- Ability to configure custom pageViewHit, which can be useful for web analytics integration (https://github.com/opencv/cvat/pull/1566)
 
 ### Changed
 - Downloaded file name in annotations export became more informative (https://github.com/opencv/cvat/pull/1352)

Dockerfile.ui

@@ -5,6 +5,7 @@ ARG https_proxy
 ARG no_proxy
 ARG socks_proxy
 ARG PUBLIC_INSTANCE
+ARG WA_PAGE_VIEW_HIT
 
 ENV TERM=xterm \
     http_proxy=${http_proxy}   \

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/create-task-page/create-task-page.tsx

@@ -12,7 +12,6 @@ import TextArea from 'antd/lib/input/TextArea';
 
 import CreateTaskContent, { CreateTaskData } from './create-task-content';
 
-
 interface Props {
     onCreate: (data: CreateTaskData) => void;
     status: string;

cvat-ui/src/components/cvat-app.tsx

@@ -24,6 +24,7 @@ import AnnotationPageContainer from 'containers/annotation-page/annotation-page'
 import LoginPageContainer from 'containers/login-page/login-page';
 import RegisterPageContainer from 'containers/register-page/register-page';
 import HeaderContainer from 'containers/header/header';
+import { customWaViewHit } from 'utils/enviroment';
 
 import getCore from 'cvat-core-wrapper';
 import { NotificationsState } from 'reducers/interfaces';
@@ -61,7 +62,7 @@ interface CVATAppProps {
 class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentProps> {
     public componentDidMount(): void {
         const core = getCore();
-        const { verifyAuthorized, loadUserAgreements } = this.props;
+        const { verifyAuthorized, history } = this.props;
         configure({ ignoreRepeatedEventsWhenKeyHeldDown: false });
 
         // Logger configuration
@@ -71,6 +72,11 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
         });
         core.logger.configure(() => window.document.hasFocus, userActivityCallback);
 
+        customWaViewHit(location.pathname, location.search, location.hash);
+        history.listen((location) => {
+            customWaViewHit(location.pathname, location.search, location.hash);
+        });
+
         verifyAuthorized();
     }
 

cvat-ui/src/components/register-page/register-page.tsx

@@ -11,8 +11,8 @@ import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
 
 import { UserAgreement } from 'reducers/interfaces'
-import RegisterForm, { RegisterData, UserConfirmation } from './register-form';
 import CookieDrawer from 'components/login-page/cookie-policy-drawer';
+import RegisterForm, { RegisterData, UserConfirmation } from './register-form';
 
 interface RegisterPageComponentProps {
     fetching: boolean;

cvat-ui/src/utils/enviroment.ts

@@ -9,3 +9,14 @@ export function isDev(): boolean {
 export function isPublic(): boolean {
     return process.env.PUBLIC_INSTANCE === 'true';
 }
+
+export function customWaViewHit(pageName?: string, queryString?: string, hashInfo?: string) {
+    const waHitFunctionName = process.env.WA_PAGE_VIEW_HIT
+    if (waHitFunctionName) {
+        const waHitFunction = new Function('pageName', 'queryString', 'hashInfo',
+            `if (typeof ${waHitFunctionName} === 'function') {
+                ${waHitFunctionName}(pageName, queryString, hashInfo);
+            }`);
+        waHitFunction(pageName, queryString, hashInfo);
+    }
+}