gtm event를 버튼에 삽입하는 방법

1. 고차 컴포넌트 (Higher-Order Component, HOC) 사용: GTM 스크립트를 포함한 컴포넌트를 만들고, 이 컴포넌트로 각 페이지나 레이아웃을 감싸서 GTM 스크립트를 한 번만 로드하도록 할 수 있습니다.
2. 컨텍스트 (Context) 사용: React의 컨텍스트를 활용하여 GTM 스크립트를 한 번만 로드하고, 각 컴포넌트에서 이벤트를 트리거할 수 있습니다.

import React from 'react';

const addGTMScript = () => {
  const script = document.createElement("script");
  script.innerHTML = `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');
  `;
  document.head.appendChild(script);
};

const withGTM = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      addGTMScript();
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const LoginButton = () => {
  const handleLoginClick = () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'login'
    });
  };

  return (
    <div>
      <button onClick={handleLoginClick}>Login</button>
    </div>
  );
};

const LoginButtonWithGTM = withGTM(LoginButton);

const LoginPage = () => {
  return (
    <div>
      <h1>Login Page</h1>
      <LoginButtonWithGTM />
    </div>
  );
};

export default LoginPage;