Google Analytics event wrapper in React.js (compatible w/Next.js next/link)

href.js

import { forwardRef, useEffect, memo } from 'react';
import * as useGA from '@lib/useGA';

const Href = forwardRef((props, ref) => {

  let element;

  const { 
    onClick, 
    onMouseOver,
    href,
    param,
    children, 
    className, 
    inherit,
    target, 
    title, 
    aria,
    rel 
  } = props;

  const handleRef = (className, inherit) => {

    if (inherit) {
      const inheritStyle = inherit == 'parent' 
        ? element.parentElement.className
        : element.firstElementChild.className;
      
      const activeStyle = inheritStyle.substr(0).split(' ');

      element.className = className 
        ? activeStyle[0] + ' ' + className 
        : activeStyle[0]
    } 
    else if (className) {
      element.className = className
    }
  }

  const handleClick = (param) => {
    const {action, category, label} = param;
    useGA.event({ action, category, label });
  }
  
  useEffect(() => {
  
    if (global.document) {
      element.addEventListener('mousedown', ()=> {handleClick(param)}, {capture: true, once: true}); 
      element.addEventListener('touchstart', ()=> {handleClick(param)}, {capture: true, once: true});
    }

    return () => {
      element.removeEventListener('mousedown', ()=> {handleClick(param)}, {capture: true, once: true}); 
      element.removeEventListener('touchstart', ()=> {handleClick(param)}, {capture: true, once: true});
    };
  }, [global.document]);

  return (
    <a 
      ref={
        (el) => { 
          if (el) {
            element = el;
            handleRef(className, inherit);
          }
          return ref
        }
      } 
      rel={rel}
      href={href}
      title={title}
      target={target}
      aria-label={aria}
      onClick={onClick}
      onMouseOver={onMouseOver}
    >
      {children}
    </a>
  )
})

export default memo(Href)

usage.js

import Link from 'next/link';
import Href from '@components/href';

<Link href="/about" passHref>
  <Href 
    inherit="parent"
    className="secondary" 
    aria="Learn more about me" 
    param={{action: 'Click', category: 'Content', label: 'Photo of Bruce'}}>
    <Image
      alt="A picture of Bruce Abbott"
      path={ENTITY.IMAGE.VCROP}
      ratio="1.25"
    />
  </Href>
</Link>

useGA.js

import ReactGA from 'react-ga';

export const init = id => {
  if(process.env.PROD) 
    ReactGA.initialize(id);
}

export const pageview = path => {
  if(process.env.PROD) {
    if (path) {
      return ReactGA.pageview(path);
    }
    return ReactGA.pageview(
      window.location.pathname + window.location.search
    );
  }
}

export const event = params => {
  if(process.env.PROD) 
    ReactGA.event(params);
}