Missing possibility to disable GTM connection

[MerzDaniel]

Background We'd like to be able to conditionally disable the GTM data collection (e.g. Based on user consent or feature switch). However, there is no API for that. This is important due to GDPR legislation which requires explicit user approval before any data collection is happening.

Feature Request Extend the GtmProvider with a prop enabled that prevents all communication with Google in case it is false

const Providers = ({ children }) => (
  <GTMProvider state={{
    id,
    environment,
    enabled=isGtmEnabled()
   }}> {children} </GTMProvider>
)

Workarounds we tried As we couldn't find an API to disable GTM, we tried the following workarounds:

• Not rendering the GTM provider => useGTMDispatch() throws an error due to missing provider
• Conditionally not calling the useGTMDispatch() => Not possible due to React Hook limitations
• Conditionally pass in empty GTM ID => Works but shows errors in the Console

• Wrap the hook usage into an additional component and render it if the feature is enabled (see below) => Works without issues. Just is boilerplate that could be replaced with the enabled prop

  const _Page = () => (<div> This is a nice page </div>)
  const _PageWithGtm = () => { useGTMDispatch() ; return <Page /> }
  const Page = gtmIsEnabled() ? _PageWithGtm : _Page

[duy-the-developer]

Hi @MerzDaniel, I know it's been a couple of months since your issue was opened, but did you manage to find a solution? If not, you could try setting injectScript to false. This should prevent the GTM script injection on first load and allow you to enable it later in your flow while still mounting the Provider. Similar to what was mentioned in issue #30.

Something like this:

const Providers = ({ children }) => (
  <GTMProvider state={{
    id,
    environment,
    injectScript: false // --> prevent script injection
   }}> {children} </GTMProvider>
)

Then later once the user accepted Cookies:

const Consumer = () => {
  const sendDataToGTM = useGTMDispatch()
  if (cookiesAccepted) sendDataToGTM({ injectScript: true}) 
  // more code here...
}

Disclaimer: I'm not a maintainer but looking at the source code this in theory should work.