How to make when a user clicks accept all cookies google analytics is enabled , but when user clicks only necessary google analytics is disabled

First thank you for reading my question and trying to help.

I'm trying to make a cookie accept footer and when user clicks on accept all I want to enable google analytics and google tag manager. But when user clicks on only necessary I only want google tag manager and I don't know how to make that.

This开发者_如何学Python is my cookie footer :

import { useState } from "react";
import Cookies from 'js-cookie'

function FooterCookies() {

  cosnt [ show, setShow ] = useState(true)

  const content = {
    text : 'This site uses services that uses cookies to deliver better experience and analyze traffic. You can learn more about the services we use at our ',
    policy : 'Privacy Policy.'
  }

  const setCookies = () => {
    Cookies.set('cookie', 'true', { expires: 2 })
  }

  return (

    <>

      {show ?
      
        (
          <div 
          className=" h-auto bg-black/30 fixed 
          bottom-0 text-cus-yellow rounded
          py-4 px-8 flex justify-evenly items-center z-[100]
          max75:flex-col max75:px-5 max75:py-3 max30:py-1 max30:px-1.5 max75:items-start">

            <div className=" w-85%  max70:text-sm flex items-center max75:w-100% max75:items-start max75:mb-3 " >
              
              <p className=" text-[13px] pt-1">
                {content.text} 
                
                <span className=" text-[16px] underline cursor-pointer ">
                  {content.policy}
                </span>

              </p>
              
            </div>

            <div className=" flex "  >

              <div onClick={() => setCookies()}>

                <div onClick={() => setShow(false)}
                className="border border-cus-yellow text-cus-yellow hover:bg-cus-yellow/60
                transition-all hover:text-black w-28 h-80% bg-black/40 cursor-pointer
                flex flex-col justify-center items-center whitespace-nowrap 
                duration-500 text-lg max75:text-base  font-medium mx-2 px-1 py-2 max75:mx-0 max75:py-1 max75:px-0.5 " 
                >Accept All</div>
                
              </div>

              <div onClick={() => setShow(false)}
              className="border border-cus-yellow text-cus-yellow hover:bg-cus-yellow/60
              transition-all hover:text-black w-36 h-80% bg-black/40 cursor-pointer
              flex flex-col justify-center items-center whitespace-nowrap
              duration-500 text-lg max75:text-base font-medium mx-2 px-1 py-[13.76px] max75:mx-0 max75:ml-3 max75:px-0.5 max75:py-[8.75px] " 
              >Only Nessesary</div>

            </div>

          </div>
        )

      :

      <></>

    }

  </>
  )
}

This is my gtag.js :

export const GA_TRACKING_ID = 'XXXXXXXXX'

export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

This is myApp.js :

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import { useEffect } from 'react'
import Script from 'next/script'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    router.events.on('hashChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
      router.events.off('hashChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />

      <Script id="google-tag-manager" strategy="afterInteractive">
      {`
        (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','XXXXXXXX');
      `}
    </Script>
      <Component {...pageProps} />
    </>
  )

}

export default MyApp

This is my document.js :

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

import { GA_TRACKING_ID } from '../lib/gtag'

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          id='google tags manager'
          dangerouslySetInnerHTML={{
          __html:`(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','XXXXXXXX');`,
          }}
        />
        <Script
          async src={`https://www.googlemanager.com/gtag/js?id=${GA_TRACKING_ID}`} 
        />
      </Head>
      <body>
      <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=XXXXXXX"
          height="0" width="0" style="display:none;visibility:hidden" />`,
        }}
        />
    
        <Main />
        <NextScript />
        <script
          dangerouslySetInnerHTML={{
            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
          `,
          }}
        />
      </body>
    </Html>
  )
}