create-broadcast-app/packages/cra-template-openba/template/src/hooks/useInitGA/useInitGA.ts

Create a NextGen TV broadcast app with one command

/*
 * Copyright © 2022 Sinclair Broadcast Group
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

import { useEffect } from 'react';
import ReactGA from 'react-ga4';
import { useSelector } from 'react-redux';
import { getAppConfig } from 'redux/slices/appConfig/selectors';
import { getDeviceInfo } from 'redux/slices/device/selectors';
import { GaAction } from 'types/GA';

enum AppModes {
  Brodband = 'BB',
  Brodcast = 'BC',
}

const HEARTBEAT_INTERVAL = 60000;

const useInitGA = () => {
  const deviceInfo = useSelector(getDeviceInfo);
  const appConfig = useSelector(getAppConfig);
  const gaAccount = appConfig?.googleAnalyticAccount;
  const mode = deviceInfo?.isInternetConnected ? AppModes.Brodband : AppModes.Brodcast;

  const gaOptions = {
    mode,
    station: appConfig?.stationName,
    uniqueId: deviceInfo?.deviceId,
    manufacture: deviceInfo?.deviceMake,
    model: deviceInfo?.deviceModel,
    userAgent: navigator.userAgent,
  };

  if (gaAccount) ReactGA.initialize(gaAccount, { gaOptions });

  useEffect(() => {
    setInterval(() => {
      ReactGA.event({ category: 'App', action: GaAction.Heartbeat });
    }, HEARTBEAT_INTERVAL);
  }, []);
};

export { useInitGA };